Меню
Что нового?

Ширина таблицы и дива

SonyEricsson

Новичок
Ширина таблицы и дива

Вот небольшой код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link type="text/css" rel="stylesheet" media="screen" href="styles.css">
</head>
<body>

<div id="head">
<div class="mcshowed" id="id1">
<div class="mcbranch">
<table class="table">
<tr>
<th class="tableth">1</th>
<th class="tableth">2</th>
<th class="tableth">3</th>
<th class="tableth">4</th>
<th class="tableth">5</th>
</tr>
</table>
</div>
</div>
</div>

</body>
</html>

Стили:
* html #head { height: 75%; }
#head { min-height: 75%; margin-right: 13em; margin-left: 13em; background-color: white; border-left: 1px solid #1B4C76; border-right: 1px solid #1B4C76;
padding-top: .8em; font-size: 11px; font-family: Verdana; }
.table { width: 100%; font-size: 14px; font-family: Times New Roman; border-collapse: collapse; padding: 0; margin: 0; }

Получается на страницы как бы лист посредине с отступами, так вот при отображении в firefox и opera все нормально, а в MSIE ширина этого листа по центру растягивается, как это победить?
 

Qwerty

Новичок
Брр... страшно :)
Создается впечатление, что можно как-то проще.
 

Qwerty

Новичок
Что хотелось получить-то в итоге? У меня ширина одинаковая в IE и Opera. В Opera правда при этом высота не 75%.
 

SonyEricsson

Новичок
Qwerty
А хочется чтобы как в Word, листок посредине, по бокам другой фон, и чтобы на листе отображалась таблица, показывалась по нажатии на плюс, все это сделано, но говорю, в msie таблица при раскрытии увеличивает ширину листа
 

Qwerty

Новичок
При раскрытии? В приведенном коде нет никакого "раскрытия"... Можно нарисовать, что хочется получить?
Кроме того, эти min-height:75%; что-то не срабатывают, как я вижу.
 

SonyEricsson

Новичок
Ну дело в том что я не все стили выложил, вот все:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link type="text/css" rel="stylesheet" media="screen" href="styles.css">
</head>
<body>

<div id="head">
<div class="mchidden" id="id1">
<a class="plus" href="#" onclick="mc = document.getElementById('id1'); mc.className = mc.className=='mchidden'?'mcshowed':'mchidden'; return false;"></a>
<a class="plusplus" href="#" onclick="mc = document.getElementById('id1'); mc.className = mc.className=='mchidden'?'mcshowed':'mchidden'; return false;"><b>Данные</b></a><br>
<div class="mcbranch">
<table class="table">
<tr>
<th class="tableth">1</th>
<th class="tableth">2</th>
<th class="tableth">3</th>
<th class="tableth">4</th>
<th class="tableth">5</th>
</tr>
</table>
</div>
</div>
</div>

</body>
</html>


div.mchidden div.mcbranch { display: none; }
div.mcshowed div.mcbranch { display: block; padding-left: 1.9em; padding-top: .5em; padding-right: .4em; }

.table { width: 100%; font-size: 14px; font-family: Times New Roman; border-collapse: collapse; padding: 0; margin: 0; }
.tableth { border: 1px solid #A9A9DB; background-color: #E9E9E9; }
.tabletd { border: 1px solid #A9A9DB; }
* html #head { height: 75%; }
#head { min-height: 75%; margin-right: 13em; margin-left: 13em; background-color: white; border-left: 1px solid #1B4C76; border-right: 1px solid #1B4C76;
padding-top: .8em; font-size: 11px; font-family: Verdana; }
.table { width: 100%; font-size: 14px; font-family: Times New Roman; border-collapse: collapse; padding: 0; margin: 0; }

А высота 75% это потому что там вверху шапка а внизу футер

-~{}~ 28.09.07 10:02:

Ну дело в том что я не все стили выложил, вот все:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link type="text/css" rel="stylesheet" media="screen" href="styles.css">
</head>
<body>

<div id="head">
<div class="mchidden" id="id1">
<a class="plus" href="#" onclick="mc = document.getElementById('id1'); mc.className = mc.className=='mchidden'?'mcshowed':'mchidden'; return false;"></a>
<a class="plusplus" href="#" onclick="mc = document.getElementById('id1'); mc.className = mc.className=='mchidden'?'mcshowed':'mchidden'; return false;"><b>Данные</b></a><br>
<div class="mcbranch">
<table class="table">
<tr>
<th class="tableth">1</th>
<th class="tableth">2</th>
<th class="tableth">3</th>
<th class="tableth">4</th>
<th class="tableth">5</th>
</tr>
</table>
</div>
</div>
</div>

</body>
</html>


div.mchidden div.mcbranch { display: none; }
div.mcshowed div.mcbranch { display: block; padding-left: 1.9em; padding-top: .5em; padding-right: .4em; }

.table { width: 100%; font-size: 14px; font-family: Times New Roman; border-collapse: collapse; padding: 0; margin: 0; }
.tableth { border: 1px solid #A9A9DB; background-color: #E9E9E9; }
.tabletd { border: 1px solid #A9A9DB; }
* html #head { height: 75%; }
#head { min-height: 75%; margin-right: 13em; margin-left: 13em; background-color: white; border-left: 1px solid #1B4C76; border-right: 1px solid #1B4C76;
padding-top: .8em; font-size: 11px; font-family: Verdana; }
.table { width: 100%; font-size: 14px; font-family: Times New Roman; border-collapse: collapse; padding: 0; margin: 0; }

А высота 75% это потому что там вверху шапка а внизу футер.


min-height это для opera и firefox, а для ie * html #head { height: 75%; }

-~{}~ 28.09.07 10:11:

и еще забыл:
body { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; font-size: 10px; background-color: #EBF4F9; }
 

Qwerty

Новичок
Длинное сообщение слишком.
Нужно стараться выкладывать минимальный кусок, в котором встречается проблема.

-~{}~ 28.09.07 12:04:

Без лишних стилей и тэгов... Т.е. локализовать ошибку самостоятельно, иначе это придется делать другим.

-~{}~ 28.09.07 12:07:

Мне так кажется дело в паддингах.
 

SonyEricsson

Новичок
Qwerty
Да, я тоже так думаю, он наверно вычисляет ширину дива, и не учитывая отступы показывает таблицу с вычисленной длиной, с маржином такая же песня.
 

Qwerty

Новичок
А зачем вообще менять класс объекта?
Может лучше просто менять его стиль display?
 

SonyEricsson

Новичок
Qwerty
я не думаю что большая разница поменять класс или отдельное свойство, пока решил так проблему: убрал все эти отступы, и сделал пока отступ один у дива head.
 
Войдите или зарегистрируйтесь для ответа.
Сверху