Как исправить <ul>в нижнем колонтитуле, которые ломаются в ie8 и ie9, но идеально подходят в ie7, FF, Safari & Chrome - PullRequest
Новая
       20

Как исправить <ul>в нижнем колонтитуле, которые ломаются в ie8 и ie9, но идеально подходят в ie7, FF, Safari & Chrome

0 голосов
/ 28 августа 2011

У меня одна адская головная боль, пытаясь понять это для себя, я научил себя код, который я знаю, так что я вполне мог упустить простую вещь. Но мне очень нужна ваша помощь, и я очень ценю ее.

Я, очевидно, хочу, чтобы мой веб-сайт выглядел одинаково во всех браузерах, и это серьезный беспорядок, с которым я борюсь.

Эту проблему проще объяснить с помощью картинок, так как у меня есть экранная печать от ie9 и ff, чтобы показать вам:

Firefox, Safari, Chrome & IE7

Как выглядят нижний колонтитул и списки в Firefox, Safari, Chrome и IE7

IE9 и IE8 (серый цвет внизу - это фон тела)

Как выглядят нижний колонтитул и списки в IE9 и IE8

Вот HTML: 

<div id="footer">
<div id="columncon">   
    <div class="column"> 
    <h5>From The Blog...</h5>
    <ul>
        <li><a href="#">Blog Post 1<a/></li>
        <li><a href="#">Blog Post 2<a/></li>
        <li><a href="#">Blog Post 3<a/></li>
        <li><a href="#">Blog Post 4<a/></li>
        <li><a href="#">Blog Post 5<a/></li>
    </ul>
    </div>
    <div class="column">
    <h5>Social</h5>
    <ul>
        <li><a href="#">Facebook<a/></li>
        <li><a href="#">Twitter<a/></li>
        <li><a href="#">Google +<a/></li>
        <li><a href="#">RSS Subscribe<a/></li>
        <li><a href="#">E-mail Subscribe<a/></li>
    </ul>
    </div>
    <div class="column">
    <h5>Site Links</h5>
    <ul>
        <li><a href="#">Designer Resources<a/></li>
        <li><a href="#">Submit a T-Shirt<a/></li>
        <li><a href="#">Sitemap<a/></li>
        <li><a href="#">Contact Us<a/></li>
    </ul>   
    </div>      
    <div class="column">    

    <h5>Site Links</h5>
    <ul>
        <li><a href="#">Designer Resources<a/></li>
        <li><a href="#">Submit a T-Shirt<a/></li>
        <li><a href="#">Sitemap<a/></li>
        <li><a href="#">Contact Us<a/></li>
    </ul>   
    </div>
</div>    
<div id="siteinfo">
<p>&copy; 2011 <a href="http://www.tshirtslut.com">TShirtSlut.com</a></p>
</div>

Вот CSS: 

#footer {
background: url(img/footerbg.png) 0 0;
-moz-box-shadow: 0 0px 10px #000;
-webkit-box-shadow: 0 0px 10px #000;
box-shadow: 0 0 10px #000;
height:200px;
position:relative;
clear:both;
}   
#columncon {
width:1000px;
margin:0 auto;
}   
.column {
float:left;
padding: 30px 25px 20px;
width: 200px;
}
.column ul {
    list-style:none;
}
    .column ul li {
        padding:2px 0;
    }
        .column ul li a{
            text-decoration:none;
            color:#fff;
            font-size:12px;
        }
        .column ul li a:hover{
            color:#49E20E;
        }
.column h5 {
    padding-bottom:10px;
    border-bottom:1px solid #fff;
    color:#fff; text-shadow: black 0.1em 0.1em 0.2em;
    font-weight:bold;
    font-size:14px;
           }
   #siteinfo {
   text-align:center;
width:100%;
margin:auto;
position:absolute;
bottom:0;
color:#fff;
font-size:12px; 
    }
#siteinfo a {
    text-decoration:none;
    color:#fff;
}
#siteinfo a:hover {
    color:#49E20E;
    text-decoration:none;
}

(видимо, я не самый лучший в вставке кода XD)

Еще раз, я действительно буду признателен, кто бы ни поставил эту проблему в контекст для меня, и позволю мне решить эту проблему.

Если вам нужен больше код или информация, пожалуйста, спросите, и я сразу же к ней вернусь.

Спасибо,

Mike

ОБНОВЛЕНИЕ: я исправил якорные теги, чтобы они валидировались, но у меня все еще остается двойной нижний колонтитул, а заголовок первого списка все еще остается в «двойном» нижнем колонтитуле. Пожалуйста, следуйте URL для изображения:

- http://tshirtslut.com/ie%28partially%20fixed%29.jpg--

1 Ответ

1 голос
/ 28 августа 2011

Ваш html недействителен.Заменить все <a/> на </a>.Ваша проблема решена сейчас?

...