Solved

css problem with ul menu @ IE7

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Use "if not" in a condition 2 19
Making Table Thru ASP Response.write 5 19
CSS - how to make button/link change to black on hover? 2 18
aria difference 2 15
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

726 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