Baseline left column blog skin complete!
Friday, 20. April 2007, 13:33:48
This is it: fully functioning on all pages (or at least, all the pages I use)
baseline_leftcolumn_blog.css
That file is the template on which this blog will be based - though the 'live' copy will likely see many changes from that baseline as I add images and more 'lively' styling. I am hoping to recycle elements of a skin I designed for one of my clients, but discarded when we changed gears two weeks before deployment (out of three months work) to make the page look like one of their products.
Works in IE6, 7, Opera, Firefox and Safari. COMPLETELY broken in IE 5.x, and being that's a browser base pushing close to a decade old, I have ZERO plans to support that. If you use IE 5.x or 'need' to support it, how about you get something made in THIS century. 99% of the world has dropped support for NN4 - it's time for IE 5.x to get the axe too.
The columns in this version are generated kind of wonky... Because there's zero access to the html you have to do some 'tricks' to put the menu in the sidebar alongside the content that's normally a right column.
The technique I chose this time out is a left/right/left float model. The menu is floating left, the content is floating right and stacked upon it, and the normally 'right' column is floated left, riding it up flush under the menu.
While this works fine in the majority of supported browsers, IE6 being in stuck quirks mode (thanks to that pesky <?xml> declaration in the html) is unable to generate a dynamic width float using the 'normal' trick. If you use the box-model hacks the bottom part of the column will not ride up alongside our float. To fix this, we have to declare the width of our content area, so using the * html hack I'm sending IE a 760 pixel wide version of the site (800x600 friendly) while RoW (rest of world) gets the dynamic version.
Should you want to change to a fixed width for other browsers, I suggest uncommenting the max-width declaration in #wrap1 to constrain the max width, without actually forcing it to the 'crappy little stripe' like we're sending IE.
The columns are styled using a technique known as 'faux columns' in wrap2 (left column) and wrap3 (right column). Your images or background-colors should be applied there - be warned I had to use borders to get the spacing between elements like posts to work cross browser because of quirks mode, so applying image backgrounds to the columns may not be entirely predictable.
On a side note - I have NEVER had to resort to so many hacks in a layout before, but then I almost never skin something without access to the HTML or when stuck in quirks mode for IE. This **** is embarrassing.
If you have any questions, or find anything broken with this layout, please let me know.
baseline_leftcolumn_blog.css
That file is the template on which this blog will be based - though the 'live' copy will likely see many changes from that baseline as I add images and more 'lively' styling. I am hoping to recycle elements of a skin I designed for one of my clients, but discarded when we changed gears two weeks before deployment (out of three months work) to make the page look like one of their products.
Works in IE6, 7, Opera, Firefox and Safari. COMPLETELY broken in IE 5.x, and being that's a browser base pushing close to a decade old, I have ZERO plans to support that. If you use IE 5.x or 'need' to support it, how about you get something made in THIS century. 99% of the world has dropped support for NN4 - it's time for IE 5.x to get the axe too.
The columns in this version are generated kind of wonky... Because there's zero access to the html you have to do some 'tricks' to put the menu in the sidebar alongside the content that's normally a right column.
The technique I chose this time out is a left/right/left float model. The menu is floating left, the content is floating right and stacked upon it, and the normally 'right' column is floated left, riding it up flush under the menu.
While this works fine in the majority of supported browsers, IE6 being in stuck quirks mode (thanks to that pesky <?xml> declaration in the html) is unable to generate a dynamic width float using the 'normal' trick. If you use the box-model hacks the bottom part of the column will not ride up alongside our float. To fix this, we have to declare the width of our content area, so using the * html hack I'm sending IE a 760 pixel wide version of the site (800x600 friendly) while RoW (rest of world) gets the dynamic version.
Should you want to change to a fixed width for other browsers, I suggest uncommenting the max-width declaration in #wrap1 to constrain the max width, without actually forcing it to the 'crappy little stripe' like we're sending IE.
The columns are styled using a technique known as 'faux columns' in wrap2 (left column) and wrap3 (right column). Your images or background-colors should be applied there - be warned I had to use borders to get the spacing between elements like posts to work cross browser because of quirks mode, so applying image backgrounds to the columns may not be entirely predictable.
On a side note - I have NEVER had to resort to so many hacks in a layout before, but then I almost never skin something without access to the HTML or when stuck in quirks mode for IE. This **** is embarrassing.
If you have any questions, or find anything broken with this layout, please let me know.
You must be logged in to write a comment. if you're not a registered member, please 
By AyushJ, # 21. April 2007, 00:20:09