Theme is broken
voite - June 19, 2006 - 17:36
| Project: | Holy Grail theme |
| Version: | HEAD |
| Component: | Code |
| Category: | bug report |
| Priority: | critical |
| Assigned: | NancyDru |
| Status: | postponed (maintainer needs more info) |
Description
Like a previous user stated this theme is all kinds of broken in IE 6. The left column does not go into the padding of "content" and the right column is pushed off screen to the right, in both IE 6 and in Firefox.
#1
Broken in Opera, too.
In fact, the "Holy Grail" layout proposed on A List Apart has issues in several browsers and is one hell of a misnomer.
#2
I've used the article on http://alistapart.com/articles/holygrail to change BlueMarine table lay-out to divs. I found the article very instructive and easy to follow, I can't report any issues with the browsers I tested with: FireFox 1.5.0.7, Opera 9.02 and Konqueror 3.3.
This is on Linux, so I haven't tried IE (nor do I care to). The theme scales beautifully with the browser screen width (also depending on the blocks you use, in my example the Archive module) and does give you what it promisses: header, 3 columns and footer.
The theme as submitted is merely a copy of the instructions found in the article; see the style sheet and compare values. It doesn't take much (probably with the exception of IE) to get the 'Holy Grail' to work on BlueMarine yourself, only a minimum understanding of xhtml and CSS is required:
- Copy the BlueMarine theme directory (to bluemarine_hg for example),
- In page.tpl.php replace every occurence of 'table' and 'td' with 'div', remove every 'tr' line,
- You should change your CSS to something like this (I've left other mark-up out):
#header { width: 100%; }#content { padding-left: 200px; padding-right: 200px; }
#content .column { position: relative; float: left; padding-left: 5%; }
#main { width: 80%; }
#sidebar-left { width: 200px; right:200px; margin-left: -85%; }
#sidebar-right { width: 200px; margin-right: -200px; padding-right: 5%; }
#footer { clear: both; }
The margins are my own fix, see the article for an alternative. Likewise for more about IE.
Attached snapshot from FireFox, original 1280*1024, browser font-size: 15. (or http://img207.imageshack.us/img207/4787/snapshot1fm5.png).
Please note my page is under development, you should tinker a little with the values to get it right. The original article on ALA might provide some guidance here. It's just that I sorted this out myself and *then* found someone had done it before and submitted a theme.
Have fun!
#3
Excuses, I didn't mean to change the original title of this thread. "Theme is OK" refers to my previous post only.
#4
Caesar, if you have a suggestion for how to fix the theme to make it not break in IE, please submit a patch! I don't have much time to play with this at the moment, but I can certainly review/commit a patch to clear up some of these IE issues (which I agree should be cleared up).
#5
Crell: I don't have IE so I can't.
A quick look at the IE hack in the original article shows it uses " * html " to make it work in IE6 but there are issues with that in IE7, I believe (but I'm not very knowlegdeable with CSS hacks or the current state of IE7). My advice therefore is to forget about making BlueMarine tableless if IE compatibility is important, better wait to see what IE7 has to offer CSS-standards-wise and how fast it'll acquire a large marketshare. Once IE7 is the main MS browser, the Holy Grail can be tested again and might not need hacks at all (hopefully).
For those who don't care about that at all (my site is xhtml 1.1 served as application/xhtml+xml for example) the ALA article still stands as a useful reference for a tableless design with a lay-out like BlueMarine.
#6
I don't know if broken is the right word ... it did deviate a bit from the ALA article, as I understood it.
The first issue I had with the theme was that it created a horizontal scroll bar in IE6, Opera, and FireFox. Didn't anyone else find this to be a problem? To get rid of that issue, I commented out the following line from the style.css file:
#container {width: 80%;
}
The other issue I had was with IE6 --- the column backgrounds seemed to continue beyond the bottom of the container. As the ALA article suggested, I put the following code into the style.css file:
* html body {overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff; /* Same as body
background */
}
And then I wrapped the footer in the page.tpl.php file like this:
<div id="footer-wrapper"><div id="footer">
<?php print $footer_message ?>
</div>
</div>
So far, this seems to work.
What bugs me is this: Why put in that bit about the container width? I just don't get it ...
#7
Can someone check these problems with the 5.x version? I'm not seeing any problems.
#8
Well, I take that back: the header block is hiding behind the menu.