legend по центру

tgnet · January 7, 2010

Здравствуйте.

Возникла проблема с отображением текста/картинки в теге legend по центру в разных браузерах.

Пытался искать на сайте и форуме, но ничего толкового не нашёл :lol:

Итак, вот код:

<!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">
<body>
<table><tr><td>
<fieldset><legend align="center">Заголовок по центру</legend>
<center>Мой текст</center>
</fieldset>
</td></tr></table>
</body>
</html>

В FireFox и Google Chrome всё отображается нормально, как и задумано, а вот в Opera и IE заголовок отображается по левому краю.

Вот как это выглядит:

FireFox 3.5.7

Google Chrome 3.0

Opera 10.10

IE 8

Подскажите, пожалуйста, как это исправить?

Заранее благодарен.

psywalker · January 7, 2010

Отгони его марджинами

legend { margin-left: 100px;}

mishka · January 7, 2010

можна заставить ие8 работать как ие7 вот этой строкой <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />, и тогда он отцентрирует.

А опере margin:0 auto;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>legend</title>
</head>
<body>
<div id="wrapper">
	<form action="#">
		<fieldset>
			<legend align="center" style="margin:0 auto;">Search</legend>
			<input type="text" value="search" />
			<input type="submit" value="Go" />
		</fieldset>
	</form>
</div>
</body>
</html>

Edited January 7, 2010 by mishka2

hf3 · January 7, 2010

можна заставить ие8 работать как ие7 вот этой строкой <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />, и тогда он отцентрирует.

Этим самым вызвав кучу других косяков)

mishka · January 7, 2010

Этим самым вызвав кучу других косяков)

Нет, если только не забивать на отображение сайта в ие7!

Так как ие8 в режиме эмуляции ие7 работает аналогично ие7

Хотя согласен что нехорошо так делать.

Если неподойдет эмуляция, то избався от фильдсета, замени дивом с бордером.

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

В нем спан с белым бг, и так спан накроет бордер. Чтобы бордер не касался текста по бокам - спану паддингов добавь и будет тебе типа легенда :lol:

Edited January 7, 2010 by mishka2

hf3 · January 7, 2010

А легенду - блок с выравниванием текста по центру и минусовым нижним маргином чтобы подтянуть под себя "фильдсет", также ему позишн релейтив чтобы поднять по оси z.
В нем спан с белым бг, и так спан накроет бордер. Чтобы бордер не касался текста по бокам спану паддингов добавь и будет тебе типа легенда

Вот это будет оптимальным вариантом. Тем более что в филдсет в стрикте уже недопустим.

mishka · January 7, 2010

Вот это будет оптимальным вариантом. Тем более что в филдсет в стрикте уже недопустим.

Как это фильдсет недопустим?

align недопустим, а филдсет еще как допустим. Другое дело что его назначение - групировать элементы формы, а не текст рамочкой обводить :lol:

tgnet · January 7, 2010

Большое спасибо всем за ответы! Всё работает отлично

Если неподойдет эмуляция, то избався от фильдсета, замени дивом с бордером.
А легенду - блок с выравниванием текста по центру и минусовым нижним маргином чтобы подтянуть под себя "фильдсет", также ему позишн релейтив чтобы поднять по оси z.
В нем спан с белым бг, и так спан накроет бордер. Чтобы бордер не касался текста по бокам - спану паддингов добавь и будет тебе типа легенда

Если не сложно, можете показать как это всё в коде будет выглядеть? А то не всё понял

mishka · January 7, 2010

както так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style type="text/css"><!--
		.heading{
			text-align:center;
			margin:0 0 -8px;
			position:relative;
		}
		.heading span{
			background:#fff;
			padding:0 5px;
		}
		.box{
			height:1%;
			border:1px solid #000;
			text-align:center;
			padding:10px;
		}
	--></style>
</head>
<body>
<div id="wrapper">
	<div class="heading">
		<span>Заголовок по центру</span>
	</div>
	<div class="box">
		Мой текст
	</div>
</div>
</body>
</html>

tgnet · January 7, 2010

mishka2, большое спасибо :lol:

hf3 · January 7, 2010

Как это фильдсет недопустим?

ой… точно… попутал на ночь глядя…

mishka · January 7, 2010

mishka2, большое спасибо

Незачто... хоть время в ожидании быстрее прошло

ой… точно… попутал на ночь глядя…

Бывает... сам такой же... и сообщения свои редактирую по несколько раз :lol:

Sign In

legend по центру

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information