TABLE выходит за DIV в FireFox

ArtZen · October 18, 2007

Приветствую!

Проблема такая:

В FireFox таблица с 100% шириной мнит себя королевой, и выходит за все рамки (справа).

При увеличении масштаба (в FF), контент не растягивает

а опять-таки тупо выходит справа.

В идеале -

должен быть всегда в центре, независимо от масштаба FF и содержать весь контент внутри.

этот код в IE работает. Если делать чтобы работал в FF - точно та же проблема выходит в FF. И наоборот. Бьюсь уже 2 дня. :/

Заранее благодарен за помощь профессионалов.

КОД:

<html>
<head>
<title>WTF?</title>

<style>
body{	
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 62.5%;
	margin:0; padding:0;
	width:100%; height:100%;
	text-align: center;	margin-left: auto; margin-right: auto; 
	background: #3D414A;
}

html>body #container {height: auto; min-height: 100%;}

#container {
	width: 1000px;
	position: relative;
	background-color:#FFFFFF;
	height: 100%; min-height:100%;
	text-align:left;
	margin-left: auto; margin-right: auto; 
}

#header {
	background: url(images/bgr-header2.gif) repeat-x top;
}

#menu {
	background-color:#F2F2F2;
}

#content {
	width: 100%;
	padding: 10px 30px 10px 30px;
}

#empty, #footer {height: 31px;}

#footer {
	position: absolute;
	bottom: 0;
}
</style>

</head>

<body>
<div id="container">

<!--header-->
<div id="header">HEADER</div>
<div id="menu">MENU</div>

<!--content-->
<div id="content">
STARTCONTENT
<table width="100%" border="1">
<tr><td bgcolor="red"><BR><BR></td></tr>
</table>
</div>

<!--bottom-footer-->
<div id="empty"> </div><div id="footer">
	FOOTER
</div>

</div>
</body>
</html>

Vlad · October 18, 2007

Начни с того, что добавь DOCTYPE и проверь еще раз.

ArtZen · October 18, 2007

Начни с того, что добавь DOCTYPE и проверь еще раз.

Какой именно DOCTYPE ?

всегда пользую

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

С ним как раз все так и есть.

Если делать более жесткий типа:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

то проблема возникает и в IE

Scrum · October 18, 2007

<!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" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 html, body {
 margin: 0;
 padding: 0;
 height: 100%;
 }
 body {
 font-family: Tahoma, Verdana, Arial, Sans-Serif;
 font-size: 62.5%;
 background: #3D414A;
 }
 #carrier {
 width: 1000px;
 background: #fff;
 margin: 0 auto;
 height: 100%;
 min-height:100%;
 }
 #header {
 background: url(images/bgr-header2.gif) repeat-x top;
 }
 #menu {
 background-color:#F2F2F2;
 }
 #content {
 padding: 10px 30px 10px 30px;
 }


 /*]]>*/
 </style>
</head>

<body>
 <div id="carrier">
<!--header-->
 <div id="header">HEADER</div>
 <div id="menu">MENU</div>
 <div id="content">
 <table width="100%" border="1">
 <tr>
 <td bgcolor="red"><BR /><BR /></td>
 </tr>
 </table>
 </div>
 </div>
</body>

</html>

ArtZen · October 19, 2007

Да, все понял. Нужно объявлять броузеру "режим совместимости", чтобы padding (Размеры блоков) отсупались одинаково.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

только FF в этом режиме, вообще отказывается выводить таблицу, печатая td в столбик.

в IE все ок.

klierik · October 19, 2007

#content {
 /*width: 100%;*/
 padding: 10px 30px 10px 30px;
}

вс? что надо было зделать

зы: проверено на: FF2, Opera 9.2, IE6/7, Safari for Win

только в IE6 есть небольшое различие с высотой блока, а так все суперски

ArtZen · October 19, 2007

Сделал.

В IE по прежнему расползается.

(смотреть на верхние рамки header. Они другого цвета. Появляется зазор между header и bg справа.)

yopopt · October 19, 2007

этот код в IE работает. Если делать чтобы работал в FF - точно та же проблема выходит в FF. И наоборот. Бьюсь уже 2 дня. :/

В коде из первого поста достаточно поменять

#content {
	width: 100%;
	padding: 10px 30px 10px 30px;
}

на

#content {
	_width: 100%; /* Это пойм?т только ие */
	padding: 10px 30px 10px 30px;
}

Но лучше поставить доктайп и исправить все вылезшие ошибки.

klierik · October 19, 2007

Сделал.
В IE по прежнему расползается.
(смотреть на верхние рамки header. Они другого цвета. Появляется зазор между header и bg справа.)

незнаю о чем ты.

я закоментировал ка сказал выше

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

Sign In

TABLE выходит за DIV в FireFox

Question

ArtZen

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

ArtZen

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

ArtZen

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

ArtZen

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information