SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Render glitch from clearing floats

    Here are the two pages

    http://www.trophyfitnessclub.com/sta...ainers/?club=1
    http://www.trophyfitnessclub.com/sta...iners2/?club=1

    The first one uses a <br> to clear the floats. As you can see, in IE, this creates an unwanted line break.

    The second one uses a <div> to clear the floats. Again, as you can see, in IE, this causes a nested div in the 2nd column to go white. Forcing a background-color of transparent doesn't work (other colors work, but transparent doesn't allow the blue to show through). The blue background that should be showing through comes from div#content

    I put colored borders on the bottom of the key DIVs so I (we) can see where they end.

    The full CSS can be seen here
    http://www.trophyfitnessclub.com/sta...css/screen.css

    The most pertinent CSS is this
    Code:
          body.trainers div#content {
          	background: transparent url(../images/bg_content_trainers.gif) repeat-y top right;
          	border-bottom: 1px solid red;
          	}
          body.trainers div#col1 {
          	width: 296px;
          	height: 400px;
          	padding-bottom: 20px;
          	float: left;
          	margin-right: 3px;
          	background: transparent url(../images/bg_trainer_nav.jpg) no-repeat 0 0;
          	border-bottom: 1px solid green;
          	}
          body.trainers div#col2 {
          	/*
          	This works, but is too heavy handed to be a viable solution
          	background: transparent url(../images/bg_content_trainers.gif) repeat-y top right;
           	*/
          	width: 449px;
          	float: left;
          	border-bottom: 1px solid orange;
          	}
          body.trainers div#col1 .content {
          	padding: 0px 20px 20px 20px;
          	margin-top: 20px;	
          	}
          body.trainers div#col2 .content {
          	padding: 30px;
          	}
    I'm pretty sure I've seen/fixed this bug before, but a solution isn't coming to me.
    Last edited by beetle; Oct 13, 2004 at 14:55.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The best way to clear floats is to use this.
    Code:
    .clearer{
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    Code:
    <div>
    	<div>floated stuff</div>
    	<div class="clearer"></div>
    </div>
    That should clear floated elements in ie and firefox without any extra space. (Sometimes (very occasionally) firefox needs <br class="clearer" /> instead but the result is still the same as mentioned.)

    Paul

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that clears the floating alright, but it causes an even more egregious error than what I had

    http://www.trophyfitnessclub.com/sta...iners3/?club=1
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




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

    Ie doesn't like it when you float things inside elements that have no width defined even though the parents parent may have a width defined. It's the same problem you get when an element has its width define by margins alone.

    The same fix works for both and thats to declare a height of 1% to give it something to get hold of.

    Add this to your stylesheet.
    Code:
    /* commented backslash hack v2 \*/ 
    * html div#content {height:1%;} 
    /* end hack */
    use the clearer div as mentioned in my first post and now the element will clear correctly with the background correct (with any luck)

    Paul

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - I must owe you at least a 6pack of your favorite micro-brew by now.

    I'll definitely commit this to memory.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •