New Ruthsarian CSS Layout

[shim]

I'm redesigning my site Import Rival. I am using the Ruthsarian/Skidoo 3 column fluid layout.

When I view through Netscape 6, the columns are fine.

When I view through Internet Explorer 5, all columns are fine, as long as I use TEXT in them.

However, when I use the photolog(weblog) tag in the 3rd column, instead of using text, the 2nd column content get pushed down.

I'm not getting any error messages regarding this when I turn the debug on.

Although the author of the template says that the code will not validate, I've also tried to eliminate the errors I've made.

Is it possible for the pics to be too large for IE without appearing visually so?

This is from a post I found by the Ruthsarian author:

> Any particular reason why box model hacks are used so much? Is it just
> preference?
>
> Usually what I do to get around IE's box model problems is doubling up
> key blocks. Example:
>
> <div id="masthead">
> <div class="inside">
> ... content ...
> </div>
> </div>
>
> with CSS looking like this:
>
> #masthead { width: 740px; }
> #masthead .inside { padding: 1em; }
>
> The idea is that the outer block has the width you want and any padding
> you need on the element is provided by the inside element. This is what
> I use in my layouts, which you can see at
> http://webhost.bridgew.edu/etribou/layouts/.
>
> The really big advantage here is the use of fewer hacks (if any) in your
> layout. That means less chance of some of the more obscure or newer,
> future browsers from being caught up in the hacks and destroying the
> layout.
>
> The disadvantage is the redundant markup. But if you approach the layout
> the right way, it might not have to be so redundant.

What am I missing?

[Blue Cat Buxton]

Dont know if this is to do with it but on IE if you make the screen narrower (ie shrink the window it is in) the pictures jump out of the right hand column and sort of sit 3/4 of the way accross the screen.

[shim]

Originally Posted by Blue Cat Buxton

Dont know if this is to do with it but on IE if you make the screen narrower (ie shrink the window it is in) the pictures jump out of the right hand column and sort of sit 3/4 of the way accross the screen.

Thanks for the response. No, I didn't shrink the IE window. What version of IE did you use when you looked at it?

[Blue Cat Buxton]

Sorry, for clarification, by shrink, I meant - if the person looking at that page makes the viewing window smaller - rather than you as the designer.

Im using IE6 with a small monitor 15", which is possibly how I noticed the 'shrink effect'

[Chris]

Is that layout free to use?

[Blue Cat Buxton]

It says on the bottom of the page

© Nobody. All CSS/HTML is released into the public domain.

It is rather nice layout - I had bookmarked it for later use....

[James]

So do I.
There is also an article on A List Apart, Creating Liquid Layouts With Negative Margins which could be of use.

Too bad we still have to use these layouts until the release of CSS3, which will allow columns, as are used in Table-based layouts. Effective way to make people want to switch to purely CSS-styled layotus, eh? (yay for CSS)

[shim]

Originally Posted by Blue Cat Buxton

It says on the bottom of the page
it is rather nice layout - I had bookmarked it for later use....

Yet, I was really surprise that it's in the public domain. The author also has a variation called gargoyle that's pretty cool.
skidoo


Ok. The right column was too small, according to IE

The problem was solved by changing the right column from ems to pixels (because this is how my pics are defined) and by making the column wider.


Now, I'm playing around with color schemes. What do you think of this orange, light orange, dark blue color scheme?


My target audience is males, 16-24, who are interested in modifying their import cars. (ie. 'The Fast and the Furious') for lack of a better example

I would like to hear all opinions before the revised site 'go live.'

Btw, the logo, banner, and top nav buttons have not been revised yet.

[Percept]

The best way to find find the real problem is adding a 1px solid black border to the element(s) which are involved (in this case the column and the image), that way you can easely see what's going on

It seems your page is offline so I can't check the code but I'm guessing there's some padding/margin on the image you are trying to include. (add the border to check)

[dvduval]

I really like these layouts. Are there any other good public domain css layout sites?

[r2d2]

This guy is very good: http://www.pmob.co.uk/

[James]

Ah yes, Paul O'Brian. He's the man--though I'm suprised he hasn't redesigned the site already.

[r2d2]

Hehe, yeah - dont be put off by the design of the site, or the sometimes dodgy colored examples he has, the CSS underneath is top notch.