weird space under nav

**aebstract** · Feb 24, 2010 09:41

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.

Code:

</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>

Code:

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.

**RyanReese** · Feb 24, 2010 09:54

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

Code:

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

Use classes and a better selector though lol

**aebstract** · Feb 24, 2010 10:00

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:

Code:

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.

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.

**RyanReese** · Feb 24, 2010 10:11

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

**aebstract** · Feb 24, 2010 10:14

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.

**RyanReese** · Feb 24, 2010 10:18

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)

**aebstract** · Feb 24, 2010 10:22

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!

**RyanReese** · Feb 24, 2010 10:41

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

Your best option would be to use the suckerfish Javascript

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

User Tag List

Thread: weird space under nav

Thread Tools

Display

weird space under nav

Bookmarks

Bookmarks

Posting Permissions