CSS help. IE bug ? Or is it my code ?

[cip6791]

Hi all

 

I am trying to build a website and i'm having problems with a margin-top. Below is the code. I m new at this so bear with me pls. I only want the sub_menu to appear on certain pages. I'm sure javascript would help me but i'll try that later. that s why it s commented out on this page. my problem is here :

        #content{

position:relative;

height:380px;

margin-top:35px;

} by moving the content down 35px, i can have the background from sub_menu all the time. and it looks great. in FF, Safari, Konqueror it looks fine. When I view it in IE it's too low. Can anybody help me out with this one? And and other pointers would be appreciated.

 

Thank you.

 

 

 

body {

background:white;

}

#container {

width:880px;

margin:0 auto;

}

 

.header{

height:98px;

}

 

#menu {

width:100%;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

}

 

#menu ul {

margin:0;

padding:0;

float:left;

width:100%;

background-color:#003975;

border-bottom:4px solid #b39765;

}

 

#menu ul li {

display:inline;

}

 

#menu ul li a {

float:left;

height:22px;

color:white;

border-right:1px solid #FFFFFF;

text-decoration:none;

padding-left:10px;

padding-top:7px;

padding-right:10px;

}

#menu ul li a:active {

background-color:#000000;

}

#menu ul li a:hover {

background-color:#000000;

}

 

 

#sub_menu{

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

background-image:url(img/roc_sub_menu.gif);

float:left;

height:25px;

width:100%;

}

 

#sub_menu ul{

 

margin-top:3px;

margin-left:20px;

padding:0;

float:left;

width:50%;

}

 

#sub_menu ul li{

display:inline;

}

 

#sub_menu ul li a{

float:left;

border-bottom:2px solid #b39765;

background-color:#003975;

color:#FFFFFF;

border-right:1px solid #FFFFFF;

padding-left:2px;

padding-right:2px;

text-decoration:none;

}

 

#content{

position:relative;

height:380px;

margin-top:35px;

}

 

.main_left{

position:absolute;

margin-top:25px;

background-image:url(img/roc_backround_main_left.gif);

background-repeat:no-repeat;

width:147px;

height:360px;

margin-left:0;

float:left;

}

 

.main_right{

position:absolute;

margin-top:25px;

text-align:right;

float:left;

margin-left:150px;

width:725px;

height:360px;

}

 

.footer {

height:25px;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

background-color:#003975;

border-top:3px solid #b39765;

color:#FFFFFF;

margin-top:5px;

padding-left:25px;

padding-top:10px;

}

-->

</style>

 

<div id="container">

 

<div class="header"><img src="img/roc_header.gif" alt="cosmetice roc" width="880" height="98" border="0" usemap="#Map" />

<map name="Map" id="Map">

  <area shape="rect" coords="25,5,149,91" href="index.html" />

</map></div>

 

<div id="menu">

<ul>

 

<li><a href="marca_cosmetice_roc.html">MARCA</a></li>

<li><a href="#">NOUTATI</a></li>

<li><a href="produse_cosmetice_roc.html">PRODUSE</a></li>

<li><a href="tehnologie_cosmetice_roc.html">TEHNOLOGIE</a></li>

<li><a href="http://www.smoinge.com">www.promisiuniindeplinite.ro</a></li>

 

</ul>

 

</div>

<div id="sub_menu">

 

<ul>

<!--

<li><a href="http://www.smoinge.com">www.smoinge.com</a></li>

<li><a href="http://www.smoinge.com">www.smoinge.com</a></li>

<li><a href="http://www.smoinge.com">www.smoinge.com</a></li>

-->

 

</ul>

</div>

 

<div id="content">

 

<div class="main_left"></div>

<div class="main_right">

 

<iframe frameborder="0" width="670" height="355" scrolling="no" src="test.html"></iframe>

 

</div>

 

</div>

<div class="footer">PROMISIUNI INDEPLINITE</div>

</div>