Таблицы со 100% растягивают всю страницу

ahromenko · March 28, 2009

Привет, помогите пожалуйста, целый день туплю на этим:

Есть стили колонок (колонок 3):

#column {overflow: hidden; zoom: 1; padding: 22px 17px 0 17px;}
#l-col {float: left; width: 200px; overflow: hidden; zoom: 1;}
#c-col {margin: 0 210px 0 210px;}
#r-col {float: right; width: 200px; overflow: hidden; zoom: 1;}

Если вставляешь в центральную колонку таблицу с параметром width="100%" то таблица растягивается на столько, что появляется горозонтальная полоса прокрутки.

Косяк заметил только в IE8 (возможно и в IE6,7 есть). В нормальных браузерах все отлично.

yopopt · March 28, 2009

А сам макет где?

ahromenko · March 28, 2009

Сайт на DataLife Engine. Вот основной код main.tpl

<!-- Страничко началась -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{headers}
<link href="{THEME}/css/style.css" rel="stylesheet" type="text/css" />
<link href="{THEME}/css/engine.css" rel="stylesheet" type="text/css" />
</head>

<body>

{AJAX}
<div id="mw-fix">

<!-- Информационная панель вверху -->
<div id="head">
<ul id="top">
<li>дата</li>
<li class="weather">погода</li>
</ul>
</div>
<!-- /Информационная панель вверху -->

<!-- Колонки -->
<div id="column">

<!-- Левая колонка -->
<div id="l-col">

<!-- Логотип -->
<div id="logo">
<a href="/index.php"><img src="{THEME}/images/logo.gif" width="164" height="38" title="титл" alt="альт" /></a>
Городской интернет-портал
</div>
<!-- /Логотип -->


<h4>Блок</h4>
<div id="block">
содержимое
</div>

</div>
<!-- /Левая колонка -->


<!-- Правая колонка -->
<div id="r-col">

<h4>Блок</h4>
<div id="block">
содержимое
</div>

</div>
<!-- /Правая колонка -->

<!-- Центральная колонка -->
<div id="c-col">

<!-- Форма поиска -->
<form onsubmit="java script: showBusyLayer()" method="post"><input type="hidden" name="do" value="search"><input type="hidden" name="subaction" value="search" />
<div id="search">
<div class="fl"><input class="i1" name="story" onclick="if(this.value=='Поиск по сайту...')this.value=''" onblur="if(this.value=='')this.value='Поиск по сайту...'" type="text" value="Поиск по сайту..."/></div>
<div class="fl2"><input style="width:70px;height:22px" class="i2" type="submit" value=" найти " /></div>
</div>
</form>
<!-- /Форма поиска -->

<br />

{info}{content}
[aviable=main]

[/aviable]
</div>
<!-- /Центральная колонка -->
</div>
<!-- /Колонки -->

<!-- Футер -->
<div id="footer">
<div class="scores"><a href="http://site.com" target="_blank">Студия бла-бла</a></div>
<div class="browser">Дизайн сайта тестировался с использованием последних версий популярных браузеров
<a href="http://www.opera.com/download/" target="_blank">Opera 9.5</a>, 
<a href="http://www.mozilla.ru/" target="_blank">Firefox 3</a>.<br />
Для правильного отображения сайта, мы советуем обновить ваш браузер до актуальной версии.
</div>
<div class="copy">© 2008—2009 <a href="/index.php">Сайт</a></div>
</div>
<!-- /Футер -->

</div>
</body>
</html>
<!-- Страничко закончилась -->

SelenIT · March 28, 2009

Видимо, дело в padding-ах центральной колонки, которые плюсуются к 100%-й ширине содержимого...

ahromenko · March 28, 2009

SelenIT, я это не совсем понимаю. CSS еще толком не знаю. Вот еще такие стили может помогут понять:

* {padding:0; margin:0;}
html {height: 100%;}
body {height: auto !important; height:100%; min-height:100%; min-width:980px; font: 12px arial; color: #000; line-height: 17px;}
#mw-fix {width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 980? "980px":"100%"); min-width: 980px; margin: 0 auto;}

Sign In

Таблицы со 100% растягивают всю страницу

Question

ahromenko

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

ahromenko

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

ahromenko

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information