Jump to content

Internet Explorer - извечная проблема при верстке


Recommended Posts

При создании интернет-магазина на PrestaShop столкнулся с проблемой кривого отображения в браузере Internet Explorer. При этом, в остальных браузерах проблем не наблюдается.
Вот адрес магазина - http://miksi.info
За основу взял бесплатную тему Christmasprestashop.
Проблема возникает в футере. В Хроме и Файрфоксе блок ссылок расположен внизу блока футера по центру, как и положено. Но в IE он, почему-то, сползает вправо и выходит за границы страницы, из-за чего появляется горизонтальная полоса прокрутки.

Вот куски кода CSS для футера и для блока ссылок:

#cont_footer {
padding: 0.5em 0;
clear: both;
background: transparent url('../img/footer_bg.png');
background-repeat: repeat-x;
background-position: bottom center;
position: relative;
height: 269px;



ul.block_various_links {
list-style: none;
position: absolute;
width: 100%;
bottom: 5px;



Помогите, пожалуйста, исправить или подскажите в каком направлении двигаться.

49600_gC19KQtF78wdXJSc7zOw_t

Link to comment
Share on other sites

Исправил грубовато вот таким образом:

ul.block_various_links {
list-style: none;
width: 100%;
margin: 259px auto 0 auto;
bottom: 5px;
}



Проблема почему-то была в position:absolute. Все равно в IE смотрится не совсем так, как хотелось бы. Может кто-то знает более верный способ?

Link to comment
Share on other sites

ul блок делать с position:absolute не правильно, вот если его засунуть в div блок и дать ему это параметр, это будет правильнее. Так же там не было прописано выравнивание по центру.

А по центру с position:absolute обычно выравнивают так:

Сначала блоку задать фиксированную ширину, например 500px, после прописать:

div.class {width:500px;position:absolute;left:50%;top:0;margin-right:-250px;}

Link to comment
Share on other sites

ul блок делать с position:absolute не правильно, вот если его засунуть в div блок и дать ему это параметр, это будет правильнее. Так же там не было прописано выравнивание по центру.

А по центру с position:absolute обычно выравнивают так:

Сначала блоку задать фиксированную ширину, например 500px, после прописать:

div.class {width:500px;position:absolute;left:50%;top:0;margin-right:-250px;}


Спасибо, буду знать.
Но, пока что, мое решение с margin кажется проще и конфликтов в браузерах не вызывает.
Убрал еще строку bottom: 5px; - она лишняя в данном случае.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...