Как исправить проблему с макетом CSS в IE6 с помощью Grid 960 и пользовательских стилей

Question

Мне трудно заставить IE6 «хорошо играть» с макетом, который я пытаюсь создать (возможно, он слишком специфичен, и мне придется попробовать другой подход).

Соответствующую страницу можно найти по адресу http://myersprojects.com/uk/en/index.html

Я использую сеточную систему 960.gs, и у меня определено несколько пользовательских стилей (включая условно включенную таблицу стилей для IE6). Если вы изучите центр страницы в Firefox, Chrome или IE8 (еще не тестировали 7), вы увидите макет, которого я пытаюсь достичь, однако в IE6 это, кажется, дает дополнительные отступы и / или отступы справа от изображения вспышки. Я боролся в течение нескольких часов, пытаясь устранить этот дополнительный пробел, но, похоже, я его не преодолеваю, поэтому прошу небольшой помощи:)

Заранее спасибо.

Изменить для примера кода:

HTML

<div id="body" class="container_16 clearfix"> 
    <div class="grid_5 omega"> 
        <div id="options1"> 
            <ul> 
                <li id="web" class="selected"><a href="web_and_digital_projects.php">Web &amp; Digital Project Delivery</a></li> 
                <li id="project""><a href="projects_and_programmes.php">Programme &amp; Project Support</a></li> 
                <li id="itsolution"><a href="it_solutions.php">Web &amp; Digital Project Delivery</a></li> 
            </ul> 
        </div> 
    </div> 
    <div class="grid_6 alpha omega"> 
        <div id="slide"> 
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="378" height="248" id="FlashID" title="Myers Projects Introduction Movie"> 
              <param name="movie" value="img/swf/test.swf" /> 
              <param name="quality" value="high" /> 
              <param name="wmode" value="opaque" /> 
              <param name="swfversion" value="6.0.65.0" /> 
              <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --> 
              <param name="expressinstall" value="/uk/en/Scripts/expressInstall.swf" /> 
              <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> 
              <!--[if !IE]>--> 
              <object type="application/x-shockwave-flash" data="img/swf/test.swf" width="378" height="248"> 
                <!--<![endif]--> 
                <param name="quality" value="high" /> 
                <param name="wmode" value="opaque" /> 
                <param name="swfversion" value="6.0.65.0" /> 
                <param name="expressinstall" value="/uk/en/Scripts/expressInstall.swf" /> 
                <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> 
                <div> 
                  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> 
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> 
              </div> 
                <!--[if !IE]>--> 
            </object> 
              <!--<![endif]--> 
          </object> 
      </div> 
    </div> 
    <div class="grid_5"> 
        <div id="options2"> 
            <ul> 
                <li id="change" class="selected"><a href="enterprise_change_and_risk_management.php">Enterprise Change &amp; Risk Management</a></li> 
                <li id="it""><a href="strategic_it_management.php">Strategic IT Management</a></li> 
                <li id="training"><a href="training_and_resource_provision.php">Training &amp; Resource Provision</a></li> 
            </ul> 
        </div> 
    </div> 
</div> 

И CSS

#options1 ul, #options2 ul {
list-style: none outside none;
margin: 0;
padding:  0;    

}

options1 li, # options2 ul {

margin: 0;
padding: 0;
text-indent: -9999px;   

}

options1 a, # options2 a {

фон-повторить: не повторять; Дисплей: блок; плыть налево; высота: 82px; ширина: 280 пикселей; Фоновое изображение: URL ( "../ IMG / шаблон / tabs.png");
}

options1 #web a {

border-bottom: 1px solid white;
background-position: 0px 0px;

}

options1 li # web a: hover, # options1 li # web.active a {

background-position: 0px -249px;    

}

options1 #project a {

border-bottom: 1px solid white;
background-position: 0px -83px;

}

options1 li # project a: hover, # options1 li # project.active a {

background-position: 0px -332px;    

}

options1 #itsolution a {

background-position: 0px -166px;

}

options1 li # itsolution a: hover, # options1 li # itsolution.active a {

background-position: 0px -416px;    

}

options2 # change {

border-bottom: 1px solid white; 
background-position: -281px 0px;

}

options2 li # change a: hover, # options1 li # change.active a {

background-position: -281px -249px;

}

options2 #it {{1070 * border-bottom: 1px solid white; background-position: -281px -83px; } options2 li # it a: hover, # options1 li # it.active a {

background-position: -281px -332px;

}

options2 # обучение {

background-position: -281px -166px;

}

options2 li # training a: hover, # options1 li # training.active a {

background-position: -281px -416px;

}

слайд {

height: 248px;
width: 378px;
background-color: #c2e2fa;
border-left: 1px solid white;
border-right: 1px solid white;

}

Условное CSS-содержимое IE6

#options1 a, #options2 a {
border: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
height: 82px;
clear: both;
display: inline;

}

слайд {

display: inline;
border: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
background-color: #c2e2fa;  

}

слайд {

\width: 328px;
w\idth: 328px;

}

options1, # options2, # options1 ul, # options2 ul {

overflow: hidden;
display: inline;
float: left;

}

Answer 1

Может быть IE6 Двойная ошибка ?

Существует множество ссылок, если вы гуглите этот термин, но это похоже на вероятного виновника из того, что вы описали.