DanDigiMan
04-02-2004, 11:00 AM
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="default.cfm">Home</a></li>
<li><a href="default.cfm?action=login">Login</a></li>
<li><a href="default.cfm?action=doLogout">Logout</a></li>
</ul>
</li>
</ul>
<ul>
<li>Permits
<ul>
<li><a href="">My Applications</a></li>
</ul>
</li>
</ul>
<ul>
<li>Forms
<ul>
<li><a href="/forms/plants/default.cfm?action=new">Plants</a></li>
<li><a href="">Animals</a></li>
<li><a href="">Ginseng & Goldenseal</a></li>
<li><a href="">Captive Breeding</a></li>
<li><a href="">Hunting Trophy</a></li>
<li><a href="">Hunting Trophy Assessment</a></li>
<li><a href="">Pet</a></li>
<li><a href="">Transit</a></li>
<li><a href="">Monkey Puzzle Tree</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
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="default.cfm">Home</a></li>
<li><a href="default.cfm?action=login">Login</a></li>
<li><a href="default.cfm?action=doLogout">Logout</a></li>
</ul>
</li>
</ul>
<ul>
<li>Permits
<ul>
<li><a href="">My Applications</a></li>
</ul>
</li>
</ul>
<ul>
<li>Forms
<ul>
<li><a href="/forms/plants/default.cfm?action=new">Plants</a></li>
<li><a href="">Animals</a></li>
<li><a href="">Ginseng & Goldenseal</a></li>
<li><a href="">Captive Breeding</a></li>
<li><a href="">Hunting Trophy</a></li>
<li><a href="">Hunting Trophy Assessment</a></li>
<li><a href="">Pet</a></li>
<li><a href="">Transit</a></li>
<li><a href="">Monkey Puzzle Tree</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>