CSS Horizontal inline navigation not working correctly in IE but is in Firefox

Awok

Hi,

i've been stuck trying to get the following code to display correctly in IE in which i've come across many diffrent theories but none which have worked possibly the box model problem.

************************************************** **************************
BEGIN
************************************************** **************************
[html]
<HTML>
<HEAD>
<style type="text/css">

/*Nav bar styles*/

ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}

ul.nav{
display: table;
}

ul.block{
width: 100%;
table-layout: fixed;
}

ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/

ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}

ul.nav li:hover>ul{
display : block;
}

.nav ul li a{
display: block;
padding: 2px 10px;
}

/*Menu styles*/

ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}

ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}

ul.nav,
.nav ul{
border: 1px solid #369;
}

.nav a{
text-decoration: none;
}

</STYLE>

</HEAD>

<BODY>

<ul class="nav">

<li><strong>Browsers</strong>
<ul>
<li><a href="http://mozilla.org/">Mozilla</a></li>
<li><a href="http://mozilla.org/products/firefox/">Firefox</a></li>
<li><a href="http://mozilla.org/products/camino/">Camino</a></li>
<li><a href="http://kmeleon.sourceforge.net/">K-meleon</a></li>
<li><a href="http://galeon.sourceforge.net/">Galeon</a></li>
<li><a href="http://netscape.com/">Netscape</a></li>
<li><a href="http://microsoft.com/">Internet Explorer</a></li>

<li><a href="http://opera.com/">Opera</a></li>
<li><a href="http://apple.com/safari/">Safari</a></li>
<li><a href="http://konqueror.org/">Konqueror</a></li>
</ul></li>
<li><strong>Web Design</strong>
<ul>
<li><a href="http://w3.org/">W3C</a></li>
<li><a href="http://alistapart.com/">A List Apart</a></li>
<li><a href="http://meyerweb.com/eric/css/edge/">css/edge</a></li>
<li><a href="http://mako4css.com/">MaKo 4 CSS</a></li>

<li><a href="http://glish.com/css/">CSS Layout Techniques</a></li>
<li><a href="http://realworldstyle.com/">Real World Style</a></li>
<li><a href="http://css-discuss.org/">css-discuss</a></li>
<li><a href="http://css.nu/">CSS Pointers Group</a></li>
</ul>
</li>
<li><strong>Search Engines</strong>
<ul>
<li><a href="http://google.com/">Google</a></li>
<li><a href="http://dmoz.org/">Open Directory</a></li>

<li><a href="http://yahoo.com/">Yahoo!</a></li>
<li><a href="http://alltheweb.com/">All The Web</a></li>
<li><a href="http://teoma.com/">Teoma</a></li>
<li><a href="http://wisenut.com/">Wisenut</a></li>
</ul>
</UL>

</BODY>

</HTML>
[/html]
************************************************** *********************************
END
************************************************** *********************************

Any ideas?

Regards

drhowarddrfine

First quick observation. You will never get IE to attempt to act like other modern browsers without a proper doctype. See the article about doctypes under Howtos above.

Awok

Ok,

thanks for the quick response and i've read through here
http://www.thescripts.com/forum/thread641513.html
and attached the following

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Regards

drhowarddrfine

I'm just doing "fly-by" looks at this.
Only modern browsers allow "hover" on all elements. That leaves IE out which only understand hover on <a>

Awok

OK, i'll look for another way to show a horizontal nav bar which works across multiple browsers

Cheers

Death Slaught

Here's one.

[HTML]<html>

<head>
<style type="text/css">

#navagation {
position:absolute;
}

ul {
width:100%;
float:left;
margin:0;
padding:0;
}

a {
float:left;
padding:0.2em 0.6em;
text-decoration:none;
color:#000;
background-color:#fff;
border:1px solid #000;
}

a:hover {
color:#fff;
background-color:#000;
border:1px solid #fff;
}

li {
display:inline;
}

</style>
</head>

<body>
<div id="navagation">

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>

</div>
</body>

</html>[/HTML]

Hope it helps, Thanks, Death

CSS Horizontal inline navigation not working correctly in IE but is in Firefox

re: CSS Horizontal inline navigation not working correctly in IE but is in Firefox

re: CSS Horizontal inline navigation not working correctly in IE but is in Firefox

re: CSS Horizontal inline navigation not working correctly in IE but is in Firefox

re: CSS Horizontal inline navigation not working correctly in IE but is in Firefox

re: CSS Horizontal inline navigation not working correctly in IE but is in Firefox

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about