?
Solved

css problem with ul menu @ IE7

Posted on 2008-10-06
2
Medium Priority
?
822 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
[X]
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
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

Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

764 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