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

[jwhittlestone]

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 (http://www.getmintedmax.com/spg/general/jscript/main.css)

1. First file - Casino page (http://www.getmintedmax.com/dpg/casino/)

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 (http://www.getmintedmax.com/dpg/promotions/)

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.

Blondina- Cashcade :)

[chreo]

I had a similar problem and I use this, found in the forum:
<link rel="stylesheet" href="fx.css" type="text/css">
<!--[if IE]> <link rel="stylesheet" href="IE.css" type="text/css" /> <![endif]--></head>
Bill Powers who gave me the code had this to say:
"supply IE/Win with an additional stylesheet that has just the IE-specific CSS rules for those bits you're having trouble with in IE/Win.

So long as you place the conditional comments with the IE/Win stylesheet after the default stylesheet, IE will read the second stylesheet and overrule identical rules from the default stylesheet."
My own ie.css only contains this:
#box1 {
height: 100%;
}
#box3 {
margin: 1em;
width: 200px;
} my divs have peculiar names right now, I'm making it as easy as possible to see what is what while I'm learning.
Hope it helps. And as so many say, code for Firefox and other modern browsers first, then give IE extra instructions.