CSS Joy: When the fun wears off, you’re left with a big pain in the nooners trying to make multiple browsers happy. Ultimately had to dig out and boot up a Win box at home — something I haven’t done for close to a year — just to test Explorer/Mac vs. Explorer/Win and to see just where and when that right-nav DIV tag blows up on the Win side. I think I’ve got it smoothed out about as smooth as it’s going to get. If you’re using Explorer and don’t see the right nav, try resizing the window a few pixels – as you can see, the problem is no longer related to content width being incorrectly totalled, but a redraw issue in Explorer.
Have been so busy at work I left this rendering bug hanging in public for more than 24 hours, painful. But no choice. Tomorrow will be worse – haven’t been this stressed at work since before personalStudio launched at Adamation. Literally all coming down at once.
Amazing how subtly different behaviors can have profound ripple effects through a site. Dan (in comments) described my dive into table-free CSS here as a “damn the torpedoes” approach, and that’s pretty accurate. CSS is a both a minefield and a cornucopia. Cross-browser testing becomes even more important than with straight HTML. But in the end, there’s so much good about it that the pain is totally worth it. Time has come to go all CSS. Someone’s got to be first on the dancefloor.
Dan is totally right : I can’t settle on a design because it makes the public happy – please don’t let the polls make you think this is a democracy – it ain’t. I just like taking pulse… and testing polling software. Click on.
You’re absolutely right – the timing is right for going CSS. It’s a snowball effect.
This might help your right div problem — instead of floating both content and right column, you could use absolute positioning on the right column (#container), with a margin-right on #content like this:
#content {
position: relative;
background: #144552;
border-right: 0px dotted #999999;
border-left: 0px dotted #999999;
margin: 0 30% 0 0;
padding: 0 0 20px 0;
}
#container {
position: absolute;
right: 0;
top: 50px;
width: 30%;
background: #144552;
border-left: 0px dotted #999999;
padding: 0;
margin: 0;
}
You just need to play around with the top: 50px; to get it to line up just right — and add whatever padding you’d like for each column.
Hope it helps (maybe you’ve already tried this)
-Dan
Interesting – thanks much for the suggestion. Had not considered doing that way. Will give this a shot after t-day.
Hee hee! Too many Dans! I’ll stick to dsandler from now on. :-)
FWIW, the CSS looks gorgeous in Mozilla (well, really, Phoenix under Windows 2000).