Weird space under nav

HTML & CSS
1

Was hoping to get some help with a nav that I’m working on. There is a white space, 132px in height underneath my nav in versions of IE: 5 & 6.


</head>
<body>


        <div id="main-nav">
    	    <ul>
      		  	<li><a id="news" href="#" title="news"><span>News</span></a></li>
				<li><a id="forums" href="forums/" title="forums"><span>Forums</span></a></li>
				<li><a id="classifieds" href="http://www.racingjunk.com" target="_blank" title="classifieds"><span>Classifieds</span></a></li>
				<li><a id="raceschedule" href="index.php?page=calendar" title="raceschedule"><span>Race Schedule</span></a></li>
				<li><a id="rulebooks" href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a>
					<ul>
						<li><a href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a></li>
						<li><a href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a></li>
						<li><a href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a></li>
					</ul>
				</li>
				<li><a id="standings" href="index.php?page=standings" title="standings"><span>Standings</span></a></li>
				<li><a id="records" href="index.php?page=records" title="records"><span>Records</span></a></li>
				<li><a id="photogallery" href="http://prophotoproductions.exposuremanager.com/g/drag_racing" target="_blank" title="photogallery"><span>Photo Gallery</span></a></li>
				<li><a id="racerprofile" href="#" title="racerprofile"><span>Racer Profile</span></a></li>
    		</ul>
    	</div>


</body>
</html>



html {min-width:999px;}
body {
min-width:999px;    margin: 0px;
    padding: 0px;
    background: #000000 url(../images/repeatbg2.jpg) repeat-y 50&#37; -5px;
}

#main-nav {
    position: relative;
    margin-top: 0px;
    margin-left: 12px;
    width: 982px;
    height:58px;
    background-color: #fff;
}



#news
{
position: absolute;
left: 0px; top: 0px;
display: block;
  width: 94px;
  height: 58px;
  background: url("../../images/nav/news.jpg") no-repeat 0 0;
}
#news:hover
{ 
  background-position: 0 -58px;
}
#news span
{
  display: none;
}

#forums
{
position: absolute;
left: 94px; top: 0px;
  display: block;
  width: 79px;
  height: 58px;
  background: url("../../images/nav/forums.jpg") no-repeat 0 0;
}
#forums:hover
{ 
  background-position: 0 -58px;
}
#forums span
{
  display: none;
}

#classifieds
{
 position: absolute;
left: 173px; top: 0px;
  display: block;
  width: 106px;
  height: 58px;
  background: url("../../images/nav/classifieds.jpg") no-repeat 0 0;
}
#classifieds:hover
{ 
  background-position: 0 -58px;
}
#classifieds span
{
  display: none;
}

#raceschedule
{
position: absolute;
left: 279px; top: 0px;
  display: block;
  width: 127px;
  height: 58px;
  background: url("../../images/nav/raceschedule.jpg") no-repeat 0 0;
}
#raceschedule:hover
{ 
  background-position: 0 -58px;
}
#raceschedule span
{
  display: none;
}

#rulebooks
{
position: absolute;
left: 406px; top: 0px;  display: block;
  width: 105px;
  height: 58px;
  background: url("../../images/nav/rulebooks.jpg") no-repeat 0 0;
}
#rulebooks:hover
{ 
  background-position: 0 -58px;
}
#rulebooks span
{
  display: none;
}

#standings
{
position: absolute;
left: 511px; top: 0px;  display: block;
  width: 96px;
  height: 58px;
  background: url("../../images/nav/standings.jpg") no-repeat 0 0;
}
#standings:hover
{ 
  background-position: 0 -58px;
}
#standings span
{
  display: none;
}

#records
{
position: absolute;
left: 607px; top: 0px;  display: block;
  width: 86px;
  height: 58px;
  background: url("../../images/nav/records.jpg") no-repeat 0 0;
}
#records:hover
{ 
  background-position: 0 -58px;
}
#records span
{
  display: none;
}

#photogallery
{
position: absolute;
left: 693px; top: 0px;
display: block;
  width: 125px;
  height: 58px;
  background: url("../../images/nav/photogallery.jpg") no-repeat 0 0;
}
#photogallery:hover
{ 
  background-position: 0 -58px;
}
#photogallery span
{
  display: none;
}

#racerprofile
{
position: absolute;
left: 818px; top: 0px;
display: block;
  width: 164px;
  height: 58px;
  background: url("../../images/nav/racerprofile.jpg") no-repeat 0 0;
}
#racerprofile:hover
{ 
  background-position: 0 -58px;
}
#racerprofile span
{
  display: none;
}




 img, div { behavior: url(../iepngfix.htc) }
 


ul {
  list-style: none;
}

li ul {
	position: absolute;
	left: 400px;
	top: 50px;
	display: none;
	}
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	border-bottom: 0;
	}
li:hover ul { display: block; }

I have my thread of a mess open, but I am trying to work on specific issues 1 at a time, this is one of them.

2

