asked on

css problem with ul menu @ IE7

Hello experts.

I have created a menu like the one shown on images.

The problem is that after I visit a link it is not renders ok the menu,

I attach the images to see what is going on and the css & html code.

I need help please...

CSS
 
/* ---------------------- Greenslate nav ---------------------- */
#menu-container {
 display:block;
 float:left;
 width:720px;
 height:32px;
 margin-bottom:8px;
 margin-left:0px;
 margin-right:0px;
 margin-top:0px;
}
.green #mnu{position:relative;display:block;height:32px;width:720px;font-size:12px;font-weight:bold;background:transparent url(../images/bg_menu.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;}
.green #mnu ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #mnu ul li{display:block;float:left;margin:0 1px 0 0;}
.green #mnu ul li a:link, .green #mnu ul li a:visited{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:10px 10px 0 10px;height:28px;}
.green #mnu ul li a:hover,.green #menu ul li a.current{color:#fff;background:transparent url(../images/bg_menu_over2.gif) repeat-x top left;}
/*-------------------------------------------------------------*/
 
html
 
<div id="menu-container">
<div class="green">
<div id="mnu">
<ul>
 <li><a href="europe-foreign-language-school.php" >— "•ÅÁÎÀ·"</a></li>
 <li><a href="educational-enviroment.php" >•ºÀ±¹´µÅÄ¹ºÌ  µÁ¹²¬»»¿½</a></li>
 <li><a href="english.php" >‘³³»¹º¬</a></li>
 <li><a href="german.php" >“µÁ¼±½¹º¬</a></li>
 <li><a href="french.php" >“±»»¹º¬</a></li>
 <li><a href="ecdl.php" >ECDL</a></li>
 <li><a href="usefull-links.php" >£Í½´µÃ¼¿¹</a></li>
 <li><a href="contact-us.php" >•À¹º¿¹½É½¯±</a></li>
</ul> 
</div>
</div>
</div>

Open in new window

0-firefox3-working-good.gif
1-ie7--not-working-good.gif

darkapple

have you tried giving fix width to .green #mnu ul like720px.
if problem persists
try giving negative margin to .green #menu for ie and 0px to mozilla.
the one with [class] is ignored by IE.

.green #mnu{
position:relative;
display:block;
height:32px;
width:720px;
font-size:12px;
font-weight:bold;
background:transparent url(../images/bg_menu.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
margin-top:-1px; /* try with different negative number */
} 
 
 
.green[class] #mnu{
margin-top:0px;
}

Open in new window

ASKER CERTIFIED SOLUTION

netrinogr

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial