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…


10 thoughts on “Skidoo Redux

  1. 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

  2. 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.

  3. 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.

  4. 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!

  5. 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.



  6. Interesting work. Does the multiple column option within the center column that was introduced in Tank also work in this revised layout?

  7. 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?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s