SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 ignore the clear float

    I use this comment to clear out the floats:

    Code:
    head+body .clear:after {
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    }
    
    /* deal IE6 and below issue */
    * html .clear {
    	height: 1%;
    }
    It seems that IE7 ignores this command, is it a bug? Any suggestion?

    In case somebody want to view full css:

    Code:
    /* version 5 9.21.06 */
    
    body {
    	margin: 0;
    	padding: 0;
    	color: #666666;
    	background-color: #F4F4F4;
    	font: 12px Helvetica, Arial, Verdana, Tahoma, sans-serif;
    }
    
    * {
    	margin:0;
    	padding:0; 
    }
    
    img {
    	border: 0;
    }
    
    a {
        color: #666666;
        text-decoration: underline;
    	font-weight: bold;
    }
    
    a:hover {
        color: #FA100F;
        text-decoration: underline;
    }
    
    div#wrapper {
    	width: 900px;
    	margin: 0 auto;
    }
    
    /* main wrapper layout */
    div#top_header {
    	background-color: #000;
    	padding: 2px;
    }
    
    div#left_sidebar {
    	width: 142px;
    	float: left;
    	background-color: green;
    }
    
    div#middle_main {
    	float: left;
    	width: 616px;
    	background-color: red;
    }
    
    div#right_sidebar {
    	width: 142px;
    	float: right;
    	background-color: yellow;
    }
    /* end of main wrapper layout */
    
    /* top_nav contents */
    div#top_nav dt {
    	float: left;
    }
    /* end of top_nav contents */
    
    /* bottom_nav contents */
    div#bottom_nav dt {
    	float: left;
    }
    /* end of bottom_nav contents */
    
    /* clean the floats */
    head+body .clear:after {
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    }
    
    /* Fix IE bug */
    * html .clear {
    	height: 1%;
    }
    and html page can be found at: http://site370.mysite4now.com/muzzman/category03.html

    Thanks!

    jace

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Page looks the same to me in IE7, IE6 and FF.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah it looks same as right now, somebody just modified the css file by added this:

    Code:
    #contents_wrapper
    {
    	clear: both;
    	float: left;
    }
    That kind of temporary resolves IE7 issue, told him that the "float: left;" isn't necessary and the clear statement I used (see code in my first post) is generally accepted by many browsers as IE7 should too to clear out the floats.

    Back to the original question: why IE7 ignore the this clear statement, does I need to use different solution to deal with IE7 if it doesn't accept this?:

    Code:
    head+body .clear:after {
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    }
    
    /* deal IE6 and below issue */
    * html .clear {
    	height: 1%;
    }
    Thanks again,

    jace

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE7 doesn't understand * html and it could be it doesn't like head+body either. For a list of filters that work with different browsers: http://centricle.com/ref/css/filters/

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for tip, just to be sure I did the proper way:

    Code:
    head+/**/body .clear:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    }
    	
    	/*  \*/
    	.clear {min-height:1%;}
    	* html .clear {height:1%;}
    	/*  */
    I assume I need to include this: "/* \*/" and "/* */" so other browsers ignore them while IE recgonize them?

    jace

  6. #6
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jace41
    I assume I need to include this: "/* \*/" and "/* */" so other browsers ignore them while IE recgonize them?
    That stuff is to hide it from MacIE 5.

    You might want to look into using overflow to clear floated elements. It's much simpler IME. There's an example at http://www.pmob.co.uk/temp/float-clear.htm
    Olly Hodgson
    thinkdrastic.net

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gnarly
    That stuff is to hide it from MacIE 5.

    You might want to look into using overflow to clear floated elements. It's much simpler IME. There's an example at http://www.pmob.co.uk/temp/float-clear.htm
    That's right! I forgot about this hack for MacIE (haven't used this hack for ages!). I use mac nowdays and in my opinion I don't think we need to comply with MacIE now since it's basically a forogotten browser or almost non-existent among mac community.

    jace

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I don't think we need to comply with MacIE now since it's basically a forogotten browser
    Yes you are right but the fix is easy so why not include it . This is the clearing method that works from ie5mac up to ie7 and practically everywhere else.

    Code:
    .clearfix:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    }
    .clearfix {
    	display:inline-block;
    }
    
     /* mac hide \*/
    	* html .clearfix {height: 1%;}
    	  .clearfix {display: block;}
     /* End hide */
    The display:inline block is for ie5 mac and also provides ie7 with "layout" so that it clears. The following display:block sets ie7 back to display:block but layout is already forced and not negated with the new declaration.


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
  •