SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    NYC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question floating 2 divs on top of each other IE problem

    Hi, I have 2 div's (a navigation div and a div with some links) next to a main content div, inside a wrapper div. The problem is in IE the links div pushes my background image to the left. It works fine in Firefox. Tried several combinations of float: clear and was able to get it where i wanted with negative margins but half of the div was covered. Please help this is driving me nuts. here's the link:

    http://www.ericberg.net/about2.htm

    and here's the inline css:
    #links {
    padding: 10px 44px 0 0;
    float: right;
    clear: right;
    }
    #links ul {
    font-size: 10px;
    margin: 0px;
    padding: 2px 14px 3px 14px;
    display: block;
    text-align: center;
    list-style-type: none;
    border: 1px dashed #00CC66;
    }


    Thanks in advance, i just joined sitepoint recently and WOW am i amazed at the knowledge here!

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

    The problem here is that the links are floated and mozilla allows them to float out of their container and into the footer container without much problem. However IE pushes the footer away causing the problems you see.

    Even though it does work in mozilla you may run into problems if you want to increase the length of the links as they will float out of the bottom container also. If you then try to clear then you will get similar results to ie with everything being pushed around.

    Assuming your links are to stay the same size then the simplest option is to place them absolutely and they will have no effect on the existing layout and should keep it all intact.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="JavaScript" type="text/javascript" src="<A href="http://www.ericberg.net/js.js"></script">http://www.ericberg.net/js.js"></script>
    <link href="s.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="ROBOTS" content="ALL" />
    <meta name="keywords" content="web design, css, xhtml, web standards, usability, accessibility, cross-browser, foward-compatible" />
    <title>eric berg: web design that doesn't discriminate</title>
    <style type="text/css">
    /* CSS Document */
    body {
     background: #9cf;
     font: small/1.4 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
     text-align: center;
     color: #393;
     letter-spacing: 1px;
     margin: 0;
     padding: 0;
     border: 0;
     }
    #box  {
    width: 640px;
    margin: 0 auto;
    padding: 10px 0 0 0;
    text-align: left;
    position:relative;
    }
    html>#box {
    width: 640px;
    }
    #head  {
    background: url(http://www.ericberg.net/i/hed.gif) no-repeat center top;
    margin: 0;
    padding: 6px 0 0 0;
    }
    #head h1  {
     background: url(http://www.ericberg.net/i/lg3.gif) no-repeat 25px 0;
     margin: 10px 0 0 0;
     padding: 0 ;
     height: 53px;
     text-align:left;
     cursor: hand;
    }
    .hide  {
    display: none;
    }
    /*#head h1:hover  {
    background: url(http://www.ericberg.net/i/lg3o.gif) no-repeat left top;
    }*/
    #nav  {
     
     float: right;
     display: block;
     margin: 0;
     padding: 23px 40px 0 0;
     width: auto;
     text-align: center;
    }
    html>#nav  {
    }
    #nav ul  {
     text-align: center;
     background: transparent url(http://www.ericberg.net/i/nv1.gif);
     margin: 0;
     display: block;
     padding: 19px 0 0 2px;
     list-style-type: none;
     line-height: 2em;
     letter-spacing: 2px;
     border: 0;
     height: 131px;
     width: 119px;
     voice-family: "\"}\"";
     voice-family: inherit;
     width: 117px;
    }
    #nav ul li {
    margin: 0;
    padding: 0;
    display: block;
    }
    #nav ul li a {
     margin: 0;
     padding: 0;
     text-decoration: none;
     text-align: center;
     color: #900;
     height: 26px;
     display: block;
     border: 0;
    }
    #nav ul li a:hover {
     background: url(http://www.ericberg.net/i/hv2.gif) no-repeat 50% 0;
    }
    #nav .active  {
     background: url(http://www.ericberg.net/i/hv2.gif) no-repeat 50% 0;
    }
    #main  {
    background: url(http://www.ericberg.net/i/mid.gif) center top repeat-y;
    margin: 0;
    padding: 25px 0 0 30px;
    min-height: 260px;
    }
    #main ul {
     margin: 0; 
    padding: 0 0 0 10px; 
    list-style-type: none;
    font-size: .9em;
    }
    #main ul li {
    margin: 0;
    padding: 2px 0 0 0;
    }
    #main ul li .active  {
    border-bottom: 1px dashed #990000}
    #content {
     text-align: left;
     width: 420px;
     padding: 0;
     margin: 0 0 0 0;
     border: 1px dashed #00CC66;
     background-color: #F7F7F7;
    }
    #content p  {
    text-indent: 20px;
    margin: 0;
    padding: 10px;
    }
    #foot  {
     background: transparent url(http://www.ericberg.net/i/botsi.gif) no-repeat center top;
     margin: 0px 0 0 0;
     padding: 0;
     height: 225px;
     vertical-align: bottom;
     display: block;
    }
    #foot p  {
     text-align: left;
     margin: 0;
     padding: 196px 0 0 25px;
     color: #FFF;
     font-size: 10px;
    }
    a {
     color: #990000;
     text-decoration: none;
    }
    a:hover  {
     border-bottom: 1px dashed #990033;
    }
    h4 {
     margin: 0px;
     padding: 15px 0px 5px 10px;
    }
    #links  {
     padding: 10px 0;
     position:absolute;
     top:250px;
     right:45px;
     width:110px;
    } 
     #links ul {
     font-size: 10px;
     margin: 0px;
     padding: 2px 14px 3px 14px;
     display: block;
     text-align: center;
     list-style-type: none;
     border: 1px dashed #00CC66;
    }
    </style>
    </head>
    <body onload="MM_preloadImages('i/lg3o.gif')">
    <div id="box"> 
      <div id="head">
    	<h1><span class="hide">eric berg: web design that doesn't discriminate</span></h1>
      </div>
      <div id="nav"> 
    	<ul>
    	  <li><a href="default.htm">home</a></li>
    	  <li><a href="about.htm" class="active">about</a></li>
    	  <li><a href="work.htm">work</a></li>
    	  <li><a href="contact.htm">contact</a></li>
    	</ul>
      </div>
      <div id="links"> 
    	<ul>
    	  <li>Friendly&nbsp;Sites:</li>
    	  <li><a href="<A href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=84"><img">http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=84"><img src="http://www.spreadfirefox.com/communi...x15/blue_2.gif" alt="Get Firefox!" width="80" height="15" border="0" title="Get Firefox!"/></a></li>
    	  <li><a href="http://browsehappy.com/" title="Browse Happy: Switch to a safer browser today"><img border="0" img src="http://www.ericberg.net/i/bh_80x15.gif" alt="Browse Happy logo" width="80" height="15" /></a></li>
    	  <li><a href="<A href="http://www.alistapart.com/"><img">http://www.alistapart.com/"><img src="http://www.ericberg.net/i/ala.gif" border="0" /></a></li>
    	  <li><a href="<A href="http://www.zeldman.com/"><img">http://www.zeldman.com/"><img src="http://www.ericberg.net/i/zeld.gif" border="0" /></a></li>
    	  <li><a href="<A href="http://www.godaddy.com/"><img">http://www.godaddy.com/"><img src="http://www.ericberg.net/i/gdad.gif" border="0" /></a></li>
    	  <li>Validate&nbsp;Me:</li>
    	  <li><a href="<A href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ericberg.net%2F"><img">http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ericberg.net%2F"><img src="http://www.ericberg.net/i/xhtmlv.gif" width="80" height="15" border="0" /></a></li>
    	  <li><a href="<A href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.ericberg.net/s.css"><img">http://jigsaw.w3.org/css-validator/validator?uri=http://www.ericberg.net/s.css"><img src="http://www.ericberg.net/i/cssv.gif" width="80" height="15" border="0" /></a></li>
    	  <li><a href="<A href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.ericberg.net&output=Submit&gl=wcag1-aaa&test="><img">http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.ericberg.net&output=Submit&gl=wcag1-aaa&test="><img src="http://www.ericberg.net/i/bob.gif" border="0" /></a></li>
    	</ul>
      </div>
      <div id="main"> 
    	<div id="content"> 
    	  <p align="left"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
    		sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
    		erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
    		ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    	  <p align="left">Duis autem vel eum iriure dolor in hendrerit in vulputate 
    		velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
    		at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
    		luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    	</div>
      </div>
      <div id="foot"> 
    	<p>&copy;2004 Eric Berg</p>
      </div>
    </div>
    </body>
    </html>
    If you want the side with the links to expand and push the footer down then you will need to re-design a bit. You will probably have to wrap the text box and the side columns in one element and then use a clearing div to expand the parent container downwards. However this will pus the footer further away than it is now.

    What you have now is a footer that comes below the text box but you are floating the side links so that it traverses the top container and into the bottom container.

    See here for an explanation of whats happening.

    http://www.complexspiral.com/publica...aining-floats/

    Hope that helps anyway.

    Paul

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *ahem*
    Quote Originally Posted by Paul O'B
    Code:
    <script language="JavaScript" type="text/javascript" src="<A href="http://www.ericberg.net/js.js"></script">http://www.ericberg.net/js.js"></script>
    More coffee.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Bill
    More coffee
    Thanks Bill - I think I must have had too much coffee I'm seeing double now I've no idea how that crept in there - someone must have come up to my keyboard and typed it in when I wasn't looking.

    Sorry Astroboy - just use your original code for the script tags.
    Code:
    <script type="text/javascript" src="js.js"></script>
    I've only left the absolute address references in there because I do a search and replace so that I can test locally but you should of course replace them with your relative addresses etc.

    Thank Bill for spotting my error

    Paul

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    NYC
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    absolute positioning?

    Thanks for your reply, Paul, but now my links are sitting way out to the right of my layout, they sit where I want them if the browser window is exactly the size of my layout, but that isn't going to be the case always of course. I'm a little unclear on the difference between relative and absolute positioning; i thought absolute was supposed to position them in relation to their container element? thanks

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I'm not sure what you mean. Apart from the mangled code that I posted (must have gor corrupted somehow) the posisiong of the links is in exactly the same pplace as your example.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="JavaScript" type="text/javascript" src="<A href="<A href="http://www.ericberg.net/js.js"></script">http://www.ericberg.net/js.js"></script">http://www.ericberg.net/js.js"></script">http://www.ericberg.net/js.js"></script>
    <link href="s.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="ROBOTS" content="ALL" />
    <meta name="keywords" content="web design, css, xhtml, web standards, usability, accessibility, cross-browser, foward-compatible" />
    <title>eric berg: web design that doesn't discriminate</title>
    <style type="text/css">
    /* CSS Document */
    body {
     background: #9cf;
     font: small/1.4 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
     text-align: center;
     color: #393;
     letter-spacing: 1px;
     margin: 0;
     padding: 0;
     border: 0;
     }
    #box  {
    width: 640px;
    margin: 0 auto;
    padding: 10px 0 0 0;
    text-align: left;
    position:relative;
    }
    html>#box {
    width: 640px;
    }
    #head  {
    background: url(http://www.ericberg.net/i/hed.gif) no-repeat center top;
    margin: 0;
    padding: 6px 0 0 0;
    }
    #head h1  {
     background: url(http://www.ericberg.net/i/lg3.gif) no-repeat 25px 0;
     margin: 10px 0 0 0;
     padding: 0 ;
     height: 53px;
     text-align:left;
     cursor: hand;
    }
    .hide  {
    display: none;
    }
    /*#head h1:hover  {
    background: url(http://www.ericberg.net/i/lg3o.gif) no-repeat left top;
    }*/
    #nav  {
     
     float: right;
     display: block;
     margin: 0;
     padding: 23px 40px 0 0;
     width: auto;
     text-align: center;
    }
    html>#nav  {
    }
    #nav ul  {
     text-align: center;
     background: transparent url(http://www.ericberg.net/i/nv1.gif);
     margin: 0;
     display: block;
     padding: 19px 0 0 2px;
     list-style-type: none;
     line-height: 2em;
     letter-spacing: 2px;
     border: 0;
     height: 131px;
     width: 119px;
     voice-family: "\"}\"";
     voice-family: inherit;
     width: 117px;
    }
    #nav ul li {
    margin: 0;
    padding: 0;
    display: block;
    }
    #nav ul li a {
     margin: 0;
     padding: 0;
     text-decoration: none;
     text-align: center;
     color: #900;
     height: 26px;
     display: block;
     border: 0;
    }
    #nav ul li a:hover {
     background: url(http://www.ericberg.net/i/hv2.gif) no-repeat 50% 0;
    }
    #nav .active  {
     background: url(http://www.ericberg.net/i/hv2.gif) no-repeat 50% 0;
    }
    #main  {
    background: url(http://www.ericberg.net/i/mid.gif) center top repeat-y;
    margin: 0;
    padding: 25px 0 0 30px;
    min-height: 260px;
    }
    #main ul {
     margin: 0; 
    padding: 0 0 0 10px; 
    list-style-type: none;
    font-size: .9em;
    }
    #main ul li {
    margin: 0;
    padding: 2px 0 0 0;
    }
    #main ul li .active  {
    border-bottom: 1px dashed #990000}
    #content {
     text-align: left;
     width: 420px;
     padding: 0;
     margin: 0 0 0 0;
     border: 1px dashed #00CC66;
     background-color: #F7F7F7;
    }
    #content p  {
    text-indent: 20px;
    margin: 0;
    padding: 10px;
    }
    #foot  {
     background: transparent url(http://www.ericberg.net/i/botsi.gif) no-repeat center top;
     margin: 0px 0 0 0;
     padding: 0;
     height: 225px;
     vertical-align: bottom;
     display: block;
    }
    #foot p  {
     text-align: left;
     margin: 0;
     padding: 196px 0 0 25px;
     color: #FFF;
     font-size: 10px;
    }
    a {
     color: #990000;
     text-decoration: none;
    }
    a:hover  {
     border-bottom: 1px dashed #990033;
    }
    h4 {
     margin: 0px;
     padding: 15px 0px 5px 10px;
    }
    #links  {
     padding: 10px 0;
     position:absolute;
     top:250px;
     right:45px;
     width:110px;
    } 
     #links ul {
     font-size: 10px;
     margin: 0px;
     padding: 2px 14px 3px 14px;
     display: block;
     text-align: center;
     list-style-type: none;
     border: 1px dashed #00CC66;
    }
    </style>
    </head>
    <body onload="MM_preloadImages('i/lg3o.gif')">
    <div id="box"> 
      <div id="head">
     <h1><span class="hide">eric berg: web design that doesn't discriminate</span></h1>
      </div>
      <div id="nav"> 
     <ul>
       <li><a href="default.htm">home</a></li>
       <li><a href="about.htm" class="active">about</a></li>
       <li><a href="work.htm">work</a></li>
       <li><a href="contact.htm">contact</a></li>
     </ul>
      </div>
      <div id="links"> 
     <ul>
       <li>Friendly&nbsp;Sites:</li>
       <li><a href="<A href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=84"><img">http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=84"><img src="http://www.spreadfirefox.com/commun...0x15/blue_2.gif" alt="Get Firefox!" width="80" height="15" border="0" title="Get Firefox!"/></a></li>
       <li><a href="http://browsehappy.com/" title="Browse Happy: Switch to a safer browser today"><img border="0" img src="http://www.ericberg.net/i/bh_80x15.gif" alt="Browse Happy logo" width="80" height="15" /></a></li>
       <li><a href="<A href="http://www.alistapart.com/"><img">http://www.alistapart.com/"><img src="http://www.ericberg.net/i/ala.gif" border="0" /></a></li>
       <li><a href="<A href="http://www.zeldman.com/"><img">http://www.zeldman.com/"><img src="http://www.ericberg.net/i/zeld.gif" border="0" /></a></li>
       <li><a href="<A href="http://www.godaddy.com/"><img">http://www.godaddy.com/"><img src="http://www.ericberg.net/i/gdad.gif" border="0" /></a></li>
       <li>Validate&nbsp;Me:</li>
       <li><a href="<A href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ericberg.net%2F"><img">http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ericberg.net%2F"><img src="http://www.ericberg.net/i/xhtmlv.gif" width="80" height="15" border="0" /></a></li>
       <li><a href="<A href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.ericberg.net/s.css"><img">http://jigsaw.w3.org/css-validator/validator?uri=http://www.ericberg.net/s.css"><img src="http://www.ericberg.net/i/cssv.gif" width="80" height="15" border="0" /></a></li>
       <li><a href="<A href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.ericberg.net&output=Submit&gl=wcag1-aaa&test="><img">http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.ericberg.net&output=Submit&gl=wcag1-aaa&test="><img src="http://www.ericberg.net/i/bob.gif" border="0" /></a></li>
     </ul>
      </div>
      <div id="main"> 
     <div id="content"> 
       <p align="left"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
      sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
      erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
       <p align="left">Duis autem vel eum iriure dolor in hendrerit in vulputate 
      velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis 
      at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
     </div>
      </div>
      <div id="foot"> 
     <p>&copy;2004 Eric Berg</p>
      </div>
    </div>
    </body>
    </html>
    You#ll have to recode the links html as it got mangeld but if you cut and pste it will show the layout ok.

    I'm a little unclear on the difference between relative and absolute positioning; i thought absolute was supposed to position them in relation to their container element? thanks
    Theres a good explanation in the FAQ about the different positioning systems and it would do good for you to read it to get a good understanding

    Absolute elements are placed in relation to their parent. the parent is any ancestor that has a position:relative or position absolute defined otherwise the parent is the html element.

    Relative positioning moves an element in relation to itself and is not usually used for structural layout but for small effects. When an element is removed by relative positioning the space it previously occupied is preserved and all elements think its still where it was. This can leave big holes around the page when you use relative positioning for main structures.

    Paul


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
  •