I am having trouble removing the margin from the top of my container in codeigniter it is something to do with the default css but do not know where would remove it from.
https://carrarawebsitesolutions.com/
You can have a look at the top and see what I mean. I have tried may ways and now think it is something to do with the codeigniter default css I in command area some where.
I have tried do add
body {
margin: 0px !important;
padding 0px !important;
}
And still nothing
Try adding margin: 0; to .header h1
That should fix it. Hope this helps and I would suggest starting off with the Eric Meyer Reset.
Related
I have a css where I defined a class for the top div with these properties
.topbluebar {
margin:0;
height:19px;
width:100%;
background-image:url('../../Images/top_blue.gif');
clear:both;
}
Here is the simple Html page
<link href="~/Content/Style.css" rel="stylesheet" />
<div class="topbluebar"></div>
<div>Foo foo</div>
Image is appearing but not with the top of browser but with little margin from top which I don't want.
In simple words I want to implement it like Stackexchnage topbar class but it doesn't seems to work for me at all.
I have read many answers but none of them worked for me yet.
Try adding the following in your stylesheet.
body { margin:0;padding:0 }
http://jsfiddle.net/z18Lpy99/
Also, to avoid these kind of issues, it is a good idea to use CSS Resets. Try reading up on http://cssreset.com/
A really simple solution would be to add the following css (below) to the top of your file. This essentially resets the margins to 0.
Here is a link to the updated JSFiddle: https://jsfiddle.net/r58hvuzp/
*{
margin: 0;
}
Try this
* {
margin: 0;
padding: 0;
}
Basically lots of things in html has default styles which include default values for padding and margins.
I am working on adding a menu to a map. The menu is working fine except I noticed there is always a padding to the left no matter what CSS applied to the menu. The padding seems to be originated from (-webkit-padding-start: 40px;) and it does not want to go away. I tried to override it with 0 !important; that didn't do anything.
After Googling found this:
-webkit-padding-start: 40px; What it should be for IE and Firefox?
However could not find anything else on how to override or make this go away. I need to have items in the menu all the way to the left.
Attached is a screenshot, green area is what I am talking about and under styles you can see -webkit-padding-start: 40px;
It's because of the user-agent stylesheets of every browser.
You should always reset all attributes in your css as your first step.
Short solution:
* {
margin: 0;
padding: 0;
}
/* your styling */
Longer solution:
http://meyerweb.com/eric/tools/css/reset/
for firefox:
-moz-padding-start: 0px;
I had this issue for a menu aswell and tried to correct it in the ul .navigation {} style I was using but didn't work until I reset it in the ul {} itself - incase anyone else has the same trouble.
I'm trying to remove the margin in the screenshot attached (see http://goo.gl/tbw4V), but I can't for the life of me see where it is in my WordPress stylesheet to remove it! I was hoping someone on hear could possibly help me? I have checked the H1, H2 tags, .bylines DIV and paragraph tags but nothing seems to be pushing the entry information approximately 15 pixels below the header. My website is at http://gracefulpostcards.com
Thanks for any help,
Steven.
To adjust these styles is highly recommended that you use the Firebug extension for Chrome or Firefox. So you can debug the html page and styles.
In your case, simply set the property margin-bottom of selector .singular .entry-title with 0:
.singular .entry-title {
margin-bottom: 0;
}
in style.css line 753
.hentry .entry-title {
margin: 0 0 0.6em 0;
}
Look in style.css, the style starting at line 753.
How I found it? Google Chrome -> Right click -> Inspect element.
The margin is defined under the selector .hentry .entry-title. It's margin: 0 0 0.6em 0. Just make it 0.
.featured {
margin-bottom: 20px;
}
Is the CSS rule you have to change.
If this is the page you are talking about : http://gracefulpostcards.com/why-start-a-personal-blog/#.UKGMi4csDng
then removing this CSS rule deletes the margin-bottom perfectly.
After inspecting your page, it seems that h2.entry-title has a margin-bottom
To fix this, add the following to your css:
h2 {
margin-bottom: 0px !important;
}
I want the vertical menu completely at the top-left corner but right now there still about 2px top and left margin and I can not figure out why, all margin set to 0 already. Some one have any idea?
Thank so much!
The body tag has a margin set on it, try:
body { margin:0; padding:0; }
add margin: 0px; to your pages body tag.
You need to set margin: 0 on the body (live editing via Developer Tools solves it for me).
And learn to use Developer Tools ;)
Using Chrome, it showed me you had something like this:
body {
display: block;
margin: 8px;
}
from the user agent stylesheet.
You used some CSS Reset? If not, use this: http://meyerweb.com/eric/tools/css/reset/. Or if you want a quicker solution, use body {margin: 0; padding: 0;}
I'm guessing that there are still default margins on the page. Try using a CSS reset file. This will make sure that the margin and padding are all 0 when you start (along with some other nice resets).
I am using custom bullet points on a website.
Now this site will also be available in Arabic.
.post ul li{
color: #555555;
background: url(images/ico-bullet_round.gif) no-repeat !important;
background-position: 300px 6px !important;
padding-right: 15px !important;
padding-left:0 !important;
direction:rtl;
}
However with direction:rtl; I am unable to have all the bullet points on the right side. Some are more indented than others.
Please see a screenshot showing the problem.
Any suggestions on how to simply align all bullet points on the right?
UPDATE: Please see this screenshot with background-position set to 0 6px. It has something to do with direction:rtl; but I can't figure it out.
Is there any reason why not simply list-style-image, which is designed specifically for custom bullets?
ul { margin: 0 20px; padding: 0; }
ul li {
margin: 0; padding: 0;
list-style: disc url(images/ico-bullet_round.gif);
direction:rtl;
}
works for me, assuming you do mean the right-hand side when you say “right side”. You could have them on the left as well if you wanted by putting the rtl on a child div inside the li, but that'd look a bit strange for Arabic, I think.
I had the same problem and got over it by using:
ul{direction:rtl;}
li{direction:rtl; margin-right:20px;}
The functioning attribute is using: margin-right:20px while using direction :rtl
Thanks
One solution could be to put background-position like this:
background-position: 100% 6px !important;
I supppose that the direction: rtl, does not influence in backgrounds.
Trying using • at the beginning of the sentence, while aligning everything to the right. That way you can get something like this:
مرحبا •
Try ::before and ::after in css styling and your rtl file and use JavaScript to release css effect.
Example:
this is (RTL list but bullets are not suitable
Here are you Css code for before RTL.
ul.points li:before{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}
Then After i made RTL file i used this code :
ul.points li:after{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}
but look for this image ( it has bullets before and after ( hence your turn to remover it using javascript (add class and remove class) to Css:
this is (after) rtl css style
I wish this helps noting that it's my first comment in stack ever!
Try background-position: right;
Worked for me.