Hi, can you post a link? That way we can get the images and the HTC, etc?

You shouldn’t set a height on #main-nav to get the background showing. You should try the clearfix

It’s probably because the <li>‘s are displaying vertically because it isn’t floated, and IE5/6 are increasing the #main-nav element to fit the children. Just float hte <li> (and unfloat the dropdowns’ <li>'s

li{float:left;}
li li {float:none;}

Use classes and a better selector though lol :slight_smile:

3

http://72.32.79.3/otest/

Well, I had all of my nav set to float: left; and no absolute positioning was set. This was working, except in IE it had a weird stagger. For some reason it seems to break all over when I switch back to floating now. Here’s the new css:


html {min-width:999px;}
body {
min-width:999px;    margin: 0px;
    padding: 0px;
    background: #000000 url(../images/repeatbg2.jpg) repeat-y 50&#37; -5px;
}

#main-nav {
    position: relative;
    margin-top: 0px;
    margin-left: 12px;
    width: 982px;
    height:58px;
    background-color: #fff;
}



#news
{
  float: left;
  display: block;
  width: 94px;
  height: 58px;
  background: url("../../images/nav/news.jpg") no-repeat 0 0;
}
#news:hover
{ 
  background-position: 0 -58px;
}
#news span
{
  display: none;
}

#forums
{
  float: left;
  display: block;
  width: 79px;
  height: 58px;
  background: url("../../images/nav/forums.jpg") no-repeat 0 0;
}
#forums:hover
{ 
  background-position: 0 -58px;
}
#forums span
{
  display: none;
}

#classifieds
{
  float: left;
  display: block;
  width: 106px;
  height: 58px;
  background: url("../../images/nav/classifieds.jpg") no-repeat 0 0;
}
#classifieds:hover
{ 
  background-position: 0 -58px;
}
#classifieds span
{
  display: none;
}

#raceschedule
{
  float: left;
  display: block;
  width: 127px;
  height: 58px;
  background: url("../../images/nav/raceschedule.jpg") no-repeat 0 0;
}
#raceschedule:hover
{ 
  background-position: 0 -58px;
}
#raceschedule span
{
  display: none;
}

#rulebooks
{
  float: left;
  display: block;
  width: 105px;
  height: 58px;
  background: url("../../images/nav/rulebooks.jpg") no-repeat 0 0;
}
#rulebooks:hover
{ 
  background-position: 0 -58px;
}
#rulebooks span
{
  display: none;
}

#standings
{
  float: left;
  display: block;
  width: 96px;
  height: 58px;
  background: url("../../images/nav/standings.jpg") no-repeat 0 0;
}
#standings:hover
{ 
  background-position: 0 -58px;
}
#standings span
{
  display: none;
}

#records
{
  float: left;
  display: block;
  width: 86px;
  height: 58px;
  background: url("../../images/nav/records.jpg") no-repeat 0 0;
}
#records:hover
{ 
  background-position: 0 -58px;
}
#records span
{
  display: none;
}

#photogallery
{
  float: left;
  display: block;
  width: 125px;
  height: 58px;
  background: url("../../images/nav/photogallery.jpg") no-repeat 0 0;
}
#photogallery:hover
{ 
  background-position: 0 -58px;
}
#photogallery span
{
  display: none;
}

#racerprofile
{
  float: left;
  display: block;
  width: 164px;
  height: 58px;
  background: url("../../images/nav/racerprofile.jpg") no-repeat 0 0;
}
#racerprofile:hover
{ 
  background-position: 0 -58px;
}
#racerprofile span
{
  display: none;
}




 


ul {
  list-style: none;
}

li ul {
	position: absolute;
	left: 400px;
	top: 50px;
	display: none;
	}
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	border-bottom: 0;
	}
li:hover ul { display: block; }

Which is what is current on the above link
btw: IE7 staggers like 5 & 6 now. :wink:

edit: I can’t tell why it is causing the last <li> item to push down below the rest now, the widths come out to 982.

4

This is called the staircase bug (notice how it looks like a staircase).

The problem is that you float the anchors and not the <li> and as a result this bug makes it look like a staircase.

You can float the <li> as well and that will patch up the issue :slight_smile:

5

That took care of the stagger, but the last one is still being pushed down, which I think that is causing the weird looking space on left and right of first row for IE, but this is a problem on all browsers atm. I think it has something to do with the extra <ul> inside for the drop down, kind of buggy atm.

6

The #main-nav needs to be 1022px in width. The <ul> nested in there has nothing to do with this, other elements don’t even recognize it is there since it is position:absolute (display:none as well) :slight_smile:

7

Excellent! Do you happen to know what might be causing my nested <ul> to not display on hover, in IE5&6 and if there would be a fix for that? Thanks a lot for the help so far!

8

IE5/6 don’t support hover on anything other then anchors.

Your best option would be to use the suckerfish Javascript :slight_smile:
Here you go

You will need to add to the CSS to include the class .sfhover to the regular :hover selectors :). THey explain it better in the link lol