Solved

css problem with ul menu @ IE7

Posted on 2008-10-06
2
813 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

912 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now