Таблица "поехала" из-за формы - HTML и CSS - Страница 2

Web-Gangsta · 10.03.2010, 20:28

Цитата:

Сообщение от Wicort

Извиняюсь, но то, как ты ее вынес, это, откровенно говоря, говнокод

Предпочитаете, что бы я сделал, как того хотите Вы?!

Цитата:

Сообщение от Magneto

Web-Gangsta - внимательно просмотрите свою таблицу стилей, там наверняка есть определение стиля для тега <form>

код с первого Вашего поста правильный, и корректно отображается - протестируйте его в пустом html документе.

из кода я бы исключил (vertical-align:middle) - так как по умолчанию контент в ячейке выравнивается вертикально по центру

Сделал все в отдельном документе, все бесполезно, при любых расстановках внутри <td> все разъезжается как и раньше... Стилей на форму никаких и нигде не применял...

Magneto · 11.03.2010, 01:00

Web-Gangsta - смотрите, это код который я проверял

Код:

<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body style="margin:0">
<div style="padding-top:10px; padding-bottom:30px;">
<table style="width:800px; height:84px;" cellpadding="0" cellspacing="0" border="1">
<tr>
	<td rowspan="2" style="width: 300px; height: 84px;"></td>
	<td style="width: 500px; height: 44px;">
		<form method="POST">
			<input type="text" style="width:125px; height:20px;">
		</form>
	</td>
</tr>
<tr>
	<td style="width: 500px; height: 40px;"></td>
</tr>
</table>
</div>
</body>
</html>

а это как отображается в браузерах
мне кажется Вам это нужно было ????

и насчет говно кода, Вам действительно не следует так выносить теги.

Web-Gangsta · 11.03.2010, 01:54

Цитата:

а это как отображается в браузерах
мне кажется Вам это нужно было ????

Скопировал Ваш скрипт в новый документ, абсолютно ничего не менял, сохранил в index.html и запустил на 4 браузерах:

IE 8.0.7600.16385,
Opera 10.10 build1893,
Mozilla FireFox 3.6,
Google Chrome 4.0.249.89 (38071)

Вот результат:

Как видно:только Opera выводит так как нужно, все остальное выводит со смещением... vertical-align там не помагает...

Прошу прощения, в каком браузере Вы проверяли данный скрипт?

Magneto · 11.03.2010, 06:48

как-то все странно выходит
я открывал документ во всех выше перечисленных Вами браузерах + в Safari, и опять же все отображается корректно
даже не знаю в какую сторону копать

выложил скрин с Safari и прикрепил zip-архив документа
попробуйте скачать и открыть у себя

Web-Gangsta · 11.03.2010, 19:39

Так работает... Но я понять не могу, тогда в чем дело?!

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

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="files/ico.png" type='image/x-icon' />
<script language="javascript" src="script.js"></script>
</head>
<body onload="main();">
<center>
<div style="padding-top:10px; padding-bottom:30px;">
<table class="up" cellpadding="0" cellspacing="0" border="0">
<tr>
	<td rowspan="2" style="width: 300px; height: 84px;"></td>

	
	<td style="width: 500px; height: 44px;">
		<div style="padding-top:7px; vertical-align:middle;">
		<form action="avt.php" method="POST">
			<font class="black12">Логин:</font>
			<input type="text" name="login" style="width:100px;">
			<font class="black12" style="padding-left:10px;">Пароль:</font>
			<input type="password" name="password" style="width:100px; vertical-align:middle;">
			<left style="padding-left:10px;"><button type="submit" name="submit" id="submit" class="sub1" onmouseover="rolloverback('submit','over');" onmouseout="rolloverback('submit','out');"></button></left>

			<left style="padding-left:10px;"><a href="#"><img src="files/out_reg.png" border="0" style="height:22px; width:85px; vertical-align:middle;"  id="reg" onmouseover="rollover('reg','over');" onmouseout="rollover('reg','out');"></a></left>
		</form>
		</div>
	</td>
	
</tr>
<tr>
	<td style="width: 500px; height: 40px;"></td>
</tr>
</table>
</div><table align="center" width="800" cellpadding="0" cellspacing="0" border="0">
<tr>

	<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
	<td style="width: 5px; heigth: 5px; background: url(files/tl_cor.png) left no-repeat;"></td>
	<td style="width: 175px; height: 5px; background: #a7d34c;"></td>
</tr>
<tr>
	<td style="width: 5px; background: #a7d34c;"></td>
	<td style="width: 175px; background: #a7d34c;">
		ТЕКСТ
	</td>
