Проблмы верстки

GaDiV · March 31, 2011

Вобщем проблема в следующем:

Делаю резиновый макет, использую float для выравнивания слоёв, но в IE6 между слоями есть маленький отступ (3-5px), который никак не удаётся удалить, есть ли какое-нибудь решение средствами css?

tius · March 31, 2011

1. Убрать все лишние пробелы и скрытые знаки.

2. Предоставить код.

3. Забить уже ИЕ6 сапогами с толстой подошвой.

medium · March 31, 2011

1 без кода ничего не понятно

2 ие 6 не правильно вычисляет отступы

- padding fix = height:1%;

- margin fix = display:inline

- и еще на всякии: zoom:1

Эти стили для тех кто имеет отступы(поля)

Mavrun · March 31, 2011

http://shublog.ru/html-and-css/kak-podruzhit-internet-explorer-6-i-css-svojjstvo-margin/

плюс можно попробовать обнулить маргин и паддинг, мало ли

Mr.Black · March 31, 2011

Не забываем про IE 3px gab.

Можно попробовать _margin-(сторона): -3px;

Есть еще валидная форма з применением position и margin.

Edited March 31, 2011 by Mr.Black

GaDiV · March 31, 2011

Не забываем про IE 3px gab.
Можно попробовать _margin-(сторона): -3px;
Есть еще валидная форма з применением position и margin.

Пробовал отрицательные значение - не помогает, всё равно между слоями остаётся где то 3px

Вот код

body {
background:url(../img/body.gif);
background-repeat:repeat-x repeat-y;
margin-left:0px;
margin-right:0px;
margin-top:0px;
      }		
.header-left {
background:none;
width:91px;
height:230px;
float:left;
margin-left:0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/Header-left.png', sizingMethod='scale');
             }
.header-right {
background:none;
width:91px;
height:230px;
float:right;
margin-right:0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/Header-right.png', sizingMethod='scale');
              }
.header-center {
background:none;
height:230px;
margin-left:91px;
margin-right:91px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/Header-center.png', sizingMethod='scale');
}

Отступы получаются между .header-left и .header-center, а так же между .header-center и .header-right. И так со всеми слоями

Edited March 31, 2011 by GaDiV

psywalker · March 31, 2011

Давай ссылку, скриншоты и т.д.

GaDiV · March 31, 2011

Давай ссылку, скриншоты и т.д.

Вот html:

<html>
<head>
<link href="css/styleIE.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header-left"></div>
<div class="header-right"></div>
<div class="header-center"></div>
</body>
</html>

Html скидывал не весь, а только нужное, чтоб не засорять лишним муссором

Edited March 31, 2011 by GaDiV

rediskavet · March 31, 2011

Если средней колонке убрать высоту, отступы пропадают.

Вот можно так сделать, если высоту нельзя убирать у сред.колонки. Все что в ней обернуть в другой блок, и ему задать нужную высоту.

body {
background:url(../img/body.gif);
background-repeat:repeat-x repeat-y;
margin-left:0px;
margin-right:0px;
margin-top:0px;
background-color: aqua;
}   


.header-left {
background-color: red;
width:91px;
height:230px;
float:left;
margin-left:0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/Header-left.png', sizingMethod='scale');
}

.header-right {
background-color: green;
width:91px;
height:230px;
float:right;
margin-right:0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/Header-right.png', sizingMethod='scale');
}

.header-center {
background-color: silver;
margin-left:91px;
margin-right:91px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/Header-center.png', sizingMethod='scale');
}

.header-center div{
height:230px;
}

GaDiV · March 31, 2011

Если средней колонке убрать высоту, отступы пропадают.
Вот можно так сделать, если высоту нельзя убирать у сред.колонки. Все что в ней обернуть в другой блок, и ему задать нужную высоту.
body {
background:url(../img/body.gif);
background-repeat:repeat-x repeat-y;
margin-left:0px;
margin-right:0px;
margin-top:0px;
background-color: aqua;
}   


.header-left {
background-color: red;
width:91px;
height:230px;
float:left;
margin-left:0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/Header-left.png', sizingMethod='scale');
}

.header-right {
background-color: green;
width:91px;
height:230px;
float:right;
margin-right:0px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/Header-right.png', sizingMethod='scale');
}

.header-center {
background-color: silver;
margin-left:91px;
margin-right:91px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/Header-center.png', sizingMethod='scale');
}

.header-center div{
height:230px;
}

Проблема в том, что внутри этой колонки ничего нет, и по описанному методу средняя колонка пропадает вообще, пробовал у средней колонки убирать высоту, оборачивать её ещё в один div(с заданной высотой) - результат тот же, пропадает средняя колонка. Этот метод работает если фон задат цветом, в моём случае на фон стоит картинка с расширением .png и она не хотит отображатся, не понятно только он вообще не видна или не растягивается

Edited March 31, 2011 by GaDiV

rediskavet · March 31, 2011

Доп.блок внутрь центральной колонки и ему задавать высоту.


<div class="header-left"></div>
<div class="header-right"></div>
<div class="header-center">
     <div class="header-center-height"></div>
</div>

Edited March 31, 2011 by rediskavet

GaDiV · March 31, 2011

Доп.блок внутрь центральной колонки и ему задавать высоту.
<div class="header-left"></div>
<div class="header-right"></div>
<div class="header-center">
     <div class="header-center-height"></div>
</div>

Опять тоже самое, нашёл в чём проблема, но как решить её не знаю, этот метод рабочий за исключением одного но (или я просто чего то не знаю),если фон задан через background то всё нормально, отступы убирает, но мне нужна на фоне картинка с прозрачным фоном и если её вставлять через фильтр, то увы фон остаётся пустым, она банально не растягивается(

rediskavet · March 31, 2011

Похоже на hasLayout. Потому-что:

1. В начале у средней колонки был layout так-как у ней была обозначена высота, как только высоту убрали(отменили layout) отсупы пропали.

2. Если убрать высоту, а затем добавить zoom:1 то отступы появляются вновь.

Подозреваю что фильтры делают то-же самое. Просто включают Layout. Как решить не знаю, обычно это свойство только включаю, не разу не приходилось отключать.

GaDiV · March 31, 2011

Похоже на hasLayout. Потому-что:
1. В начале у средней колонки был layout так-как у ней была обозначена высота, как только высоту убрали(отменили layout) отсупы пропали.
2. Если убрать высоту, а затем добавить zoom:1 то отступы появляются вновь.
Подозреваю что фильтры делают то-же самое. Просто включают Layout. Как решить не знаю, обычно это свойство только включаю, не разу не приходилось отключать.

Печально, блин вечно проблемы с ie6, лан спс та этом тебе, буду следить за темой мб ещё кто, что посоветует

Sign In

Проблмы верстки

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information