IE отображает поплавки неправильно - PullRequest
Новая
       18

IE отображает поплавки неправильно

2 голосов
/ 12 сентября 2011

Мой веб-сайт в настоящее время разбивается на несколько страниц в ie7, ie8 и ie9, и, разумеется, в каждом браузере он разбивается по-разному. Я пытался понять это часами и ничего не имею.

Проблема в ie7-8 заключается в том, что мои различные элементы плавают неправильно, я верю, но я не совсем уверен.

Вот некоторые скриншоты

Вот ссылка на тестовую страницу: тестовый сайт

А вот и код: 

<?php include("includes/header.html");?>

    <div id="content">      
        <div id="toolbar" class="dropshadow" style="background-color: #181818">
            <h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
            <h2 class="header2">Buyers Tools:<h2>
            <hr noshade color = "#373737"/>

            <ul>
                <li>
                    <a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)">
                        <img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/>
                                <h3>Our Vehicles</h3>
                        </a>
                    </li>
                <li>
                    <a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)">
                        <img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" />
                            <h3>Shipping</h3>
                        </a>
                    </li>
                <li>
                    <a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)">
                        <img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" />
                                <h3>Financing</h3>
                            </a>
                    </li>
                <li>
                    <a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)">
                        <img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" />
                                    <h3>Insurance</h3>
                                </a>
                    </li>    
                <li>
                    <a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)">
                        <img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" />
                            <h3>Auto Locator</h3>
                        </a>
                    </li>
                </ul>
            </div>

        <div id="searchbox" class="dropshadow">


            </div>

        <div id="advsearch" class="dropshadow">

                </div>




        <div id="links" class="dropshadow" style="background-color: #181818">

            </div>


        </div>
    </div>                   
        <div id="bannerads" class="dropshadow">
            </div>

Вот CSS лист, специфичный для этой страницы. Если вам нужна главная страница сайта, я могу достать ее для вас, но эта таблица стилей отлично работает на других страницах, поэтому я считаю, что проблема здесь. 

@charset "utf-8";
/* CSS Document */

#bannerads{
    margin: 9px 0px 5px 6px;
    float: left;
    width: 728px;
    height: 90px;
    padding: 6px 128px;

    background-color: #e9e7e4;
}
#toolbar{
    float: left;
    width: 984px;    
    height: 150px;
    position: relative;
    z-index: 1;
    margin: 0px 6px 0px 6px;
    background-color: #181818;
    background-image: url(../images/toolbar.png);
    background-position:right top;
    background-repeat:no-repeat;
}
#toolbar hr{
    float: left;
    width: 600px;
    margin: 4px 300px 0px 30px
}
#toolbar ul{
    list-style:none;
    padding:0;
}
#toolbar li{
    float: left;
    margin: 10px 0px 0px 31px;
}
#toolbar a{
    color: #e9e7e4;

}
#toolbar a:hover{
    color:#e9e7e4;
    text-decoration:underline;  
}
#searchbox{
    float: left;
    clear: both;
    width: 446px;
    height: 402px;
    background-color: #e9e7e4;
    margin: 9px 6px 0px 6px;
    padding: 10px 20px 10px 20px;
}
#toolbar li h3{
    color: #e9e7e4;
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 10px;
    text-align:center;
}
#advsearch{
    float: left;
    width: 446px;
    height: 242px;
    background-color: #e9e7e4;
    margin: 9px 6px 0px 6px;
    padding: 10px 20px 10px 20px;
}

#links{
    float: left;
    width: 446px;
    height: 132px;
    background-color: #181818;
    margin: 8px 6px 0px 6px;
    padding: 10px 20px 10px 20px;
}
#arrow{
    margin-left:-93px;
    width: 68px;
    height: 135px;
    float: left;
    position: relative;
}
.header1{
    color: #e9e7e4;
    font-size: 28px;
    margin: 8px 0px 0px 30px;
    float: left;

}
.header2{
    color: #e9e7e4;
    font-size: 16px;
    float:left;
    margin: 22px 0px 0px 220px;
}

#showinvheader{
    color: #e9e7e4;
    font-size: 14px;
    margin-bottom: -2px;
    text-align:center;
}

Наконец, вот лист css, который я использую для совместимости, например: 

/* CSS Document */

.Navigation{
    border: solid #181818 1px;
    margin: -15px 5px 0px 5px;
}
.bigbox{
    border: solid #181818 1px;
    margin: 7px 5px 0px 5px;
}
.smallbox{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
}
#banner{
    border: solid #181818 1px;
    margin: -1px 5px 0px 5px;
}
#headerimg{
    border: solid #181818 1px;
    margin: -1px 5px 0px 5px;
}
#contentbox{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#bannerads{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#bannerads2{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#toolbar{
    border: solid #181818 1px;
    margin: -1px 5px 0px 5px;
}
#featured{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#searchbox{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#advsearch{
    border: solid #aaa 1px;
    margin: 7px 5px 0px 5px;
    }
#links{
    border: solid #181818 1px;
    margin: 7px 5px 0px 5px;
    }

Ответы [ 2 ]

2 голосов
/ 12 сентября 2011

Ну, для начала, ваш X-UA-совместимый заголовок испорчен. У вас там странное значение quot;. Это, вероятно, мешает более новым версиям отображать как IE7. Однако вам, вероятно, следует просто всегда выполнять рендеринг в стандартном режиме и вносить незначительные изменения в каждый браузер, используя условные комментарии.

Если вы должны использовать x-ua-совместимый, то вы должны сделать это как заголовок http, а не как метатег. PHP позволяет добавлять заголовки до того, как он начнет записывать данные клиенту. Добавьте туда заголовок.

При дальнейшем рассмотрении, ваш код ... Дерьмо. У него 180+ ошибок проверки, включая такие вещи, как помещение элементов уровня блока в элементы заголовка. Я бы посоветовал сделать ваш HTML-код проверяющим прежде, чем что-либо еще, поскольку неверный код - это причина № 1 для того, чтобы вещи отображались по-разному в разных браузерах.

http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php

0 голосов
/ 12 сентября 2011

Хорошо, прости, что я так долго писал это ...

Причиной сбоя кода было то, что тег заголовка не закрылся. 

 <h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
            <h2 class="header2">Buyers Tools:<h2>

Итак, если у вас возникла подобная проблема, убедитесь, что все ваши теги закрыты.

...