Помогите! Табличная верстка, глюк в IE

Ibrahim_KZ · March 15, 2010

Здравствуйте, уважаемые гуру-верстальщики.

Возникла такая проблема, в общем-то я думал, что с ней справлюсь, но IE отказывается корректно растягивать хедер. Посмотрите ссылку index.html В Опере и Мозилле хедер отображается правильно, т.е. прижимается к правому боку, а центр растягивается. А IE не хочет растягивать поле td и прижимает хедер к левому боку.

Но и это еще не все. Когда убирается контент, например index4.html или короткая строка index3.html, IE отображает всё правильно, т.е. хедер прижимается к правому боку. А когда выводится в контент мало-мальски длинная строка (без переходов на новую строку), то хедер опять прижимается к левому боку... Например index2.html

Уж и не знаю, что делать. Может переучиваться верстать полностью на дивах?

Edited March 15, 2010 by Ibrahim_KZ

Verder · March 15, 2010

Здравствуйте, уважаемые гуру-верстальщики.
Возникла такая проблема, в общем-то я думал, что с ней справлюсь, но IE отказывается корректно растягивать хедер. Посмотрите ссылку index.html В Опере и Мозилле хедер отображается правильно, т.е. прижимается к правому боку, а центр растягивается. А IE не хочет растягивать поле td и прижимает хедер к левому боку.
Но и это еще не все. Когда убирается контент, например index4.html или короткая строка index3.html, IE отображает всё правильно, т.е. хедер прижимается к правому боку. А когда выводится в контент мало-мальски длинная строка (без переходов на новую строку), то хедер опять прижимается к левому боку... Например index2.html
Уж и не знаю, что делать. Может переучиваться верстать полностью на дивах?

А может ты еще и таблицы стилей выложишь?

Ibrahim_KZ · March 15, 2010

Ну она же выложена style.css Как бы тогда он загрузился?

Verder · March 15, 2010

Ну она же выложена style.css Как бы тогда он загрузился?

Ты когда сообщение пишешь, сверху есть кнопочка - "Код".

Нажимаешь ее, копируешь сначала все что у тебя в файле *css между тегами [ code] [ /code]

Так же поступаешь и с хтмл

А искать твой файл, сохранять к себе никто не будет.

Ibrahim_KZ · March 15, 2010

Облегчил хтмл файл, но глюк остался, ниже код:

<body marginheight="0" marginwidth="0" bottommargin="0" topmargin="0" rightmargin="0" leftmargin="0">
<table class="top1" width="100%" border="0">  <!--Голова и то, что ниже-->
	<tr>
	   	<td class="td04">
		</td>
	   	<td class="td5"> 
		</td>
		<td class="td6">
		</td>
   </tr>
   <tr>
	  <td>
	  </td>
	  <td class="td12">
	  </td>
	  <td class="td12">
		   <table class="search" border="0">
		 <form name="frmSearch" action="" method="post">
		 <tr><td><input type="text" id="srch" value="Поиск по сайту"></td>
			   <td><input type="submit" id="srchb" value="Найти">  </td>
		 </form>
		   	 <td><a href="#" class="ln2">гостевая книга</a></td>
			 <td><a href="#" class="ln2">карта сайта</a></td>
		 </tr>
		 </table>
	  </td>
   </tr>
   <tr>
	  <td>
	  </td>
	  <td colspan=2>
		 <table border="0" class="top">
			 <tr><td class="cntnt">				<!--контент-->
				222222222222222222222222222222222222222222222222222222222222222222222222222
222222
		   	   </td><!--конец контента-->
				<td class="right">
					<table class="right"><!-- Правая часть -->
					<tr>
					<td valign="top">
					gfggggggggggggggggggggf<br>
					gggggggggggggggg<br>
					ggggfgggggggggggggg<br>
					ggggggfggggggggggggggggg<br>
					gggfggggggggggggggg<br>
					gggggfggggggggggg<br>
					gggggggg

					</td>
					</tr>
					</table>
				  </td><!-- right -->
		   </tr>
		 </table>
	  </td>
  </tr>
</table><!-- top1 -->
</body>

Результат на index5.html

И CSS стили

body {font:12px Arial; color: #191a1b;}
table {border: 0px; border-collapse: collapse;  }
table td {padding: 0px}

.top { width:100%; margin-top:0px;}
.top1 { width:100%; padding-top: 0px;}
.td04 { width:14px; height:130px; background: url(images/bg5.jpg) no-repeat; }
.td5 { height:130px; background:url(images/fn2.jpg) repeat-x;}
.td6 { width:852px; height:158px; background:url(images/bg3.jpg) no-repeat;min-width:852px;}
.td12 { height:33px; background:url(images/fn6.jpg) repeat-x}

.cntnt {height:100%;margin-top:0px;vertical-align:top;}
.right {width:260px;;height:100%; background:#eeeeee;}

#srch {font:11px Arial; color: #151515; margin:6px 2px 5px 2px;}
#srchb {font:11px Arial; color: #151515; margin:5px 2px 5px 2px;}

.ln2 { color:#4b4c4d; text-decoration:none; padding: 4px 5px 4px 5px;font:11px Arial;}
.ln2:hover {text-decoration: underline}

Результат того же хтмл нормальной работы, НО с короткой строкой в контенте index6.html

Повторяю глюк только в IE или у меня глюк

Verder · March 15, 2010

Посмотрел.

Особо не вглядывался, решение не нашел (да и если честно не особо искал).

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

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

Именно такая сетка/макет как у тебя, в 4 колонки, верстается минут 10-20. Будет попозже время - набросаю пример.

Ibrahim_KZ · March 21, 2010

Проблема решается довольно легко! Если кто столкнется с подобной проблемой, то могу дать 2 совета:

1. Не используйте верстку на таблицах (как было сказано выше), т.к. этот метод устарел и таблицы в IE ведут себя непредсказуемо.

2. Если всё же лень полностью все переверстывать на дивы (как в моем случае), то решение таково - вместо ячеек <td class="td5"> и <td class="td6"> создаем одну <td colspan=2>. Туда запихиваем 2 дива (один вложенный в другой) <div class="td5"><div class="td6"></div></div>. Для первого и второго дива стили

.td5 { height:158px; background:url(images/fn2.jpg) repeat-x;overflow:auto; width:100%;}
.td6 { width:852px; height:158px; background:url(images/bg3.jpg) top left no-repeat;overflow:auto;float:right}

И все! IE побежден!

Результат на index7.html

Edited March 21, 2010 by Ibrahim_KZ

hf3 · March 21, 2010

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

Вас ждет много приятных сюрпризов когда начнете верстать дивами.

А ИЕ не виноват.

Sign In

Помогите! Табличная верстка, глюк в IE

Question

Ibrahim_KZ

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Verder

Link to comment

Share on other sites

Ibrahim_KZ

Link to comment

Share on other sites

Verder

Link to comment

Share on other sites

Ibrahim_KZ

Link to comment

Share on other sites

Verder

Link to comment

Share on other sites

Ibrahim_KZ

Link to comment

Share on other sites

hf3

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information