CSS Filter: Skew-whiff border/Strange misalignment in Internet Explorer.

August 9, 2006 4:10 AM

CSS Filter: Skew-whiff border/Strange misalignment in Internet Explorer. Please help! I'll be your best friend..

There are two files which display incorrectly in Internet Explorer but are fine in Firefox. I've heard that one before, i hear you cry :( In IE, if you see the bottom right hand corner that is mis-aligned

The css file can be found here: main.css

1. First file - Casino page

It doesn't seem to like the flash IFRAME. I've messed around with margins but no luck. I can't seem to understand why it's OK in firefox. At the end of my tether!

2. Second file - Promotions page

I've taken out everything, and then added stuff one by one. It seems that when you add the first set of paragraph tags. That's when the problem occurs. Again, i tried messing about with margins and padding.

This isn't the box model hack is it? I thought that only applied to IE 5.5.

Thanks soooooooooo much for any light that you can shed on this very frustrating problem.

Jon - Cashcade

posted by jwhittlestone to computers & internet (9 comments total)

To help yourself, and help anyone interested in trying to fix this for you, please try to find the minimum HTML + css that causes the problem.

Start by removing html markup until the last thing you removed removes the problem, then put that last bit back in. Then remove css rules using the same heuristic. This will either make the problem apparent to you, or it will make it faster for the un-compensated answer-Mefites to fix it for you.

This si not intended to be snark or a flame; it standard advice for asking questions like this (and in certain fora, you'll be flamed for not doing so).
posted by orthogonality at 5:01 AM on August 9, 2006

You have some capitalized <p> tags in there. I'm pretty sure some DTD's don't like that. Additionally, your footer is out of alignment slightly even in firefox. I just tend to avoid the padding style like the devil, because it does two entirely different things in explorer and firefox. To be honest, I think explorer does it right (aka not resizing the element, resizing its contents), but hey, who am I?
posted by potch at 7:04 AM on August 9, 2006

Validate your code using the W3C's CSS Validation Service and Markup Validation Service. You have lots of errors in the HTML of your promotions page and casino page; you only have a couple of errors and a bunch of warnings in your CSS, but the margin-right for #tblInstantwin is defined as "0x," which is probably causing some layout problems.
posted by kirkaracha at 7:32 AM on August 9, 2006

Far too many tables. Check your colspans all add up cause that's what it looks like to me... also, are all your div tags closed in the right order?
posted by twistedonion at 8:51 AM on August 9, 2006

line 104 of your code... you haven't closed a td properly. Might be it?
posted by twistedonion at 8:55 AM on August 9, 2006

also... have a look at lines 116-118. What's going on here? you have line breaks within the image tag. after alt="" you go onto a new line for class="corner"
posted by twistedonion at 8:58 AM on August 9, 2006

As noted above: the first step here should be getting both the HTML and CSS to validate. Non-validating markup is treated differently by different browsers.

And to elaborate a bit on what potch says above: IE chokes on the box model, putting paddings and borders inside the div width. FF follows the W3C guidelines, which say that the width of a div is the width of its content, and so padding and borders will be extra. (Or, in other words, in Firefox a box 300px wide with 5px padding and 5px borders will take up 320px of real estate, but in IE it will take up 300px and there will be 280px inside it left for content).

If your design requirements are precise, one workaround is to remove all paddings from divs and to apply them to the elements inside (which is tedious). Another workaround (which I first saw last week) is to declare a class to have those paddings and to class your div by it. I haven't experimented with that one yet but, on the site I saw, the layout looked exactly the same in IE and FF, with all sorts of horizontal paddings and borders (a minor miracle).
posted by Tuwa at 9:15 AM on August 9, 2006 [2 favorites]

to sort out any cross platform padding/margin issues insert this before the body class:

* {padding:0; margin:0;}
posted by twistedonion at 9:21 AM on August 9, 2006 [1 favorite]

thanks all for your comments, i will work on this. cheers

jon
posted by jwhittlestone at 4:43 AM on August 21, 2006