The Story
I'm nearly finished with a project that I'm developing for a client, however I've run into an issue with the margin-top property when I apply a negative amount to it. It works fine in Safari and Chrome (the main browsers I had been testing in, didn't bother testing in firefox since safari was producing it just fine). The web page consists of a small container at the top of the page which contains 3 div's that have a background pattern that stretches across 100% of the browser. Beneath the pattern container sits the rest of the content, which has amargin-top:-433px;applied to it so it sits on top of the pattern container. (except in firefox)
The HTML
The CSS
#pattern-container{
position:relative;
height:433px;
width:100%;
clear:both;
}
#head-container{
margin-top:-433px;
overflow:hidden;
}
nav {
height:70px;
}
#navigation {
float:left;
width:900px;
background:url(…/images/navgradient.png) #004f74;
border-radius:8px 8px 0 0;
}
#navigation ul li{
font-family:“Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:16px;
text-transform:uppercase;
padding:0 19px 0 20px;
margin:0;
float:left;
border-right:1px solid #000000;
}
I’d really appreciate any input on this, after doing some research I found that Firefox does have an issue with applying negative margins to things that are positioned Relatively, but in this case my content-container is static, so I’m not entirely sure what could be happening here…
Thanks! 