Things work great in FF, NS 7.1 but in IE, it's all screwy. In my case, it's related to a small but yet, simple menu. There are two level of embeded ULs. It's not fancy now due to the fact that I'm early in the development stage.
I've also validated it - which it did validate to the DTD.
I've gone through and tried to put default values for padding and margin all across the board. But it still doesn't seem to show up right. The problem is that the buttons are too thick, compared to FF and NS which are perfect.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
/* Menu */
body{font-family: verdana;}
#menu{font-size: 80%;}
#menu ul, #menu ul ul{list-style-type: none; padding: 0; margin: 0;}
#menu ul li{padding-left: 5px; padding: 0; margin: 0 0 0 5px;}
#menu ul ul li{background: #f0f0f0;}
#menu ul ul li{margin: 2px; padding: 0;}
#menu ul ul li a{font-size: 90%; display: block; text-decoration: none; padding-left: 5px;}
#menu ul ul li a:hover{color: #fff; background: gray;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Welcome
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"default.cfm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"default.cfm?action=login">Login</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"default.cfm?action=doLogout">Logout</a></li>
</ul>
</li>
</ul>
<ul>
<li>Permits
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">My Applications</a></li>
</ul>
</li>
</ul>
<ul>
<li>Forms
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/forms/plants/default.cfm?action=new">Plants</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Animals</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Ginseng & Goldenseal</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Captive Breeding</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Hunting Trophy</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Hunting Trophy Assessment</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Pet</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Transit</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Monkey Puzzle Tree</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>does this help?
#menu ul ul li a{font-size: 90%; display: block; height: 1em; text-decoration: none; padding-left: 5px;}Sure does... replaced the 1em by 100% and everything is looking nice. Thanks.No problem - that problem is more pronounced in older browsers - I noticed in IE5 some of my display:block lines were 200px high if I didn't specify a height!
Regards
DaveYeah... seems IE's default values for attributes that aren't specified in the CSS is either too much or too little.
I've also validated it - which it did validate to the DTD.
I've gone through and tried to put default values for padding and margin all across the board. But it still doesn't seem to show up right. The problem is that the buttons are too thick, compared to FF and NS which are perfect.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
/* Menu */
body{font-family: verdana;}
#menu{font-size: 80%;}
#menu ul, #menu ul ul{list-style-type: none; padding: 0; margin: 0;}
#menu ul li{padding-left: 5px; padding: 0; margin: 0 0 0 5px;}
#menu ul ul li{background: #f0f0f0;}
#menu ul ul li{margin: 2px; padding: 0;}
#menu ul ul li a{font-size: 90%; display: block; text-decoration: none; padding-left: 5px;}
#menu ul ul li a:hover{color: #fff; background: gray;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Welcome
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"default.cfm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"default.cfm?action=login">Login</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"default.cfm?action=doLogout">Logout</a></li>
</ul>
</li>
</ul>
<ul>
<li>Permits
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">My Applications</a></li>
</ul>
</li>
</ul>
<ul>
<li>Forms
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/forms/plants/default.cfm?action=new">Plants</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Animals</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Ginseng & Goldenseal</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Captive Breeding</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Hunting Trophy</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Hunting Trophy Assessment</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Pet</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Transit</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Monkey Puzzle Tree</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>does this help?
#menu ul ul li a{font-size: 90%; display: block; height: 1em; text-decoration: none; padding-left: 5px;}Sure does... replaced the 1em by 100% and everything is looking nice. Thanks.No problem - that problem is more pronounced in older browsers - I noticed in IE5 some of my display:block lines were 200px high if I didn't specify a height!
Regards
DaveYeah... seems IE's default values for attributes that aren't specified in the CSS is either too much or too little.