CSS issues: need help with box model hacks

August 22, 2004 7:34 PM

CSS Headaches: Hours into a redesign, everything is looking great in Safari and Firefox - is almost looking right in IE Mac, but is simply not functioning properly on the Windows side. Box model hacks are failing me. [A little more inside]

I'm reluctant to post a link to the site publicly (it's just my portfolio site, but is unfinished at the moment) but if you'd be willing to take a quick look under the hood, please contact me via e-mail. I'll send the link your way.

I'm fairly certain I can figure it out eventually, but what might well take me hours of trial and error may take you but a few minutes - perhaps you've encountered this problem before?

If you can help me get things sorted, you will be thanked publicly and vociferously.

posted by aladfar to Computers & Internet (14 answers total)

I'm unclear what you want answered here.

If you're willing to post this question you may as well link to your site right? I mean seeing as there is no other question. It may or may not be seen as self-linking, but as it stands it's not much fun.
posted by rhyax at 7:50 PM on August 22, 2004

Response by poster: You're probably right rhyax - to be honest, I'm a little embarrassed to admit that I'm not able to figure it out on my own (due in part to the fact that I lack a Windows system). And so, though it's a self link, here goes.
posted by aladfar at 7:54 PM on August 22, 2004

Looks fine in Win Firefox .9 and IE6...
posted by gramcracker at 8:10 PM on August 22, 2004

(It looks really great in Safari, if that's any consolation, and Opera too)
posted by amberglow at 8:45 PM on August 22, 2004

Response by poster: Thanks amber and gramcracker, I appreciate it - I know it works in standards compliant browsers, and IE 6, but I'm hoping to get a little more backwards compatible if possible. I'd like to see it function in IE 5 Win - that's where I'm really pulling my hair out.
posted by aladfar at 9:03 PM on August 22, 2004

Couldn't you hack a browser-detect script, and feed IE5/Win a table version? OK, it wouldn't be elegant, but....
posted by aramaic at 9:25 PM on August 22, 2004

Step 1 for all css debugging: validate the markup, then validate the CSS.

You're missing an opening HTML tag, and in XHTML even br and img elements must be closed. The markup problems might be sending IE back into tag soup mode. Leaving out the charset declaration probably isn't to blame, but if you're not actually using the XHTML default (UFT-8) then specify your real charset.

Step 2: once your markup and CSS are flawless, break it for IE.

Holly and John's site always seem to be able to point me toward the right IE bug. css-d is a good source of leads on the more obscure bugs/interactions. If you're less interested in the whys than in just forcing IE5/Win fixes, then Tantek is the man.

Step 3: bang your head repeatedly into wall. Curse loudly in the direction of Redmond.
posted by nakedcodemonkey at 9:25 PM on August 22, 2004

Re: lack of Windows system, ieCapture is sometimes helpful (when available--it's been overloaded a lot lately)
posted by nakedcodemonkey at 9:29 PM on August 22, 2004

Get any old browser for testing from the wonderful browser archive at evolt.org
posted by madman at 10:14 PM on August 22, 2004

I looked at it in a Win IE5 browser, and the only problem I saw was that it is lining up on the left - is this the problem you are referring to? If so, I think you can handle that this way.
posted by taz at 2:29 AM on August 23, 2004

Honestly, the easiest way to center stuff in IE5 is to put "text-align: center;" on the body and then "text-align: left;" on your outer container element (which is properly centered by setting a fixed width and "margin: 0 auto;"). Easiest way to support IE5 PC is to put IE6 in standards mode (as suggested above) and then put the incorrect box model widths in each element's CSS then follow them up with "w\idth: correct, box-model compliant #" directly after.
posted by yerfatma at 6:13 AM on August 23, 2004

I know it's a sledgehammer solution, but you can use PHP to serve different stylesheets based on user-agent. I used to do this for the exact opposite situation: it rendered properly in all but the compliant browsers.

BTW it looks fine in Opera 7.53/win.
posted by codger at 7:40 AM on August 23, 2004

Looks great in standard IE 6 on Windows XP. :)
posted by erratic frog at 8:55 AM on August 23, 2004

Response by poster: Thanks very much for the testing and advice everyone - I'm going to work on it a bit more today and hope to iron out the remaining kinks. If I can get at least the layout working properly in IE 5, that will suffice.

yerfatma: I'm using a similar box model hack right now, but perhaps your suggestion will allow for better compliance. I'll give it a try and will see how it goes.
posted by aladfar at 9:40 AM on August 23, 2004