Cletus Kasady Redesign

[Kurashu]

I'm working on a site for a friend's band. He did a pretty good job on the original site, but he used a table (just one) for the layout (=O). So I did some handy work and got rid of it while keep to the original design as much as possible.

So tell me what you think:

Old SIte (http://www.keepthembleeding.net/cletuskasady/new/news.php)
New Site (http://dev.greenbomber.com/cletus/)

Edit: I fixed the bug by floating #content

And on a side not: IE supports overflow: auto?

[hemebond]

What happens in IE and Opera if you remove the margin-left from #content?

[Kurashu]

If I take out the margin, IE and Moz are just fine but Opera breaks. If I add the margin, IE and Opera are fine but Mozilla breaks. If I add padding-left instead of margin-left, IE and Mozilla break. I have found that Mozilla likes margin/padding-right: 41px, but the other two hate it.

I need to find a middle ground.

Here are screenshots of the various browsers, I've set a white border on the left side of #content to show where it begins.

Plain (No margin or padding CSS Rules):
Mozilla (http://dev.greenbomber.com/cletus/imgs/shots/plain-moz.png)
IE (http://dev.greenbomber.com/cletus/imgs/shots/plain-ie.png)
Opera (http://dev.greenbomber.com/cletus/imgs/shots/plain-opera.png)

Margin-left: 226px;

Mozilla (http://dev.greenbomber.com/cletus/imgs/shots/marg-left-moz.png)
IE (http://dev.greenbomber.com/cletus/imgs/shots/marg-left-ie.png)
Opera (http://dev.greenbomber.com/cletus/imgs/shots/marg-left-opera.png)

Padding-left: 226px;

Mozilla (http://dev.greenbomber.com/cletus/imgs/shots/padding-left-moz.png)
IE (http://dev.greenbomber.com/cletus/imgs/shots/padding-left-ie.png)
Opera (http://dev.greenbomber.com/cletus/imgs/shots/padding-left-opera.png)

Margin-right/padding-right: 41px; (only difference is that in Margin, the scroll bar moves to the left 41px)

Mozilla (http://dev.greenbomber.com/cletus/imgs/shots/padding-right-moz.png) (In all honesty, I like this look the best. Scrollbar wise that is. >_>)
IE (http://dev.greenbomber.com/cletus/imgs/shots/padding-right-ie.png)
Opera (http://dev.greenbomber.com/cletus/imgs/shots/padding-right-opera.png)

I think I need a way for Opera to see a rule that the other two can't. Any suggestions.

[NancyJ]

you might be working on it at the mo but this is what I see in FF.

In both IE and FF you need more padding on the right next to the scroll bar.

[Kurashu]

Mozilla and Firefox render it the same, and I haven't changed the CSS on the page that up right now; I've been working on it on my computer.

Edit: I fixed the bug by floating #content