cip6791 Posted May 16, 2008 Share Posted May 16, 2008 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> Link to comment https://forums.phpfreaks.com/topic/105907-css-help-ie-bug-or-is-it-my-code/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.