SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 cols header + 3 cols content = bug

    Hi,

    So my site has a 3 columns header then a 3 columns content.
    Header and content are position:relative and all the 6 columns are float:left
    Thus I must clear:both somewhere after the first 3 columns and before the next 3 columns.

    Browsers render differently the page regarding to where clear:both is made.

    The bug is that the whole content div is cropped on left and right.

    I have no idea how to fix that without using position:absolute, z-index or tables (I won't use them).

    I'm able to check in IE and FireFox on Mac, not on Windows.
    Please notify me any other issues.

    See details on that page.

    Oh and I noticed in IE, that hover only works for links, is that also true on Windows ??

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

    I think this what you were trying to do. (I've only done this quickly as I'm just on my way out.)
    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>
    <!--
    -->
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="French" />
    <meta name="dc.language" content="fr" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <meta name="robots" content="all" />
    <meta name="revisit-after" content="1 days" />
    <meta name="dc.type" content="Private Homepages; Collection" />
    <meta name="dc.format" content="text/html" />
    <meta name="rating" content="general" />
    <style type='text/css' media='screen'>
    /**** Imported style sheet style.css ****/
    body{
    padding:10px;
    background-color:#333;
    text-align:center;
    font-size:x-small;
    font-family:arial, verdana, sans-serif;
    color:#999;}
    #sub-body{
    padding:10px;
    background-color:#fff;
    border:1px solid #ccc;}
    #header{
    position:relative;
    margin:10px;}
    .header-logo,.header-extra{
    float:left;
    width:16%;}
    .header-info{
    width:65%;
    float:left;
    letter-spacing:2px;
    word-spacing:3px;
    padding-top:30px;}
    .header-title{
    color:#FF6600;
    font-size:x-large;
    font-weight:bold;}
    .clear-both{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;} /*required*/
    #content{
    position:relative;
    color:#000;}
    #blog{
    margin:30px 17% 10px 17%;
    text-align:left;
    }
    * html #blog {height:1%}/*ie 3pixel jog fix*/
    .blog-head{
    margin:15px 10px 15px 10px;
    padding:5px 5px 5px 10px;
    border:1px solid #eee;
    color:#bbb;
    font-size:medium;
    letter-spacing:2px;}
    .blog-head:hover{
    color:#aaa;
    border:1px solid #ddd;}
    .blog-entry{
    margin:10px 10px 10px 20px;
    padding:5px;
    border:1px solid #fff;}
    .blog-entry:hover{border:1px solid #eee;}
    .blog-title{
    padding:5px 0px 0px 10px;
    font-size:small;
    font-weight:bold;}
    .blog-body{
    padding-left:20px;
    font-size:x-small;}
    .blog-foot{
    padding:5px 0px 5px 25px;
    font-size:x-small;
    color:#999;}
    .blog-extra{
    margin:0px 10px 0px 25px;
    padding:10px;
    border:1px solid #fff;}
    #menu-1,#menu-2{
    float:left;
    width:16%;
    margin:10px;}
    #menu-2{float:right}
    .menu-box{
    margin:0px 0px 10px 0px;
    padding:0px 0px 10px 0px;
    border:1px solid #eee;
    font-size:x-small;
    background-color:#fcfcfc;
    color:#777;}
    .menu-box:hover{border:1px solid #ddd;}
    .menu-container{}
    .menu-container:hover{}
    .menu-head{
    padding:5px 3px 4px 3px;
    letter-spacing:2px;
    word-spacing:2px;
    font-family:verdana, sans-serif;
    font-size:small;
    font-weight:bold;
    text-transform:uppercase;
    color:#ff6600;
    border:1px solid #fdfdfd;
    background-color:#fff;}
    .menu-head:hover{
    border:1px solid #ff8800;
    background-color:#ff6600;
    color:#fff;}
    .menu-body{
    margin:0px 3px 0px 3px;
    padding:10px;
    text-align:justify;}
    .menu-body:hover{background-color:#fff;}
    #footer{
    clear:both;
    margin:10px;
    padding:5px;
    border:1px solid #eee;
    background-color:#fafafa;
    text-align:right;}
    a{
    color:#0066ff;
    text-decoration:none;}
    a:hover{
    text-decoration:blink;
    color:#ff6600;
    cursor:pointer;}
    a:visited{text-decoration:line-through;}
    a[title]{
    border-bottom:thin dotted;
    cursor:help;}
    acronym{cursor:help;}
    .symbol{
    text-decoration:none;
    border:0;
    font-size:150%;
    font-weight:bold;}
    img,img[title]{
    vertical-align:middle;
    border:0;}
    ul,ol{
    padding-left:10px;
    list-style-type:circle;}
    li:hover{list-style-type:disc;}
    .center{
    padding:5px;
    text-align:center;}
    pre{
    font-style:normal;
    font-stretch:normal;
    font-family:Arial, Verdana, sans-serif;
    font-size:larger;}
    
    /**** Inline STYLE-tag style sheet ****/
    /* @import "style.css"; */
     
    </style>
    </head>
    <body>
    <div id="sub-body"> 
      <div id="header"> 
    	<div class="header-logo"> header-logo header-logo header-logo </div>
    	<div class="header-info"> 
    	  <div class="header-title"> header-title header-title header-title</div>
    	  text text text text text text text </div>
    	<div class="header-extra"> header-extra header-extra header-extra header-extra 
    	</div>
      </div>
      <div class="clear-both"></div>
      <div id="content"> 
    	<div id="menu-1"> 
    	  <div class="menu-box"> 
    		<div class="menu-container"> 
    		  <div class="menu-head"> CALENDAR </div>
    		  <div class="menu-body"> menu-body menu-body menu-body menu-body menu-body 
    			menu-body menu-body menu-body menu-body </div>
    		</div>
    		<div class="menu-container"> 
    		  <div class="menu-head"> ARCHIVES </div>
    		  <div class="menu-body"> menu-body menu-body menu-body menu-body menu-body 
    			menu-body menu-body menu-body menu-body </div>
    		</div>
    	  </div>
    	  <div class="menu-box"> 
    		<div class="menu-container"> 
    		  <div class="menu-head"> ABOUT</div>
    		  <div class="menu-body"> menu-body menu-body menu-body menu-body menu-body 
    			menu-body menu-body menu-body menu-body </div>
    		</div>
    		<div class="menu-container"> 
    		  <div class="menu-head"> STATS </div>
    		  <div class="menu-body"> menu-body menu-body menu-body menu-body menu-body 
    			menu-body menu-body menu-body menu-body </div>
    		</div>
    	  </div>
    	  <div class="menu-box"> 
    		<div class="menu-container"> 
    		  <div class="menu-body"> menu-body menu-body menu-body menu-body menu-body 
    			menu-body menu-body menu-body menu-body </div>
    		</div>
    	  </div>
    	</div>
    		<div id="menu-2"> 
    	  <div class="menu-box"> 
    		<div class="menu-container"> 
    		  <div class="menu-head"> ADS</div>
    		  <div class="menu-body"> menu-body menu-body menu-body menu-body menu-body 
    			menu-body menu-body menu-body menu-body </div>
    		</div>
    	  </div>
    	  1</div>
      </div>
     <div id="blog"> 
    	  <div class="blog-entry"> 
    		<div class="blog-title"> Bugs Reports </div>
    		<div class="blog-body"> 
    		  <p>Known issues : <br />
    			- Style : The content div is cropped on it’s left and right 
    			(it fixes if switching than switching back tabs). This bug is due 
    			to the fact that the header div has 3 columns and then the content 
    			div has also 3 columns. I must clear:both somewhere after the header’s 
    			columns and before the content’s ones. That’s the best 
    			solution I found to have a correct display in both Mozilla suite and 
    			IE. <br />
    			I’ll strongly appreciate if someone could eliminate that bug, 
    			without using position:absolute and z-index. </div>
    		<div class="blog-foot"> </div>
    	  </div>
    	</div>
      <div id="footer"> W3C : <a href="http://validator.w3.org/check/referer">XHTML</a> 
    	| <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </div>
    </div>
    </body>
    </html>
    Note that when you have three columns then you should just use 2 floats. One goes right and one goes left. Then the centre can be static and kept apart with margins.

    You have lots of little floats down the left side when you really should just have one float outer and then you can statically position all your little floats inside that outer. (Do the same for the right as well)

    This makes for a more robust layout as some browsers don't like it if you float a few things right and then when you float something left it will go directly left and not rise up the page.

    If you have any questions I'll be back on online tomorrow.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to work fine in IE and FF, thanks :-)

    I did the same thing for the 3 cols in the header.

    I noticed that you moved the center column after the 2 others.
    If I move it before all is messed up.
    Since the content to read is in that center column and because the eventual warning and fatal errors will only happen in the left and right ones, is there a way to have the center column first in the source ?

    You have lots of little floats down the left side
    Sorry but I don't understand what you meant.


    Here's how is the page now.

    PS: if you modify it please clearly notify the changes in the source.

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

    is there a way to have the center column first in the source ?
    When you float elements then the floated element must come first so you can't have the content first in the code above without changing things considerably.

    You would need to float all columns. But you would need to float two columns inside another float so that you only have two main floats. You can then float the centre content first in that double float container with the left content floated second. You then float the right column outside the double float holder.

    This is quite complicated (even when you know what you are doing).

    The only other way is to absolutely palce the content in the central position but then you loose the ability to place a footer under all three columns. You could just have the footer under the center and that would be quite easy to do.

    Heres an example of the floated method but i don't think you'll understand a lot of it lol


    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>
    <title>Demo</title>
    <style type='text/css' media='screen'>
    body{
    padding:10px 0;
    margin:0;
    background-color:#333;
    text-align:center;
    font-size:x-small;
    font-family:arial, verdana, sans-serif;
    color:#999;}
     
    #sub-body{
    padding:10px;
    background-color:#fff;
    border:1px solid #ccc;}
    #header{
    position:relative;
    margin:10px;}
    #header-logo,#header-extra{
    float:left;
    width:16%;}
    #header-extra{float:right;}
    #header-info{
    margin:0px 16% 0px 16%;
    letter-spacing:2px;
    word-spacing:3px;
    padding-top:30px;}
    .header-title{
    color:#FF6600;
    font-size:x-large;
    font-weight:bold;}
    .clear-both{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;} /*required*/ 
     
    .blog-head{
    margin:15px 10px 15px 10px;
    padding:5px 5px 5px 10px;
    border:1px solid #eee;
    color:#bbb;
    font-size:medium;
    letter-spacing:2px;}
    
    .blog-head:hover{
    color:#aaa;
    border:1px solid #ddd;}
    .blog-entry{
    margin:10px 0px 10px 0px;/* left and right padding taken out */
    padding:5px;
    border:1px solid #fff;}
    .blog-entry:hover{border:1px solid #eee;}
    .blog-title{
    padding:5px 0px 0px 0px;/* left and right padding taken out */
    font-size:small;
    font-weight:bold;}
    .blog-body{
    padding-left:20px;
    font-size:x-small;}
    .blog-foot{
    padding:5px 0px 5px 25px;
    font-size:x-small;
    color:#999;}
    .blog-extra{
    margin:0px 10px 0px 0px;
    padding:10px;
    border:1px solid #fff;}
    .menu-box{
    margin:0px 0px 10px 0px;
    padding:0px 0px 10px 0px;
    border:1px solid #eee;
    font-size:x-small;
    background-color:#fcfcfc;
    color:#777;}
    .menu-box:hover{border:1px solid #ddd;}
    .menu-container{}
    .menu-container:hover{}
    .menu-head{
    padding:5px 0px 4px 0px;/* taken out padding left and right*/
    text-align:center;/* center text */
    letter-spacing:2px;
    word-spacing:2px;
    font-family:verdana, sans-serif;
    font-size:small;
    font-weight:bold;
    text-transform:uppercase;
    color:#ff6600;
    border:1px solid #fdfdfd;
    background-color:#fff;
    }
    .menu-head:hover{
    border:1px solid #ff8800;
    background-color:#ff6600;
    color:#fff;}
    .menu-body{
    margin:0px 0px 0px 0px;
    padding:10px;
    text-align:justify;}
    .menu-body:hover{background-color:#fff;}
    #footer{
    clear:both;
    margin:10px;
    padding:5px;
    border:1px solid #eee;
    background-color:#fafafa;
    text-align:right;}
    a{
    color:#0066ff;
    text-decoration:none;}
    a:hover{
    text-decoration:blink;
    color:#ff6600;
    cursor:pointer;}
    a:visited{text-decoration:line-through;}
    a[title]{
    border-bottom:thin dotted;
    cursor:help;}
    acronym{cursor:help;}
    .symbol{
    text-decoration:none;
    border:0;
    font-size:150%;
    font-weight:bold;}
    img,img[title]{
    vertical-align:middle;
    border:0;}
    ul,ol{
    padding-left:10px;
    list-style-type:circle;}
    li:hover{list-style-type:disc;}
    .center{
    padding:5px;
    text-align:center;}
    pre{
    font-style:normal;
    font-stretch:normal;
    font-family:Arial, Verdana, sans-serif;
    font-size:larger;}
    /* changes made below */
    * html body {font-size:xx-small;f\ont-size:x-small;}/* for ie5 and 5.5. that render one size higer than they should*/
    * html .blog-head {font-size:small;f\ont-size:medium;}/* for ie5 and 5.5. that render one size higer than they should*/
    /* repeat the above for any other font keywords in the css */
    #content{
    position:relative;
    color:#000;
    width:100%;
    }
    #innerwrap {width:84%;float:left;margin-right:-0.5%;}
    #blog{
    float:right;
    width:79%;
    text-align:left;
    color:#000;
    }
    /* * html #blog {height:1%} ie 3pixel jog fix - not needed now element is floated*/
    /*#menu-1,#menu-2{
    float:left;
    width:16%;
    margin:10px;}
    #menu-2{float:right} */
    #menu-1{margin:10px 0 0 10px;}
    #menu-2{margin:10px 10px 0 0;}
    #leftcolumn {
     float:left;
     width:19%;
    }
    #rightcolumn {
     float:right;
     width:16%;
    }
    </style>
    </head>
    <body>
    <div id="sub-body"> 
      <div id="header"> 
    	<div id="header-logo"> header-logo header-logo header-logo header-logo header-logo 
    	  header-logo header-logo header-logo header-logo header-logo header-logo 
    	  header-logo </div>
    	<div id="header-extra"> header-extra header-extra header-extra header-extra 
    	  header-extra header-extra header-extra header-extra header-extra header-extra 
    	  header-extra header-extra </div>
    	<div id="header-info"> 
    	  <div class="header-title"> header-title header-title header-title </div>
    	  text text text text text text text </div>
      </div>
      <div class="clear-both"></div>
     
     <div id="content"> 
        <div id="innerwrap"> 
    	  <div id="blog"> 
    		<div class="blog-entry"> 
    		  <div class="blog-title"> Bugs Reports </div>
    		  <div class="blog-body"> 
    			<p>Known issues : <br />
    			  - Style : The content div is cropped on itís left and right (it 
    			  fixes if switching than switching back tabs). This bug is due to 
    			  the fact that the header div has 3 columns and then the content 
    			  div has also 3 columns. I must clear:both somewhere after the headerís 
    			  columns and before the contentís ones. Thatís the best solution 
    			  I found to have a correct display in both Mozilla suite and IE. 
    			  <br />
    			  Iíll strongly appreciate if someone could eliminate that bug, without 
    			  using position:absolute and z-index. </div>
    		  <div class="blog-foot"> </div>
    		</div>
    	  </div>
    	  <div id="leftcolumn">
    		<!-- all right column stuff goes inside here -->
    		<div id="menu-1"> 
    		  <div class="menu-box"> 
    			<div class="menu-container"> 
    			  <div class="menu-head"> CALENDAR </div>
    			  <div class="menu-body"> menu-body menu-body menu-body menu-body 
    				menu-body menu-body menu-body menu-body menu-body </div>
    			</div>
    			<div class="menu-container"> 
    			  <div class="menu-head"> ARCHIVES </div>
    			  <div class="menu-body"> menu-body menu-body menu-body menu-body 
    				menu-body menu-body menu-body menu-body menu-body </div>
    			</div>
    		  </div>
    		  <div class="menu-box"> 
    			<div class="menu-container"> 
    			  <div class="menu-head"> ABOUT</div>
    			  <div class="menu-body"> menu-body menu-body menu-body menu-body 
    				menu-body menu-body menu-body menu-body menu-body </div>
    			</div>
    			<div class="menu-container"> 
    			  <div class="menu-head"> STATS </div>
    			  <div class="menu-body"> menu-body menu-body menu-body menu-body 
    				menu-body menu-body menu-body menu-body menu-body </div>
    			</div>
    		  </div>
    		  <div class="menu-box"> 
    			<div class="menu-container"> 
    			  <div class="menu-body"> menu-body menu-body menu-body menu-body 
    				menu-body menu-body menu-body menu-body menu-body </div>
    			</div>
    		  </div>
    		</div>
    	  </div>
    	  <!-- end left column -->
    	  <div class="clear-both"></div>
    	</div>
    	<!-- end innerwrap -->
    	
    <div id="rightcolumn">
    	  <!-- all right column stuff goes inside here -->
    	  <div id="menu-2"> 
    		<div class="menu-box"> 
    		  <div class="menu-container"> 
    			<div class="menu-head"> ADS</div>
    			<div class="menu-body"> menu-body menu-body menu-body menu-body menu-body 
    			  menu-body menu-body menu-body menu-body </div>
    		  </div>
    		</div>
    		1</div>
    	</div>
      </div>
      <!-- end right column-->
     
     <div id="footer"> W3C : <a href="http://validator.w3.org/check/referer">XHTML</a> 
    	| <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </div>
    </div>
    </body>
    </html>
    If you wanted the centre content above the header then the only way that is possiible is if the header is a fixed height and can be placed absolutely.

    All-in all I think you are probably better off with the example you have now but feel free to use the above code if you wish.

    Also not that ie only recognises hover on anchors (as you probably realise by now).

    Hope this helps anyway.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay thanks, I'll keep the actual page, I guessed it would be too complicated.

    So IE is definitely the worst one... what a waste.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ermm it worked great but on the production site there's a large space between header and content, and I can't get the padding nor margin to place #blog
    I'm looking at the topographic informations but I can't locate the problem.

    I'm PM you the link.

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

    Try this:
    Code:
    * html #sub-body {height:1%}/*ie fix*/
    #blog{
    margin:0 18% 5% 18%;
    text-align:left;
    color:#000;
    position:relative;
    }
    Paul

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, why does the margin of #blog refers to the body rather than to the parent element (content) and #menu-1, #menu2 ? It's not position:absolute though. (Same problem with #header-info)
    It's quite ok but if I want to apply borders and background it will sucks a bit.
    I don't get why #header stops before the end of #header-logo, I set min-height:120px

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Simply margin refers to the element closest that has content.

    Content is just an empty wrapper with no borders so some browsers will not take not account of it and go to the next element inline.

    Paul

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay I added borders to #header-info and #blog.
    But what can I do to get #content to visibly enclose the 3 columns and not just #blog ? (Same for #header)

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Remember that floats are removed from the flow and thar in order to encompass floats you need to clear them before the closing div of the parent. (Assuming thats what you are trying to do.)

    So you need to add a clearer class before the last closing div of the parent after the floats (div class="clear-both"></div>).

    (I'm just working from memory at the moment so I can't remember exactly what floats you had .)

    If you've updated the page in the link that you PM'd me then I'll take another look in the morning if you want just to make sure I'm talking about the right things.

    Paul

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Fr
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's it, I moved <div class="clear-both"></div> from after #header to inside it just before </div> and I deleted the clear:both property of #footer to ad <div class="clear-both"></div> before the </diiv> of #content

    I think it's gonna be ok now, you did a great job, thanks.


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
  •