SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop menu and IE7

    Hi I've got a strange problem with my site in IE7, every other browser is fine.

    If you have a look here

    Hover the menu, there are a few drop menus (products, services and access tabs)

    In IE7 these appear to drop behind the 'News' box.

    Does anyone know of a way I can bring the nav to the top, I have a z-index of 10000 on the 2nd level ul element but it seems to have no effect

    Here's my css
    Code CSS:
    /*Nav Styles*/
    #nav ul {
    	position: relative;
    	list-style: none;
    	float: left;
    	margin: 0 5px 17px 0;
    }
     
    #nav ul li:first-child {
    	position: relative;
    	font-size: 1em;
    	line-height: 1.3em;
    	width: auto;
    	float: left;
    	padding: 0px 10px 10px 10px;
    	background: none;
    }
     
    #nav ul li {
    	position: relative;
    	font-size: 1em;
    	line-height: 1.3em;
    	width: auto;
    	float: left;
    	padding: 0px 10px 0px 12px;
    	margin-bottom: 10px;
    	background: url('Images/Page/nav_break.png') no-repeat left top; 
    }
     
    #nav ul li:hover {
    	position: relative;
    	font-size: 1em;
    	line-height: 1.3em;
    	width: auto;
    	float: left;
    	padding: 0px 10px 0 12px;
    	background: #efefef url('Images/Page/nav_break.png') no-repeat left top;
    	cursor: pointer;   
    }
     
    #nav ul li:hover:first-child {
    	position: relative;
    	font-size: 1em;
    	line-height: 1.3em;
    	width: auto;
    	float: left;
    	padding: 0px 10px 0 10px;
    	background: #efefef  
    }
     
    /*Second level*/
    #nav ul li:hover ul{
    	display: block;
    }
     
    #nav ul ul {
    	position: absolute;
    	line-height: 1.0em;
    	display: none;
    	top: 17px;
    	margin: 0 0 0 -11px;
    	padding: 0;
    	clear: both;
    	z-index: 10000;
    	border-top: 0
    }
     
    #nav ul ul li {
    	position: relative;
    	width: 200%;
    	background: #FFF;
    	padding: 0;
    	clear: both;
    	z-index: 10000;
    	border: 1px #898989 solid;
    	border-top: 0;
    	margin: 0;
    }
     
    #nav ul ul li:hover {
    	position: relative;
    	width: 200%;
    	background: #efefef;
    	z-index: 10000;
    	padding: 0;
    }
     
    #nav ul ul li:first-child{
    	position: relative;
    	width: 200%;
    	background: #FFF;
    	z-index: 10000;
    	padding: 0;
    }
     
    #nav ul ul li:hover:first-child {
    	position: relative;
    	width: 200%;
    	background: #efefef;
    	z-index: 10000;
    	padding: 0;
    }

    the nav its self is just an un-ordered list.

    Thanks in advance
    James

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It is the stacking order. #header and the content have position:relative; and the latter gets placed on top. Give #header z-index:1;
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahh, nice one there matey!!!

    Any ideas how i can get all the li's the same width like they appear in everything else?

    Thanks bud

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Noticed sometihng.

    On ".tr" you set z-index:3; and on some dropdowns it is hiding a small section of it becuase it has a higher z-index> Set #header to z-index:10.

    Sure-used a fixed width instead of width:200%; which IE is basing off the wrong parent.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea I don't really want to constrain the width as Ideally everything should appear on one line.
    Eventually I'll implement a cms system so I'll have no control over the content.

    But then I suppose that's an argument for a fixed width.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Somewhere in your code you set width:auto; (I don't remember where) and that is why IE7 is making the width shrink to fit (as you floated it).
    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
  •