SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute DIV (within a relative DIV) not showing in IE

    Hi all,

    I'm structuring my document with SEO in mind. This is for a typical two column layout: left side column for navigation, right side has utilities along the top followed by the content, then lastly the footer spanning both. I've set the HTML up so the content is scanned first, followed by the nav, then utility links, and then footer.

    Essentially, the content div has a top margin that equals the height of the utility links. The utility links are positioned absolutely, but are within a wrapper div that is positioned relatively.

    For some reason, the utilities will not show correctly in place in IE6/7, but does in Firefox. Any ideas why? Any help is much appreciated.

    Here's the basic framework...

    HTML
    Code:
    <div id="wrapper">
    	<div id="content-wrap">
    		<div id="content">Content</div>
    	</div>
    
    	<div id="nav">Navigation</div>
    
    	<ul id="utilities">
    		<li><a href="#" class="first">Glossary</a></li>
    		<li><a href="#">Privacy Policy</a></li>
    		<li><a href="#">Terms &amp; Conditions</a></li>
    		<li><a href="#">Update Profile</a></li>
    		<li><a href="#">Sign Up</a></li>				
    	</ul>
    
    	<div id="footer">Footer</div>	
    
    </div>
    CSS
    Code:
    * { margin:0; padding:0; }
    
    body { font:76%/1.5 arial,verdana,sans-serif; text-align:center; }
    
    #wrapper { width:772px; margin:0 auto; position:relative; text-align:left; }
    #content-wrap { float:right; width:567px; margin-top:2em; }
    
    #nav { width:205px; float:left; } 
    
    #utilities { width:567px; position:absolute; top:0; left:205px; text-align:right; line-height:2em; }
    #utilities li { display:inline; }
    #utilities a { font-size:.9em; padding:0 1em; border-left:1px solid #fff; }
    #utilities a.first { border:0; }
    
    #footer { width:567px; clear:both; }
    FYI - I got this idea to use absolute positioning to get the utilities lower in the html but higher in the display from the wonderful stopdesign.com. (Which it works correctly.)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    This is an old bug in IE and it doesn't like it when absolutely placed items are mixed in the html with static items and floats within the same context. It likes the absolute elements to be at the end of the html in the current stacking context.

    If you move #utilities to here it will work:

    Code:
    <div id="wrapper">
        <div id="content-wrap">
            <div id="content">Content</div>
        </div>
        <div id="nav">Navigation</div>
        <div id="footer">Footer</div>
        <ul id="utilities">
            <li><a href="#" class="first">Glossary</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms &amp; Conditions</a></li>
            <li><a href="#">Update Profile</a></li>
            <li><a href="#">Sign Up</a></li>
        </ul>
    </div>
    Its an odd bug that I documented years ago as there are only certain sequences of events that trigger it but it is usually caused as I described above.

    I got this idea to use absolute positioning to get the utilities lower in the html but higher in the display from the wonderful
    Nothing wonderful just basic CSS

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't have to. Just float content-wrap to the left, give it a width of 100&#37; and a negative margin for the side you want the menu to appear on that's equal to the menu's total width, then set the side margin on the content itself to be equal to the width of the menu, and float the menu to the left, and set its side margin to either the width of the menu, or 100% (in either case, use a negative margin for the menu).

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I never heard of that bug before, but then again I really never toyed with simultaneously using absolute and relative elements. Even though the impact is minimal, I'd prefer not to move #utilities (maybe I'm just being hardheaded about separating structure and presentation). Do you have a link/resource that describes this bug further?

    Dan,

    I think I understand what you're getting too, but you lost me with one too many float:lefts and width:100% :^). Also, I'm not sure how negative margins would help in this case either. Would your solution be more applicable if the design was 100% of the viewport? (It's actually fixed width.) Or maybe I totally misread...

    Anyway, thanks for the tips fellas!

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this, actually.

    Code XHTML 1.0 Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Untitled Web Page</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<style type="text/css">
     
    		* {
    			margin: 0;
    			padding: 0;
    		}
     
    		/* you can safely remove this style rule if you want the layout to be a liquid width */
    		#container {
    			margin: 0 auto;
    			width: 760px;
    		}
     
    		#main {
    			background: #FCA;
    			float: left;
    			width: 100%;
    		}
    			#main .wrapper {
    				background: #CFC;
    				margin-left: 200px;
    				/* use margin-right instead if you want the sidebar to be on the right */
    			}
     
    			#main p {
    				padding: 0.5em;
    			}
     
    		#sidebar {
    			float: left;
    			margin-left: -100%;
    			/* use margin-left: -200px; instead if you want the sidebar on the right */
    			width: 200px;
    		}
    			#sidebar p {
    				padding: 0.5em;
    			}
     
    		#footer {
    			background: #FCF;
    			clear: left;
    			text-align: center;
    		}
     
    	</style>
    </head>
    <body>
    <div id="container">
    	<div id="main">
    		<div class="wrapper">
    			<p>
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
    				sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
    				Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
    				ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
    				ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
    				elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et
    				hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc
    				nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam
    				lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan
    				libero, id consequat quam lorem vitae orci.
    			</p>
    			<p>
    				Cras eu justo. Duis ornare ultrices urna. Integer eros. Nulla sagittis viverra purus.
    				Sed massa quam, eleifend hendrerit, laoreet vel, auctor sit amet, nunc. Donec
    				scelerisque. Cras sodales. Nulla facilisi. Ut molestie. Quisque rhoncus, nulla non
    				auctor tincidunt, lectus sapien laoreet metus, non laoreet elit purus sollicitudin
    				nulla. Praesent eget lacus sit amet sem elementum molestie. Etiam mattis eros quis
    				libero.
    			</p>
    		</div>
    	</div>
    	<div id="sidebar">
    		<p>
    			Some sidebar content goes here.  Keep it simple, yet appropriate.  Don&acute;t go
    			on an ego trip.
    		</p>
    	</div>
    	<div id="footer">
    		Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights to Scare Unsuspecting
    		Children Reserved.
    	</div>
    </div>
    </body>
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Do you have a link/resource that describes this bug further?
    I document this bug in the forums about twice a week for the last five years so its a common occurrence.

    I do have another fix for you that just involves CSS but as usual depends on what you do next. if you add clear:both to the absolute element (nonsense that it is but IE needs it) and then float the footer.

    Code:
    #utilities { clear:both;width:567px; position:absolute; top:0; left:205px; text-align:right; line-height:2em; }
    #footer { width:567px; clear:both;float:left }
    That will fix your snippet of code but it does depend on how much more complicated your actual layout is.


    Quote Originally Posted by dan
    You shouldn't have to. Just float content-wrap to the left, give it a width of 100&#37; and a negative margin for the side you want the menu to appear on
    I think you misread the code as the utilities goes on top of the other elements not along side Negative margins won't help here.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by me
    Negative margins won't help here.
    Actually it can be done so I owe you an apology although I don't know how stable this will be and certainly won't work in mozilla 1.6 and older browsers.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    * { margin:0; padding:0; }
    
    body { font:76&#37;/1.5 arial,verdana,sans-serif; text-align:center; }
    
    #wrapper { width:772px; margin:0 auto; position:relative; text-align:left; }
    #content-wrap { float:right; width:567px; margin-top:2em;margin-left:-567px }
    
    #nav { width:205px; float:left; } 
    
    #utilities {width:567px; float:right }
    #footer { width:567px; clear:both;float:left }
    #utilities li { display:inline; }
    #utilities a { font-size:.9em; padding:0 1em; border-left:1px solid #fff; }
    #utilities a.first { border:0; }
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="content-wrap">
            <div id="content">Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : Content goes here : </div>
        </div>
        <div id="nav">Navigation : Navigation : Navigation : Navigation : Navigation : Navigation : Navigation :  </div>
        <ul id="utilities">
            <li><a href="#" class="first">Glossary</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms &amp; Conditions</a></li>
            <li><a href="#">Update Profile</a></li>
            <li><a href="#">Sign Up</a></li>
        </ul>
        <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    You will have to make sure that whatever follows the utilities div is set to clear:both or that will appear at the top also.


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
  •