February 16, 2007

Skidoo Redux

Skidoo Redux is the latest Skidoo derivative. It came about when I attempted to update Skidoo to work with IE7 (a few minor bugs here and there). In the process of cracking down on the bugs I became frustrated with how other browser hacks in the old Skidoo stylesheets were too embedded. It was hard to get a handle on what hack did what and why I had put them in there in the first place.

The final straw was when I found an ugly horizontal scrolling bug in all previous Skidoo layouts under IE/Win 5.0. I decided to start over from scratch.

The CSS is commented to the point of insanity. It's probably 25% CSS, 75% comment. In it I try to detail every rule, why it's there, how the hack works (if the rule is a hack) and I did my best to target specific browsers so hacks wouldn't be applied in browsers they were not intended.

I also took the time to write a bit about why these float-based layouts can cause headaches, specifically with elements dropping down to the bottom of the page. Hopefully this will clear up some of the confusion about these layouts that seem to be the source of most of the e-mail I receive.

It is, by far, the most compatible layout I've created to date. There is no Netscape 4 support, it simply renders as a plain page with just text and no layout, but some might call that Netscape 4 support.

I've purposely stuck with shades of gray for my various background colors in the hopes that it will get others who use the layout to change the color. I've seen a lot of skidoo and skidoo too sites out there that stick with the default color scheme and it's starting to get to me.

The layout is very skinnable! And I plan to prove it...

Posted by Ruthsarian at 03:09 PM | Comments (10)

Comments

Help! I've implemented Skidoo in my project, but I have an unusual element in the center column that seems to break in IE. For the life of me, I can't figure out how to make this function work in IE, but I have to figure something out. I have a horizontal menu of the alphabet from A to Z as a series of inline links. This and the items that fall below it just render terribly in IE7 and MacIE5.2. I can't find help for this horizontal-menu-within-Skidoo anywhere else. Is there an easy fix that you can see? Help! -- Steve Posted by: Steve at February 18, 2007 05:31 AM
By the way, here's the link: http://agateworkshop.com/~project19/index15 Posted by: Steve at February 18, 2007 05:32 AM
Can't get redux to work in VS2005, no columns, nor boxes are showing - the layout is loaded though, but I don't know what to do. Compiled page shows as expected, its only the visual dev.area that doesn't. /Peter Posted by: Peter Stromblad at February 21, 2007 05:56 PM
Found it, at the top of the css you have: @charset, remove this line and it almost works. Columns etc. are shown, but acc. to source order content is moved horisontally to the bottom most position of previous column content. Posted by: Peter Stromblad at February 21, 2007 06:03 PM
VS2005, overlapping widths: remove #source-order-container margin-right: -1px etc all overlaps, and it shows just as expected. Tested as well in ie7 and firefox 2 and works there too. Thanks for your excellent layouts! Posted by: Peter Stromblad at February 21, 2007 06:16 PM
The @charset rule is required for valid CSS. I'm guessing VS doesn't know what it means. Posted by: Ruthsarian at February 22, 2007 09:31 AM
Hi R. I'm in the process now of 'upgrading' my not-for-profit website from Skidoo Too to Redux, and I have to say thanks. It looks great, it works well, and it saves me from reinventing the wheel (and doing it badly too). I thought I knew CSS until I started looking at yours in-depth, and then I realised my knowledge is but the tip of the iceberg. However, I am still learning thanks to you! For every person who drops you a line saying thanks, there are probably 10 using your designs who don't. Thanks, and I can't wait to see what you do with Gargoyles, Tank, rMenus et al in the future. Regards, T-P. Posted by: Tenacious P/ at March 9, 2007 07:42 AM
Interesting work. Does the multiple column option within the center column that was introduced in Tank also work in this revised layout? Posted by: Tim Johnson at April 1, 2007 05:41 PM
Many thanks for all your work on this layout - as a newcomer to css I'm using it to learn the structure of a fluid css site. But i have a problem trying to add a tiled background image to page. I have included a body tag with declaration background-image: url("back.gif") to the skidoo_redux_theme.css file, but it doesnt render in Firefox or IE. I haven't modified anything else in the html or css files. Funnily enough, it does render when i click the editCSS button in Firefox Web Developer addon. Can anyone tell me what I'm doing wrong? Thanks. Posted by: scagnetti at April 19, 2007 10:06 AM
Apologies for dumb question above... I'm now an expert on setting the right path for a background image.... Posted by: scagnetti at April 20, 2007 03:01 PM

Post a comment










Code:
Type Code:

Remember personal info?