...

View Full Version : display: inline; - problems with IE!!



austint01
07-08-2005, 02:49 PM
:confused: hi, I am having problems with nav list

It displays inline on firefox but not in IE..but I can not see why? any ideas??

thanks



/* NAV */

#nav {
width: 420px;
height: 70px;
float: right;
margin: 0;
padding: 0;
}

#nav li.on ul, #nav li.off ul {
margin: 0;
padding: 0;
}

#nav a {
text-decoration: none;
}

#nav li { /*float the main list items*/
margin: 0;
float: right;
display: inline;
padding-right: 0px;
background: url(../images/pipe.gif) no-repeat;
background-position: 0 10px;
}

.noback {
background: none;
}

#nav li ul {
display: none;
float: right;
}

#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 88px;
*top: 104px;
left: 503px;
padding-top: 10px;
height: 28px;
width: 420px;
}

#nav li a {
color: #155089;
font-size: 20px;
display: block;
height: 15px;
padding: 10px;

background-position: 0 10px;
}

#nav li.on a {
color: #000;
background-position: 0 10px;
}

#nav li.on ul a, #nav li.off ul a {
float: left; /*ie doesn't inherit the float*/
border: 0;
color: #C1D1E0;
width: auto;
margin-right: 0px;
font-size: 18px;
line-height: 0px;
background: none;
}

#nav li.on ul {
display: block;
background: none;
}

#nav li.off:hover ul {
display: block;
z-index: 6000;
background: #fff;
}

#nav li.off a:hover, #nav li:hover a {
color: #000;
background: #fff;
background: url(../images/pipe.gif) no-repeat;
background-position: 0 10px;
}

#nav ul li.off a:hover, #nav ul li:hover a {
color: #000;
background: none;
}

ul#nav li.off ul li, ul#nav li.on ul li {
background-image:none;
}

ul#nav li.off ul li a:hover, ul#nav li.on ul li a:hover {
background-image:none;
}

ul#nav li.on a.nopipe, ul#nav li.off a.nopipe {
background-image:none;
}

/* END OF NAV */



and the html




<div id="divnav">

<ul id="nav">

<li class="off"><a href="#">contact</a></li>

<li class="off"><a href="#">products</a>
<ul>
<li><a href="#">testemonials</a></li>
<li><a href="#">samples</a></li>
</ul>
</li>

<li class="off"><a href="#">about us</a>
<ul>
<li><a href="#">processes</a></li>
<li><a href="#">plant list</a></li>
<li><a href="#">benefits</a></li>
<li><a href="#">features</a></li>
</ul>
</li>

<li class="on" style = "background-image:none;"><a href="#" class = "nopipe">home</a></li>

</ul>

</div>


thank you

JamieR
07-08-2005, 04:46 PM
Just a long shot but are you sure you are clearing the div underneath the nav div as you are floating it...

austint01
07-08-2005, 05:37 PM
it was a missing width in a tag.. I have asome relative poistioning probs now:(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum