• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 828
  • Last Modified:

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
0
netrinogr
Asked:
netrinogr
1 Solution
 
darkappleCommented:
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

0
 
netrinogrAuthor Commented:
Thanks for you help.

That it turned out that I had to change the css code as shown below.

Thanks for the inspiration, though!!!
.green #mnu ul li a:link, .green #mnu ul li a:visited,.green #mnu ul li a:active{
display:block;
float:left;
color:#EEFFDF;
text-decoration:none;
padding:10px 10px 0 10px;
height:28px;
font-size:12px; /*added this line */
margin:0px; /* added this line */
}

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now