Display unnormal under IE7? how to correct it?

HTML & CSS
1

the whole page:

GoDaddy

the tab part under the video.

the following screenshot is the unnormal part which is under IE7 .but OK under FF,chrome.

SitePoint Forums: Resources, Design, HTML, CSS, PHP, ASP, MySQL and more for your web site.

the one part isn’t filled with #ffffff under iE7.

the two part outside the box under IE7. how to make them shows ok under IE7. thank you.

2

Hi,

It’s this malformed rule that is corrupting IE7.


.node-body ul li,
{
      padding-left: 20px;
    padding-right: 18px;
}

The padding above is being placed on the list and breaking the design. Either remove that rule above or over-ride it with this:


ul.videotabs li {padding:0!important}
3

you’re my hero! it’s ok. how did you know the unnormal part is caused by

.node-body ul li,
{
padding-left: 20px;
padding-right: 18px;
}

why it’s ok under FF,chrome.many thanks/

4

The rule has a parse error due to the trailing comma and thw whole rule should be ignored but IE’s error handling isn’t so clever and applies the first part of the rule when it should have ignored it all.

Run your code through the w3c validators (css and html) and you will pick these errors up easily.:slight_smile:

5
Off Topic:

There must be someone at MS who’s in charge of “being fussy about trailing commas,” because the same thing crops up in Javascript. FF and Chrome happily ignore unnecessary trailing commas in certain contexts, but IE chokes on them in weird and unpredictable ways!