SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    weird space under nav

    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.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •