SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox problem with fixed divs

    When I try to create a suckerfish menu in a header div with a fixed position, and that menu drops down on another div with a fixed position, it seems to lose focus as soon as the cursor enters the second div. Here the example code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Language" content="nl">
    	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    	<meta http-equiv="Pragma" content="no-cache">
    	<meta http-equiv="Expires" content="-1">
    	<meta http-equiv="Cache-Control" content="no-cache">
    	<style type="text/css">
    		#nav ul { padding: 0; margin: 0; list-style: none; }
    		
    		#nav li { float: left; position: relative; width: 10em; }
    		
    		#nav li ul { display: none; position: absolute; top: 1em; left: 0; }
    		
    		#nav li > ul { top: auto; left: auto; }
    		
    		#nav li:hover ul { display: block; }
    
    		body { margin: 0; padding: 0; }
    		#header { position:fixed; left: 0; top: 0; width: 100%; z-index: 1; background-color: red; height: 50px; }
    		#left { position:fixed; left: 0; top: 50px; background-color: green; }
    		#content { margin: 50px 0 0 340px; background-color: purple; }
    	</style>
    </head>
    <body>
    
    <div id="header">
    	<ul id="nav">
    		<li><a href="#">Lorem ipsum</a></li>
    		<li>
    			<a href="#">Vivamus iaculis</a>
    			<ul>
    				<li><a href="#">Donec pulvinar</a></li>
    				<li><a href="#">Proin convallis</a></li>
    				<li><a href="#">Nam facilisis</a></li>
    				<li><a href="#">In eleifend</a></li>
    				<li><a href="#">Etiam consectetuer</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Sed pretium</a></li>
    		<li><a href="#">Quisque fermentum</a></li>
    		<li><a href="#">Nullam sit</a></li>
    	</ul>
    </div>
    
    <div id="left">
    	<ul>
    		<li>Lorem ipsum dolor sit amet.</li>
    		<li>Suspendisse sed felis sed sapien auctor volutpat.</li>
    		<li>Morbi a risus nec risus ornare auctor.</li>
    	</ul>
    </div>
    
    <div id="content">
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ligula. Sed vestibulum adipiscing sapien. Proin augue est, porta at, ultrices quis, feugiat vitae, odio. Mauris pharetra lectus. Nam volutpat ligula quis diam venenatis sodales. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus libero vitae lacus. Morbi sit amet nibh vitae ipsum bibendum ultricies. Suspendisse magna risus, congue eu, tempor ac, dictum at, dolor. Curabitur tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In cursus magna vitae nibh. Nullam odio. Curabitur sed libero. Praesent lobortis semper risus. Integer convallis. Praesent neque sem, fringilla vitae, rhoncus vitae, venenatis ut, sem. Pellentesque facilisis commodo ligula. Vivamus a turpis.</p>
    	
    	<p>Fusce semper est in est. Duis ligula dolor, euismod tempor, iaculis nec, venenatis quis, nisl. Sed ipsum lacus, dictum in, porta sit amet, hendrerit eu, lorem. Sed vel libero ut turpis consectetuer fermentum. Nam venenatis risus at nibh. Vestibulum pharetra enim ac lacus. Etiam ut erat ac elit auctor condimentum. Duis justo nunc, feugiat eget, hendrerit vitae, sollicitudin vitae, purus. Aenean urna est, auctor in, gravida ac, blandit non, pede. Sed felis sem, tempus non, nonummy in, condimentum at, dolor. Donec rhoncus erat et orci. Pellentesque scelerisque dolor. Aliquam tristique gravida nisl. Fusce sit amet neque id erat accumsan semper. Integer a libero et mi lacinia dictum. Nunc eu nisl. Suspendisse ut ante.</p>
    	
    	<p>Donec sit amet ipsum. Etiam interdum, odio ut tempor consequat, est turpis lobortis turpis, quis ultrices ante turpis vel ante. Morbi nec sapien. Suspendisse ut enim id odio tempor laoreet. Fusce rhoncus blandit risus. Vivamus eleifend, odio id porta commodo, quam turpis semper nibh, at pretium diam arcu sed mi. Nunc eget enim. Phasellus est justo, imperdiet eget, semper at, euismod at, enim. Proin pretium vehicula tellus. Integer augue. Vestibulum adipiscing. Donec varius diam sed justo. Morbi et ipsum. Praesent luctus sem in mauris.</p>
    	
    	<p>Phasellus malesuada. Curabitur facilisis. Vivamus sagittis massa at urna. Curabitur cursus. Pellentesque placerat, lectus at facilisis ornare, ligula nisi sagittis orci, ut elementum est lorem nec nunc. Vestibulum mi dui, tempus vel, ultricies in, venenatis a, nisi. Praesent a ligula. Quisque in turpis sit amet lacus vulputate laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus augue purus, imperdiet sodales, consectetuer at, laoreet eget, erat.</p>
    	
    	<p>Nam ullamcorper. In libero. Morbi porta ornare lectus. Donec vestibulum dolor non est. Donec luctus nisl vulputate mauris. Praesent quis neque. Nullam fermentum aliquet felis. Ut suscipit massa eu ante. Suspendisse gravida, ipsum nec tincidunt viverra, enim libero consectetuer enim, nec dapibus augue dolor non augue. Nunc sapien. Curabitur bibendum. Vestibulum vitae leo. Maecenas eros. Morbi pellentesque, sapien eget ullamcorper facilisis, libero nunc gravida dui, eu consequat leo enim quis lacus. Quisque tortor diam, aliquam et, sollicitudin ac, bibendum vel, metus. Suspendisse a mauris vitae tortor gravida aliquam. Morbi lobortis varius massa. Ut massa. Ut velit quam, luctus at, iaculis vel, luctus vel, justo.</p>
    	
    	<p>Morbi et neque. Vivamus lectus velit, placerat ac, malesuada ac, egestas nec, nisi. Ut sit amet lorem. Suspendisse eu ligula. Donec consectetuer, risus quis pellentesque viverra, ipsum purus pellentesque nulla, vel ullamcorper elit odio eget neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur neque. Suspendisse in ante. Nullam porta faucibus mi. Etiam molestie fringilla risus. Sed dignissim. Donec congue blandit nisl. In posuere, odio placerat pulvinar pharetra, augue dui molestie dui, dictum pretium odio neque at nibh. Vivamus lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse congue facilisis nisi. Morbi venenatis consequat neque. Maecenas eu dui nec pede volutpat vulputate. Ut elit nisl, lobortis vel, elementum aliquam, cursus sit amet, metus. Praesent neque.</p>
    	
    	<p>Maecenas in nulla. Morbi at diam. Fusce vehicula, orci at cursus blandit, pede dui bibendum nulla, non tincidunt arcu mauris eu lorem. Nunc ac nibh et quam scelerisque pulvinar. Nam imperdiet placerat purus. Vestibulum fermentum egestas lectus. Curabitur ac urna sit amet felis consequat placerat. Donec pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ullamcorper sem in dolor. Proin purus massa, mollis in, scelerisque sit amet, lacinia eget, nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ligula nisl, pharetra a, cursus non, posuere vitae, lacus. Aliquam porta mi quis nisi. Nulla semper, nunc in dapibus rutrum, felis neque pellentesque augue, eget consequat quam nibh vitae metus. Vivamus diam. Praesent tristique tortor.</p>
    </div>
    </body>
    </html>
    The funny thing is that Firefox actually does know how to handle this. Try to increase and then decrease the text size again (ctrl++ & ctrl--). Et voila, now it works fine.

    Does anyone have an idea what's going on here?
    Last edited by CadmiumNL; Jun 27, 2006 at 06:36.
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  2. #2
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try putting a z-index on the menu div
    z-index: 100
    or something

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the first thing I tried. It's in the example code as well, the header div has a z-index of 1 (which is more than enough ). Without this, as expected, the menu doesn't drop down over the left div. With it, it does, until the cursor enters the left div that is.
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Noone else? I guess I'll assume it's a Mozilla bug then .

    Until someone proves me wrong, of course .
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess noone really bothered to try the code out .

    It turned out that it was indeed a Mozilla bug. An already solved bug that is. I just found out that the version they installed on my new PC was 1.0.7 or something (which didn't show any updates in the toolbar). I should have checked that right away . I installed 1.5 and it works like a charm now.
    Hippopotomonstrosesquippedaliophobia - Fear of long words


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
  •