I have downloading the responsive framwework http://996grid.com/ and in the Normalize.css it has default settings of padding: 0 0 0 40px; for various items. for example
menu,
ol,
ul {
padding: 0 0 0 40px;
}
dd {
margin: 0 0 0 40px;
}
Can someone explain the reasoning of this as when I add a ul it adds 40px onto it... If I remove the 40px in the normalize will it effect browser support?
Thanks for your help
In the official Normalize.css (available at https://github.com/necolas/normalize.css/), there is no such padding, however most browsers will add this padding anyway to simply give the list some indentation from regular text.
If you want to remove this, simply modify the provided CSS or override it within your own CSS:
menu,
ol,
ul {
padding: 0;
}
dd {
margin: 0;
}
It's up to you to style your own documents however you like; aside from the default styles defined in the HTML specification, most browser default styles are simply there to make simple unstyled documents a bit prettier.
According to Erik Meyer it's a remnant from Mosaic. He said it at the end of Web Platform podcast episode 139
Related
When we are creating a web page using bootstrap we can set margins. But web browser also gets some margins. Although code as div(class="container-fluid") or code as margin:0; and padding:0; based on the container in the CSS file, I couldn't solve the problem. Can you help me?
Some browsers have a margin on the body tag. Set that to 0 somewhere in your css.
body {
margin: 0;
}
This is Browser default margin for body:
Fix It Like this:
body {
margin:0;
}
Set the margin to zero on any element is simple just type something like
body{
margin:0
}
Although sometimes bootstrap has his own margin rules included like setting margin on h tags, you could remove them as well by using more specific rules (read about specificity here) or by using important
h4{
margin: 0 !important
}
The reason for that is browsers have default styling for elements.
To reset margin only on body element you can use:
body {
margin: 0;
}
To reset all styling (which is not so-bad thing) in all browsers you can use css library called normalize.css.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
This library is used by big companies as GitHub, Twitter, Soundcloud, Guardian, Medium and many others.
Although you put container-fluid, sometimes it doesn't make the width 100% fit the screen because browsers make a default margin and padding.To make it fit the screen you have to do like this.
body{
padding: 0;
margin: 0;
}
If it doesn't work make them important as following.
body{
padding: 0 !important;
margin: 0 !important;
}
I am using Twitter Bootstrap, but can't understand
How to set margin 0 0 9 15 for
[ul class="taxons-list"]
On the my site vk-magazin.com
Following result I want to achive:
Try this CSS rule:
ul.taxons-list {
padding: 0;
margin: 0 0 9px 15px;
}
I edited your HTML using Firebug and this style and it works just as your picture intends.
On the site I'm working on, for some reason the margin is needing to be different for Safari than in FF, IE8, Chrome & Opera? I have a link that I want lined up next to a label. It's lining up fine in all but Safari which needs a 12 pixel difference. Here's a screenshot to better describe the issue: Click
The Safari screenshot shows the label down too low. This is the CSS I use for the working 4 browsers:
.submitter a {
float: right;
margin: -2px 0 0 2px;
padding: 0 !important;
}
And here's the code that works for Safari, however, usig it throws the link UP 12 pixels.
.submitter a {
float: right;
margin: -14px 0 0 2px; Works in Safari & Chrome
padding: 0 !important;
}
Anyone able to shed some light on this? TIA
This seems to sort it out:
.submitter a {
float: none;
display: inline !important;
margin: 0 0 0 2px;
}
It's really very convoluted in there due to nonsensical use of the cascade.
Some rules are being applied to elements where they really shouldn't be due to selectors like:
.box_777 ul li a
You'd be better replacing that selector with something like:
.individual-likes > a
But, it's difficult to predict how improving your selectors will change how your page displays.
The reason it goes up like that could be because of the - pixel value. Are they nested correctly in the div? And did you apply the same alignment (CSS, Html, etc.) for the Chrome buttons?
There is a lot going on, but you might try one of the following:
.submitter .smalltext { float: left; }
(or)
Move the "follow" anchor tag before the "smalltext" span
Looking at the site, the anchor is being set to block by .box_777 ul li a and then floated right by .submitter a.
If I remove the display: block; and float: right; things align.
How do you make sure all the content in a numerical list is left aligned to the same spot? You see how when you go from #9 to #10, the numbering gets an extra digit and pushes the content a little bit to the right? I can live with #99-to-#100 screwing things up, but I'd like to fix this #9-to-#10 issue. Making the numbering go outside makes the content align properly, but then there's no background on the numbering.
#file ol {
line-height: 3em;
font-size: 1.2em;
color: #999;
}
#file ol li {
list-style: decimal inside none;
padding: 0 0 0 1em;
}
#file ol li.alt {
background: #eee;
}
The list style needs to be outside for this to happen.
#file ol li {
list-style: decimal outside none;
padding: 0 0 0 1em;
}
The only other option, to fix your background issues, would be to use another element inside the LI that you place inline-block with a predefined width and manually increment or to use a table. If your project does not rely on backwards compatability, please let me know as there may be some CSS3 options.
i have an issue with my css where if i use margin: 0 instead of margin-top: 0, for header p, the header { margin: 0 0 20px; } will be as good as not there. isit supposed to be like that? if i see what happens in firebug, its because the margin-bottom of header collapsed into the next sibling, the section.
html
<header>
<h1>ToDo List</h1>
<p>HTML5 Offline Capable Web Application</p>
</header>
css
header { font: 24px/1em Notethis; color: #666; margin: 0 0 20px; }
header h1 { font: 60px/1.4em Hetilica; margin: 0; }
header p { margin-top: 0; }
By default, Firebug only show you part of the story.
To see what really happens when you change margin-top: 0; for margin: 0 0 0 0;, please click on the arrow right to the Style tab (above 'header p' on your snapshot) and select "Display default CSS properties" or sth like that and you'll see downward that html.css already styles p as:
p {
display: block;
margin: 1em 0;
}
Beware, do NOT modify system styles or you'll have to restart Firefox, reopening tabs won't be sufficient.
BTW this 1em margin is what you see in HTML without any style (menu Display / Page style / No style in Firefox or CSS menu of Web Developer Toolbar) : your paragraphs have some vertical margin.
So basically you erased a 1em bottom margin.
I think that the problem here is that your header element is not actually rendering any margin applied to it at all. The space you are seeing is actually the result of a default margin applied to header p.
The reason I say this is that many browsers will not automatically treat the header tag as a block-level element unless explicitly defined as such:
header { display: block; }
After applying this statement to header in your CSS I could successfully apply header p { margin: 0 } and retain the margin specified in header itself. Removing this statement will revert back to the behaviour you are seeing.