View Full Version : Wrong Interpretation - IE

11-27-2005, 02:46 PM
I have a problem with this CSS menu (http://www.cd2000tutorials.copybase.ch/IEError.htm).
Firefox as well as Opera are able to show this page correctly. Internet Explorer can't display the border-top and the border-bottom.
Only if I set display: block then IE also shows the border correctly. But then the menu items are among each other.
How can I fix it?

I hope someone can help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Language" content="de"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<style type="text/css">
div.SubNav ul {width: 90%; padding: 4px 2px 4px 2px; list-style-type: none; margin: 0; font-size: 8pt}
div.SubNav ul li {float: left; padding: 0; margin: 0 2px 0 0}
div.SubNav ul li a {border-width: 0; padding: 2px 6px 2px 6px; margin: 0px 2px; background: #FFFFFF; height: 2%; line-height: 1em; color: #000; text-decoration: none; border: solid 1px #FFFFFF}
div.SubNav ul li a:hover {border: solid 1px #999999; background: #CCCCCC}
<body style="color: #808080; font-family: Verdana, sans-serif; font-size: 10pt; background-color: #FFFFFF">
<div class="SubNav">
<li><a href="#">• Link Uno</a></li>
<li><a href="#">• Link Due</a></li>
<li><a href="#">• Link Tre</a></li>
<li><a href="#">• Link Quattro</a></li>
<li><a href="#">• Link Cinque</a></li>

I solved the problem by myself.
Solution: line-height: 1em to line-height: 200%