Jump to content
  • 0

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


GaDiV
 Share

Question

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

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

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Не забываем про 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 by GaDiV
Link to comment
Share on other sites

  • 0

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

f6bec229b52e.jpg

Вот 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 by GaDiV
Link to comment
Share on other sites

  • 0

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

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

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;
}

Link to comment
Share on other sites

  • 0

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

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

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 by GaDiV
Link to comment
Share on other sites

  • 0

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


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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy