Question

I have a problem with my CSS. Everything is working fine in modern browsers like FF, chrome, IE9 and IE8. Now the problem is happening on IE6 (of course) and IE7.

I would say 80% of my css is ignored in those two browsers. For information im using a HTML5 doctype.

For exemple:

<div id="bgVideoContainer">
    <div class="borderTop"></div>
    <div id="content">
        <div class="boxes fleft">

And css:

.borderTop {
       position: relative;
       top: 0;
       border-top: 1px solid black;
 }

.boxes {
        margin: 0 0 15px;
        padding: 0 25px;
        width: 924px;
 }

.fleft { float:left; }

And a lot of this structure:

<div id="videoCanvas">
    <div class="column-left">
        <object id="videoContainer"

#videoCanvas .column-left #videoContainer {
        width:600px;
        height:473px;
        background-color:#000;
        color:#fff;
 }

And none of this is showing on IE7 and 6 …. Im confused, what should I do to fix that ??

Answer 1

You can do something like this

You can create a separate style sheets for IE6 and 7. And use the necessary .css classes to those style sheets.

Use developer tool in IE browser (ctrl + F12) and edit the classes accordingly

eg.

<!--[if IE 7]>
    <link href="IE-7.css" rel="stylesheet" type="text/css">
<![endif]-->