Safari is working as the layout is intended with one small rendering issue. It seems when the page is loaded with content taller than the height of the window, a gutter of about 1em (perhaps the height needed for a horizontal scrollbar?) appears on the bottom-layer color mask. When you manually resize the window, this gutter space disappears.
Anyone know about such a Safari bug? I’ve seen similar under IE5 and usually that called for either position:relative or holly hack.
Work on the 2col.colors site is moving along. IE5/Mac is now displaying the site almost as intended. A horizontal scrollbar is being displayed and I’ve yet to track down what’s causing that.
Safari is baffling me. It displays the layout as expected, except the bottom-layer color mask has about a 1em tall margin at the very bottom of the page. This breaks the illusion a bit. I’ve yet to track this bug down as well. I spent a lot of time on Friday trying to track this one down. I’ll have to take another look at it this week and see if perhaps a fresh mind can give me a better perspective on the problem.
A big thanks to Dave who, in a comment attached to my previous post, mentioned that FireFox 0.8 on Linux works with the layout fine but that Konqueror has some issues. I usually work with a Gnome-based desktop for Linux which uses the Mozilla-based Epiphany.
I’ll have to get a copy of Konqueror installed on my linux machine and play around with the layout to see what I can do. Thanks for the heads up, Dave.
I’m always looking for suggestions, tips, and comments on these layouts. Especially any tips that might offer a solution to any of the bugs I’m finding with this new 2col.colors layout. So please feel free to post any thoughts you have.
Thanks!
The beta layout I’ve been working on is coming along. No background images used to create the columns’ background colors. We’re using all CSS. Very cool.
IE6/Win and Mozilla look cherry. IE5/Win and Opera have extra whitespace at the bottom, but considering everything, that’s pretty good. Safari I haven’t tested with the new updates yet, and IE5/Mac just shows a flat file because of how the CSS is being loaded. I’ll get that fixed soon enough.
I’m really looking for feedback on this one. Please add a comment and let me know what thoughts you have.
Getting some progress with the 2col.colors.beta layout. The column background colors are CSS-based and the height of the columns’ content has no impact on the columns.
Also, thanks to Aine for posting a comment. It’s nice to know that someone’s out there.
TODO: try fixing the color mask inside of the pageFrame. lack of height:100% definitions to parent objects may screw up rendering in some browsers, but it’s worth a look as a possible solution for footer placement and open space below the footer.
Now I remember what my problem with the 2col.color.beta layout was. The background color thing works fine unless you want to have a footer that runs the width of the page, on top of those two columns of color, with its own background color.
The problem happens when your browser viewport is taller than the content. The color columns will go the full height of the page while the footer will wind up being rendered say half-way down the viewport. But those colors will pop out below the footer and keep going down.
So the trick is to find a way to put the footer at the bottom of the content OR window, whichever is taller.
Any ideas?
I’m attempting to create a version of the 2col.footer.v5 layout using the background color trick found in 2col.colors.v1 layout.
Going into this I realize browser compatibility may not be as good, so less CSS support (and perhaps hacks) will be used.
The problem I’m currently running into is finding a way to add padding after the footer. What I will probably have to do is add a 2em border to the footer block and create the black border on the footer by having another nested block that has that applied to it.
The work in progress can be seen here.
The navigational elements will be the last thing I add back in because I want to keep the layout simple as I develop the CSS.
Besides the footer issue there is a problem with getting the two color mask columns to line up exactly under IE. Once IE6 is lined up, and the footer padding is in place, I’ll start looking at older versions of IE and find out where I need to hack things up.
Right now Opera 6 and Mozilla seem to handle things just fine.
Back in the day, while setting up MT, I was having some problems and decided, amongst other things, to rename the scripts for MT to .pl extensions as a last-ditch effor to get it working. Well once the MT was working, I forgot to edit the mt config file to revert back to .cgi extensions. Thus the comments link (and search… and everything else) were pointing to .pl rather than .cgi files.
But that’s been fixed.
Busy couple weeks ahead. I’m not sure how much work will be done on the layouts, but then, it went probably 6 months with no updates at all so a couple weeks shouldn’t be a big deal.
I’m still not into using the extended entry bit for MT. Perhaps I should? Feh. Another time, another world…. in an age of wonder?
Several updates to the 2 Column w/Footer v5 layout.
Thanks to a suggestion from Bruno Fassino I’ve used the Holly hack to get the horizonal navigation element to function in IE 5.0 exactly as expected. A few extra bits here and there had to be added to compensate for my use of the case-insensitivity of IE5/Win browsers. Safari is also case-insensitive, so fixes for Safari were added and several instances of the hide from IE5.0 hack were removed now that the :hover event is functioning as expected. Compatibility with this layout is getting better. I have not tested under Opera 5 although I would not be surprised if this layout breaks that version. I may work to further compatibility under IE4, which is poor right now, although the text is readable and the basic layout structure is still there.
The goal of a tableless layout that’s very compatible seems to be within reach, if it isn’t already.
I may brave my next feat, which is to use this trick and the layout I made as a sort of proof-of-concept to get this 2 column layout 100% image free and still support background colors that carry the full height of each column.
Compatibility? HAH! What will most likely happen is if I do make such an attempt is to hide CSS from as many older browsers as possible, making users of those browsers see a dull black on white, flat layout page. This may include IE 5 on the Mac, as the proof-of-concept layout does not currently work on IE5/Mac.
And maybe I’ll go download Opera 5 now and see what the 2col.v5 looks like.
2col_footer.v5 is shaping up well. Fixes are in place, including a textbook example of the Holly hack. I’m not a big fan of setting height to 1%, I much prefer the route of setting a width of 100%. With the div-inside-div approach, I can usually get away with that. However the left-hand nav in 2col_footer.v5 just wasn’t going to work. After putting that in I tested on all platforms available to me and everything seems to work fine.
I did have to include a minor update to get Safari from picking up an IE5.0 hack which caused the layout to break in Safari.
Also added some font fixes to get the left column looking better under NS4. (Everyone needs a hobby).
IE 4 looks horrible, but it’s functional. I’ll have to look into why the horizontal nav isn’t being displayed as such.
Seems applying a height of 100% gets IE to draw and respond to some elements correctly. The vnav links in the left-hand column in the 2col_footer.v5 layout weren’t generating :hover events unless an image was placed within the innerLeftColumn block. Strange. But setting each anchor to a height of 100% fixes it. So does setting a width of 100% but that increases the width too far so that take on the fix isn’t used.
The same height trick seems to work on the horizontal nav area. That was not rendering right under IE 5.5/6 and a position:relative seemed to fix that. But it caused other problems in IE 5.0.
I’ll have to wait until tomorrow before I can completely test this height:100% fix and make sure it doesn’t break under older and different browsers.
The Forgettable Mister Ruthsarian 