Results 1 to 9 of 9
  1. #1
    Join Date
    Oct 2006
    Posts
    19
    Plugin Contributions
    0

    Default IE6 .clearBoth and header

    Hello

    In IE6 the .clearBoth css class creates a white box in the header in the site I'm bulbing. Here is an image of the problem .

    Does anyone know how I can get rid of it?

    Darren

  2. #2
    Join Date
    May 2004
    Location
    Hong Kong
    Posts
    1,291
    Plugin Contributions
    1

    Default Re: IE6 .clearBoth and header

    A url will help you get more accurate answers.

    .
    A New Starter again

  3. #3
    Join Date
    Oct 2006
    Posts
    19
    Plugin Contributions
    0

    Default Re: IE6 .clearBoth and header

    The URL is http://www.beatrice-bray.co.uk In other browsers the white box doesnt appear. I tried removing the .clearBoth class but as expected that didn't work as it poshed all the main content over to the right.

    The header wrapper is set to have the orange background, so I would have thought that all nested ids and classes would inherit those values.

  4. #4
    Join Date
    May 2004
    Location
    Hong Kong
    Posts
    1,291
    Plugin Contributions
    1

    Default Re: IE6 .clearBoth and header

    May be you have a </div> more, it seems should not be there.
    Code:
    <!--eof-branding display-->
    <!--eof-header logo and navigation display-->
    
    <!--bof-header ezpage links-->
    <!--eof-header ezpage links-->
    </div>
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
      <tr>
    A New Starter again

  5. #5
    Join Date
    May 2004
    Location
    Hong Kong
    Posts
    1,291
    Plugin Contributions
    1

    Default Re: IE6 .clearBoth and header

    Oops!
    Sorry, false alarm!
    A New Starter again

  6. #6
    Join Date
    May 2004
    Location
    Hong Kong
    Posts
    1,291
    Plugin Contributions
    1

    Default Re: IE6 .clearBoth and header

    The following seems fix the problem.
    Code:
    #tagline {
    	color:white;
    	font-size: 2em;
    	text-align : center;
    	vertical-align: middle;
    	background: #F06A26;
    	height: 90px; /* add equal to the logo's height  */ 
    	}
    A New Starter again

  7. #7
    Join Date
    Oct 2006
    Posts
    19
    Plugin Contributions
    0

    Default Re: IE6 .clearBoth and header

    Quote Originally Posted by seethrou View Post
    The following seems fix the problem.
    Code:
    #tagline {
    	color:white;
    	font-size: 2em;
    	text-align : center;
    	vertical-align: middle;
    	background: #F06A26;
    	height: 90px; /* add equal to the logo's height  */ 
    	}
    Thank you so much, that's done it. There is a slight problem now in ff, now with the screen width re-sized to about 850px the tagline text can overspill on to the breadcrumb but I can live with that - after all how often does that happen.

    Thanks again for your help

    Darren

  8. #8
    Join Date
    May 2004
    Location
    Hong Kong
    Posts
    1,291
    Plugin Contributions
    1

    Default Re: IE6 .clearBoth and header

    May be trim off some part of the right side of the logo (the red color part), and the left side with graphic is only about 530px) of the logo.
    Since the right side of you logo are same color with the tagline and other area.
    This may give more spaces to the tagline to swing if the width is not sufficient.

    .
    A New Starter again

  9. #9
    Join Date
    May 2004
    Location
    Hong Kong
    Posts
    1,291
    Plugin Contributions
    1

    Default Re: IE6 .clearBoth and header

    Some more refinements, after trim off the right part of the red color section of the logo. It become about 520 x 90 px.
    And below seems with better results for the vertical align. And with a little bit less of side effect while the width change.
    Code:
    #taglineWrapper {
    	height: 90px;
    }
    	
    #tagline {
    	color: white;
    	font-size: 2em;
    	text-align: center;
    	background: #F06A26;
    	padding: 35px 0;
    	}
    A New Starter again

 

 

Similar Threads

  1. IE6 positioning for my search bar/header?
    By sartor in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 29 Jan 2009, 09:30 AM
  2. Category Tabs IE6, IE7 and FF alignment AND the dreaded white space
    By spinnywoman in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 18 Apr 2008, 10:49 PM
  3. IE6 Where Do I Remove <br class="clearBoth">?
    By Kia in forum General Questions
    Replies: 3
    Last Post: 17 Mar 2008, 11:52 AM
  4. header + banners not showing in IE6
    By theslydog in forum General Questions
    Replies: 3
    Last Post: 14 Sep 2007, 10:03 PM
  5. white space under header in IE (already did clearBoth fix)
    By p m in forum Templates, Stylesheets, Page Layout
    Replies: 12
    Last Post: 10 Jan 2007, 08:21 AM

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
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR