CSS Filter: Skew-whiff border/Strange misalignment in Internet Explorer.
August 9, 2006 4:10 AM Subscribe
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
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
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
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
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
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
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
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]
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]
* {padding:0; margin:0;}
posted by twistedonion at 9:21 AM on August 9, 2006 [1 favorite]
Response by poster: thanks all for your comments, i will work on this. cheers
jon
posted by jwhittlestone at 4:43 AM on August 21, 2006
jon
posted by jwhittlestone at 4:43 AM on August 21, 2006
This thread is closed to new comments.
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