IE6-7 "half-targeting" elements

HTML & CSS
1

Hello everybody,

I’m at a complete loss. :rolleyes:

It seems that in IE6 and 7, only some of the css is taken into account, seemingly randomly leaving rules out of the targeting. I do use child selectors here for instance :
http://alarmefast.com/securitasdirect2011/alarme-verisure.php
And I am well aware that IE6 does not support them. But there is no reason for them not to work in IE7.

In the accordion, if you look at the css behind the h2 tags, it is supposed to be supported in both IE6 and IE7, and yet it seems to do some rules well (colored background, bold span.twisted) and ignore some others completely (why in hell doesn’t my second span takes an 12px font-size and get absolutely positioned relatively to the h2 ???)

Same thing on this page :
http://alarmefast.com/securitasdirect2011/monde.php
And this one :
http://alarmefast.com/securitasdirect2011/espace-clients.php
And the footer across all pages etc etc

I do use the html5 shiv and ie7.js, but I’ve disabled both and tried to apply basic style rules and it still doesn’t work.

It’s driving me nuts, and that’s the new corporate website for our company I’m building, can’t exactly afford to have things half-baked…

Thanks for your help guys.
Krimo.

2

IE6/7 won’t properly position elements from parents that don’t have a layout. Give the h2 layout and see if it fixes the problem.


#accordion h2{zoom:1.0}/* or use a dimension if you don't like zoom*/
3

I don’t know if there is a link to it, but, since you’re using html5 and eric’s css reset, you might want to upgrade to v2, since it has smt about html5 elements in it.

At the same time, you have some validation errors: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Falarmefast.com%2Fsecuritasdirect2011%2Falarme-verisure.php&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

4

The other problem is related to the IE filter and I’m seeing more and more of these problems now that people are using the generators to do transformation.

Any rules after the IE filter is being missed possibly because the filter is malformed.

Adding quotes around the filter seems to fix it in your case and the footer and the h2’s are then corrected.


    #accordion h2:hover .twisted {
   -moz-transform: rotate(-5deg);  
     -o-transform: rotate(-5deg);  
-webkit-transform: rotate(-5deg);  
    -ms-transform: rotate(-5deg);  
        transform: rotate(-5deg);  
      [B]     filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455)";[/B]
             zoom: 1;
}

Be aware that any of these complicated IE filters significantly change how a page/elements behaves and are extremely detrimental to performance.

5

Thanks for your answer, Paul.

I’ve tried giving the h2 a width/height/zoom and neither of these methods work.

6

Wow.

Thank you Paul. I can’t believe this was the source of all my problems. I’m gonna go ahead and check all my pages to see if it has solved everything. Thanks a lot for the help.

I think I might just go ahead and remove that pesky filter for it’s just cosmetic. IE7 and below users will have to do without.