www.webdeveloper.com
Results 1 to 3 of 3

Thread: Stacking order issue

Hybrid View

  1. #1
    Join Date
    Apr 2007
    Location
    Newcastle upon Tyne
    Posts
    61

    Stacking order issue

    I have a problem with Internet Explorer 6 + 7 and stacking order which I can't seem to remedy. Works fine in Safari, Firefox, IE8

    The issue is the navigation drop-downs in div#header that are overlapped by the background image on an image-replaced h2 (I'd prefer Cufon but am not paid enough to re-do the titles…). I'd also like to learn what I've done wrong here - if anyone can pitch in I'd be really grateful.

    Here's the URL: www.mslexia.co.uk

    The navigation ul#mainnav (float:left) is contained in div#header (position: relative). The list items (ul#mainnav li) are set to z-index 10.

    The issue is the overlap of the drop-down (ul#mainnav li ul) which seems to happily overlap the div#content below - but NOT for the RESOURCES drop-down which gets hidden by the h2.title background image (css below).

    Code:
    div#main_content h2.title  { 
    	position:relative;
    	width: 400px;
    	height: 50px;
    	padding: 0;
    	margin: 0;
    	z-index:2
    	}
    
    div#main_content h2.title span {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	background-repeat: no-repeat;
    	z-index:2
    	}
    I've tried adding a high z-index to header, as I know there's an issue with IE6 + 7 setting z-index 0 to relatively positioned things - no joy.
    Last edited by bydesign; 04-09-2010 at 05:45 AM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Just reduce the width of .title to about 250px, the actual image content.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Apr 2007
    Location
    Newcastle upon Tyne
    Posts
    61

    Fair enough!

    Guessing this might be the simplest, non-hacking solution…

    I made the images long to cater for longer titles. The maximum length h2 image just cuts in before the drop-down - I'll make it the maximum length.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles