467,911 Members | 1,521 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,911 developers. It's quick & easy.

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

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
Dec 3 '07 #1
  • viewed: 1688
Share:
5 Replies
drhowarddrfine
Expert 4TB
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.
Dec 3 '07 #2
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
Dec 3 '07 #3
drhowarddrfine
Expert 4TB
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>
Dec 3 '07 #4
OK, i'll look for another way to show a horizontal nav bar which works across multiple browsers

Cheers
Dec 3 '07 #5
Death Slaught
1GB
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
Dec 3 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Randall Sell | last post: by
7 posts views Thread by addled | last post: by
7 posts views Thread by Lachlan Hunt | last post: by
reply views Thread by Veli-Pekka Tštilš | last post: by
4 posts views Thread by =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.