Odd html5 / css behaviour

Question

Please take a look at this: http://jsfiddle.net/MbrJf/

When I use inspect element, the body starts 100px from the top of the page, even though there is no margin or anything like that in the css. If the <nav> element is removed from the page, everything works ok (even if the margin-top rule is removed from the css, it works ok - but there is still a little gap).

The nav shouldn't be all the way at the top, but when the margin-top is added, it pushes the h1, address, and rest of the site below it... it is very confusing. I'm trying to accomplish this: https://i.sstatic.net/Uu8QN.jpg

Can someone make sense out of this?

HTML:

<div id="wrapper">
  <header>
    <h1><a href="index.html" title="Ozio Sushi">Ozio Sushi</a></h1>
    <address>
    123.456.7890<br>
    123 Fake Street West, Toronto
    </address>
    <nav>
      <ul>
        <li><a href="about.html" title="About">About</a> </li>
        <li> <a href="menu.html" title="Menu">Menu</a></li>
        <li> <a href="gallery.html" title="Gallery">Gallery</a></li>
        <li> <a href="contact.html" title="Contact">Contact</a></li>
      </ul>
    </nav>
  </header>
</div>

CSS:

@charset "UTF-8";
/* CSS Document */


body { 
margin: 0px;
padding: 0px;
background-color: #362f2d;
}
a {
    text-decoration: none;
    color:inherit;
    border: none;
}
#wrapper {
    background-color: #362f2d;
    width: 100%;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
}
header {
    clear: both;
    width: 100%;
    display: block;
}
nav { 
height: 50px;
width: 100%;
background-color: #f7941d;
margin-top: 100px;
}
header h1 {
    font-family: Kaushan script, cursive;
    color: white;
    float:left;
    font-size: 60pt;
    font-weight: 300;
    margin:0px;
}
address {
    font-family: Lato, Arial, sans-serif;
    color: white;
    font-weight:300;
    font-size: 8pt;
    float:left;
    font-style: normal;
}

li {
display: inline;
margin-right: 60px;
font-family: Lato, Arial, sans-serif;
color: white;
font-size: 16pt;
font-weight: 400;
}
#main {
    clear:both;
    margin:0px;
}

Please, also post the code within the question to maintain usefulness in the future if the link goes dead. — Sparky
– Sparky, Commented Oct 28, 2012 at 16:26

Matt Whipple · Accepted Answer · 2012-10-28 16:36:07Z

1

set the margin-top on the nav and the ul within the nav to 0:

http://jsfiddle.net/MbrJf/3/

The margins will push the body down, and the ul has the default margin which must be canceled (you should use a reset or normalize CSS file)

EDIT

Then you'd want something like this: http://jsfiddle.net/MbrJf/4/? The underlying issue in that case is that the header isn't properly containing the logo h1 as it is floated. Applying one of the standard solutions like a clearfix or overflow:hidden will take care of that.

edited Oct 28, 2012 at 16:36

answered Oct 28, 2012 at 16:24

Matt Whipple

7,1541 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jamesplease Over a year ago

Another issue, though not one that led to the undesired behavior, is that you're copying the entire document. With JSFiddle, you're only supposed to put the tags within body.

Peter Di Cecco Over a year ago

The problem is that the nav is supposed to have a margin, but the h1 and address shouldn't be pushed down as well. I'm trying to accomplish this: imgur.com/zgBFm

Peter Di Cecco Over a year ago

overflow: hidden; seemed to work. I've never heard of that fix before, thanks for your help!

Collectives™ on Stack Overflow

Odd html5 / css behaviour

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related