Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

css problem with ul menu @ IE7

Posted on 2008-10-06
2
819 Views
Last Modified: 2013-12-25
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
Comment
Question by:netrinogr
2 Comments
 
LVL 9

Expert Comment

by:darkapple
ID: 22651500
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
 

Accepted Solution

by:
netrinogr earned 0 total points
ID: 22657275
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question