Topic: Stuck on a stupid CSS problem

Can anyone help me with this one?  I'm just styling up my new Rails app and I noticed that Firefox isn't doing what I'd expect in the CSS.  If you look at "this page":http://www.contributionmanager.co.uk/test.html in Firefox, you'll see that the nav has detached itself from the banner.  In IE, it's where I'd expect it to be.

The really odd thing is that if I put a 1px border around the header area (to see where it ends), the nav then jumps up and slots in just underneath.  If I take the border back out, it drops down again.  The border makes no difference to the positioning in IE.

What have I done?!

The CSS is really simple as I've only just started styling.



.hidden { display: none; }

/* Typography */

body, td, th {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background: white url(/images/about-header-bg.jpg) repeat-x 0% 65px;
  margin: 0px;
  padding: 0px;
}

#wrapper {
  width: 740px;
  margin: 0 auto;
  text-align: left;
  padding: 0px;
}

#wrapper img {
  margin: 5px 0px;
  padding: 0px;
}

#header {
  position: static;
  margin-top: 0px;    /* To leave room for the logo */
  height: 235px;
  color: white;
  padding: 0px 400px 0 0px;
  margin: 0;
}

#header h1 {
  margin-top: 35px;
  font-size: 130%;
}

#navoutside {
  margin: 0px;
  padding: 0px;
  height: 36px;
}

#navoutside ul {
  margin: 0px;
  padding: 0px;
}

#navoutside ul li {
  margin: 0px;
  padding: 0px;
  list-style: none;
  float: left;
  width: 100px;
  padding: 7px 0 11px 25px;
  background: #ccc url(/images/about-nav-image.jpg) no-repeat 5px 12px;
}

#navoutside ul li a {
  font-size: 80%;
  font-weight: bold;
  color: black;
  text-decoration: none;
}

#content {
  clear: left;
}

Re: Stuck on a stupid CSS problem

Firefox has an issue with elements inside divs, where the div has no margin (and usually is at the top of the page) but the first element in the div has a margin. It then makes the margin outside the div, rather than within.

This is what's happening with your #header div and the h1 inside it. If you change the #header h1 to:

#header h1 {
  margin-top: 0;
  padding-top: 35px;
  font-size: 130%;
}

you should fix your problem.

Re: Stuck on a stupid CSS problem

Thanks Adam, that's a perfect cure.