Comments on: CSS issues: need help with box model hacks

Question: CSS issues: need help with box model hacks

aladfar — Sun, 22 Aug 2004 19:34:07 -0800

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.

By: rhyax

rhyax — Sun, 22 Aug 2004 19:50:14 -0800

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.

By: aladfar

aladfar — Sun, 22 Aug 2004 19:54:26 -0800

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.

By: gramcracker

gramcracker — Sun, 22 Aug 2004 20:10:18 -0800

Looks fine in Win Firefox .9 and IE6...

By: amberglow

amberglow — Sun, 22 Aug 2004 20:45:05 -0800

(It looks really great in Safari, if that's any consolation, and Opera too)

By: aladfar

aladfar — Sun, 22 Aug 2004 21:03:56 -0800

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.

By: aramaic

aramaic — Sun, 22 Aug 2004 21:25:12 -0800

Couldn't you hack a browser-detect script, and feed IE5/Win a table version? OK, it wouldn't be elegant, but....

By: nakedcodemonkey

nakedcodemonkey — Sun, 22 Aug 2004 21:25:38 -0800

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.

By: nakedcodemonkey

nakedcodemonkey — Sun, 22 Aug 2004 21:29:18 -0800

Re: lack of Windows system, ieCapture is sometimes helpful (when available--it's been overloaded a lot lately)

By: madman

madman — Sun, 22 Aug 2004 22:14:14 -0800

Get any old browser for testing from the wonderful browser archive at evolt.org

By: taz

taz — Mon, 23 Aug 2004 02:29:07 -0800

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.

By: yerfatma

yerfatma — Mon, 23 Aug 2004 06:13:40 -0800

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.

By: codger

codger — Mon, 23 Aug 2004 07:40:27 -0800

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.

By: erratic frog

erratic frog — Mon, 23 Aug 2004 08:55:50 -0800

Looks great in standard IE 6 on Windows XP. :)

By: aladfar

aladfar — Mon, 23 Aug 2004 09:40:50 -0800

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.