</tr>
<tr>
	<td style="width: 5px; heigth: 5px; background: url(files/bl_cor.png) left no-repeat;"></td>
	<td style="width: 175px; height: 5px; background: #a7d34c;"></td>
</tr>
</table></td>
	<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
		<td style="width: 615px; height: 5px; background: #ffffff;"></td>
		<td style="width: 5px; heigth: 5px; background: url(files/tr_cor.png) left no-repeat;"></td>

</tr>
<tr>
	<td style="width: 615px; background: #ffffff;">	
           ТЕКСТ
	</td>
	<td style="width: 5px; background: #ffffff;"></td>
</tr>
<tr>
	<td style="width: 615px; height: 5px; background: #ffffff;"></td>
	<td style="width: 5px; heigth: 5px; background: url(files/br_cor.png) left no-repeat;"></td>
</tr>
</table></td>
</tr>
</table>
<div style="padding-top:30px; padding-bottom:30px;">
<table class="down" cellpadding="0" cellspacing="0" border="0">
<tr>

	<td class="black12" style="width: 240px; padding-left:10px; padding-right:10px; cursor: default;">Подарочная страница © 2010</td>
	<td style="width: 800px; height: 40px;"></td>
</tr>
</table>
</div></center>
</body>
</html>

style.css

Код:

body{
	background: url(files/back.png) left repeat;
	background-attachment:fixed;
	margin:0px;
}

a:link{
	cursor: pointer; 
	color:#00f0ff;
	font-family:arial;
	font-weight:bold;
	font-size:12px;
	text-decoration:underline;
}
a:visited{
	cursor: pointer; 
	color:#00f0ff;
	font-family:arial;
	font-weight:bold;
	font-size:12px;
	text-decoration:underline;
}
a:active{
	cursor: pointer; 
	color:#00f0ff;
	font-family:arial;
	font-weight:bold;
	font-size:12px;
	text-decoration:underline;
}
a:hover{
	cursor: pointer; 
	color:#000000; 
	font-family:arial;
	font-weight:bold;
	font-size:12px;
	text-decoration:none;
}
.alltxt{
	font-size:18px;
	font-family:arial;
	color:#000000;
	font-weight:normal;
	padding-left:40px;
	padding-right:40px;
	padding-top:30px;
	vertical-align:top;
	text-indent:30px;
	text-align:justify;
}
.white12{
font-size:12px;
	font-family:arial;
	color:#ffffff;
	font-weight:normal;
}
.white11{
font-size:11px;
	font-family:arial;
	color:#ffffff;
	font-weight:normal;
}
.black12{
	font-size:12px;
	font-family:arial;
	color:#000000;
	font-weight:normal;
}

.up{
	background: url(files/up.png) left no-repeat;
	width: 800px;
	height: 84px;
	margin:0px;
}

.down{
	background: url(files/down.png) left no-repeat;
	width: 800px;
	height: 40px;
}

.sub1{
	background-image: url(files/out_submit.png); 
	width: 50px; 
	border-top-style: none; 
	border-right-style: none; 
	border-left-style: none; 
	height: 22px; 
	border-bottom-style: none; 
	vertical-align:middle;
	cursor:pointer;
}

Если таблица Ваша и вне моего сайта, то работает, а если ее поставить в мой сайт сразу все уезжает...

cooperOk · 11.03.2010, 21:36

попробуй доктайп дописать
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Web-Gangsta · 11.03.2010, 22:19

Цитата:

Сообщение от cooperOk

попробуй доктайп дописать
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Что он дает?.. Я думаю пора с этим заканчивать, поэтому я просто перетащил <form> за пределы таблицы... Таким образом все работает и это уже не "говнокод"...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Delphi. Формы: "достпуные" и "autocreate"	Alex1991	Помощь студентам	1	02.03.2010 21:57
Таблица в виде "гармошки" по столбцам	ssdm	JavaScript, Ajax	1	30.12.2009 16:57
Элемент формы <input type="image"... не находится в коллекции элементов формы?	euroflock	Работа с сетью в Delphi	1	01.09.2009 16:17
при вводе на листе "магазин"- код товара появлялось "описание" товара из "склада" с "продажной ценой"	aleksei78	Microsoft Office Excel	13	25.08.2009 12:04

11.03.2010, 21:36	#16
cooperOk Пользователь Регистрация: 11.11.2009 Сообщений: 66	попробуй доктайп дописать <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">