Why does the HTML5 DOCTYPE mess with my padding?

Question

I have an html5 page with a navbar. Completely scratch coded. I just recently added a doctype to the item, and now I’m getting extra space under my navbar. If I remove the docty

Answer 1

wow. @matt is right (not in this case) and that's general knowledge, but you're all wrong.

dude look @ your css, you have

pagetab {background-color: #ff2d00; padding: 0px 4px; margin: 0; display: inline-block;}

pagetab ul {list-style: none; margin: 0px; padding: 0px 4px; display: block;}

for .....

so that second declaration is on nested ul that occur in #pagetab. you dont have any of those.

i took the ul off the declaration so they're on the correct element. now your css has 2 styles that match for both (and are also called in your universal selector (fyi, which goes above your body{} declaration)) so thats 3 styles....overkill dude. moreover, the ones not matching, you set it to display:inline-block and then reset it to block...i'm lost in this logic.

SO take your example. change two pagetab styles to this

pagetab {

background-color: #ff2d00;
padding: 0px 4px;
margin: 0;

}

pagetab {

list-style: none;
margin: 0px;
padding: 0px 4px;
display: block;

}

save it. now strip off it, save that as #2. in FF3.6 on 7 they are the same.

if you would use the validators that are provided specifically for solving/preventing issues like this, as well as qa tools (specifically here i'm talking about the dust-me selectors bookmarklet) you would resolved this in not time.

back to web standards, gen ed css: *{} is universal, so as long as another declaration doesn't override *'s specificity, it will always work. in english, if you declare *{margin:0; padding:0; border:none} at the top of your page, you don't have to put margin:0; padding:0; on every single element. you already have.

web standards, they'll save your life.