Zen Fixed content pushed to buttom, clear-block not working
johnjanney - April 28, 2007 - 03:29
| Project: | Zen |
| Version: | 5.x-1.x-dev |
| Component: | Code |
| Category: | support request |
| Priority: | critical |
| Assigned: | Unassigned |
| Status: | duplicate |
Jump to:
Description
I tried adding the "clear-block" to the page.tpl.php file (see http://drupal.org/node/110550) and my content still gets pushed down to the bottom in Zen fixed. One guy told me to add "margin: 0; width: 560px;" under squeeze in the layout.css, but that didn't do anything either (I even tried both of these together... still having the problem). If you have IE6, you can see this at www.DIYDebtSettlementKit.com. I am pulling my hair out over this and would really appreciate any help. If you don't have IE6, I attached a screenshot so you can see the problem. I am running Drupal 5.1.
| Attachment | Size |
|---|---|
| diyzenerror.jpg | 111.63 KB |
#1
seems your site is working now with IE6. how did you fix it ? i've got the same problem and none of the provided solutions did work so far ...
#2
Well, after hours of reading through very sophisticated theories about why Zen-Fixed was broken for IE6, I downloaded the IE Developer Toolbar and checked our every DIV tag on the page. Then, all I did was expand the "body" tag in the CSS to 880px.
Apparently, IE6 adds px to DIV tags, so you can't have a 800px content in a 800px container/body. The container/body needs to be somewhat larger (don't know exactly how much, but I figured another 80px would do it). If the container/body DIV is the same as the inside content DIVs, then some of the DIVs inside will "wrap" (like word wrap in a text document).
That's it. No "clear-block" or other crazy stuff... just make your "page" attribute larger.
Now, All I need to do it set the header and footer DIVs to 800px (because they currently are extending to the 880px set for "page" in the CSS. I'm not a CSS-literate person (I know enough to make adjustments, but not enough to build anything). So, if anyone could post the CSS code to tame the header and footer to 800px, that would be nice.
#3
Sorry... it was not the "body" tag, it was the "page" tag.
#4
marking as dup of http://drupal.org/node/89656
#5
johnjanney, did the changes in page, header and footer widths solved the problem?
Were the layout in other browsers not affected?
If the answer is YES, I think what you said:
Apparently, IE6 adds px to DIV tags, so you can't have a 800px content in a 800px container/body. The container/body needs to be somewhat larger (don't know exactly how much, but I figured another 80px would do it). If the container/body DIV is the same as the inside content DIVs, then some of the DIVs inside will "wrap" (like word wrap in a text document). That's it. No "clear-block" or other crazy stuff... just make your "page" attribute larger.
is a solution that a lot of people is searching for.
Having the same issue here, my guess is that the necessary and sufficient enlargement of the body is 60px. I've created a node with an image 540 px wide (theoretically the maximum width allowed for the main content), and gradually made it thinner untill the main content is not pushed below. The result was 480 px.
#6
Hey johnjanney, I thinkyou've discovered the weel! I implemented the changes you suggested, and finally my layout is fine in IE6! Thank you.