X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Не сработал margin в IE
sanchahous
sanchahous
Topic Starter сообщение 6.5.2014, 18:08; Ответить: sanchahous
Сообщение #1


Сразу к делу: переношу верстку в CakePHP, все сработало, единственное что переносится не правильно это весь полностью блок #content. В IE он прибивается к левому краю, во всех остальных браузерах он по центру.
<!DOCTYPE html> установлено.
В самой верстке без фреймворка все идеально. После переноса html и CSS абсолютно идентичны, никаких лишних стайлов не привязано.
Скидываю частично html и частично css, если еще что-то надо добавить без проблем.
Есть идеи?
Html: БЕЗ ХЕДЕРА И ФУТЕРА.
<!DOCTYPE html>
<html>
<head>
<title>Wood</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--*******CONTENT********-->
<main>
<div id="content">
<div class="page-blocks">
<ul>
<li><img class="first" src="img/images/block_back.png" alt="1st Block">
<img class="second" src="img/images/about.png" alt="1st Block">
<img class="text-back" src="img/images/text_back_about.png" alt="1st Block">
<span class="text"><a href="#">О компании</a></span>
</li>
<li><img class="first" src="img/images/block_back.png" alt="2nd Block">
<img class="second" src="img/images/catalog.png" alt="2nd Block">
<img class="text-back" src="img/images/text_back_catalog.png" alt="2nd Block">
<span class="text catalog-margin"><a href="#">Каталог</a></span>
</li>
<li><img class="first" src="img/images/block_back.png" alt="3rd Block">
<img class="second" src="img/images/delivery.png" alt="3rd Block">
<img class="text-back" src="img/images/text_back_delivery.png" alt="3rd Block">
<span class="text delivery-margin"><a href="#">Доставка</a></span>
</li>
<li><img class="first" src="img/images/block_back.png" alt="4th Block">
<img class="second" src="img/images/contacts.png" alt="4th Block">
<img class="text-back" src="img/images/text_back_contacts.png" alt="4th Block">
<span class="text contacts-margin"><a href="#">Контакты</a></span>
</li>
</ul>
</div>
</div>
</main>
</body>
</html>


Mini-Reset
[CSS]
body {
background-image:url("/img/images/wood_bg.jpg");
background-color: #000000;
margin: 0;
}

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a {
cursor: pointer;
color: #ffffff;
}
.clear {
clear: both;
}

ul {
margin: 0;
}

p, span {
font-family: HelveticaNeueCyr, Arial, sans-serif;
}


[/CSS]

[CSS]
/* CONTENT
-----------------------------------------------------------------------------*/

#content {
width: 1000px;
/*height: 430px;*/
margin: 0 auto;
}

.page-blocks {
padding-bottom: 70px;
margin: 0 auto;
}

.page-blocks li{
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: top;
margin-right: 54px;
position: relative;
}

.second {
position: absolute;
left: 6px;
top: 6px;
}

.text-back {
position: absolute;
left: 6px;
top: 168px;
}

.text {
position: absolute;
font-size: 26px;
color: #ffffff;
text-align: center;
left: 27px;
top: 202px;
}

.catalog-margin {left: 52px;}

.delivery-margin {left: 45px;}

.contacts-margin {left: 43px;}
[/CSS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 6.5.2014, 18:21; Ответить: Den1xxx
Сообщение #2


Может это из-за дурацкого тега <main>, который не поддерживает 50% браузеров?
http://htmlbook.ru/blog/element
Подобно многим другим новым элементам HTML5, не все браузеры понимают <main> или содержат набор стилей для него. Вам следует убедиться, что он отображается в CSS как блочный элемент.
main {display:block;}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sanchahous
sanchahous
Topic Starter сообщение 6.5.2014, 18:33; Ответить: sanchahous
Сообщение #3


(Den1xxx @ 6.5.2014, 21:21) *
Может это из-за дурацкого тега <main>, который не поддерживает 50% браузеров?

Возможно, но не в этом случае. Попробовал ваш совет, после, попробовал вообще убрать main, не помогло. Фишка в том, что верстка слетела только при переносе в CakePHP, так как вы видите на первом скрине в IE все margin работали, в CakePHP перестали. Хотя после переноса я проверял ничего лишнего не подтянулось. Закину сегодня на хостинг сайт, возможно так получится решить...

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) margin
4 FelixRaven 6042 9.9.2011, 16:45
автор: -Александр Крайсветный-


 



RSS Текстовая версия Сейчас: 29.3.2024, 15:48
Дизайн