HTML сериозен проблем с Doctype

P

PhrozenCrew

Registered
Някой най-случайно да си има на идея защо шиб*ния DOCTYPE променя позиционирането на страницата.
Ето ги двата варианта - без и с DOCTYPE:
http://web-tourist.net/project/phrozencrew/table_valign.html
http://web-tourist.net/project/phrozencrew/table_valign_doctype.html
Ще съм много благодарен на някой, който разбира от HTML и да ми обясни от къде идва проблема, а също и как да го избегна и все пак да успея да валидирам подобна страница.
Благодаря!
 
Има една възможност.

1. В xHTML valign="center" да е атрибут на <tr>, не <td> . И ако не му сложиш доктайп браузера да го счита за друг HTML вариант и да го изпълнява. Пробвай да го сложиш на <tr> - а преди <td>.

Ако така не стане го направи с CSS:

Код: 
<!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">
<head>
<title>index</title>

<style type="text/css">
.valign
{
     vertical-align: middle;
}
</style>

</head>
<body bgcolor="#000000">
<table width="100%" height="100%">
<tr style="valign">
<td align="center" style="color: white;">
ENTER
</td></tr></table>
</body>
</html>
 
Пробвах всички варианти:
Код: 
<!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">
<head>
<title>index</title>
<style>
.valign {vertical-align: middle;}
</style>
</head>
<body bgcolor="#000000">
<table width="100%" height="100%">
<tr align="center" valign="center" class="valign">
<td style="color: white;" class="valign">
ENTER
</td></tr></table>
</body>
</html>
Както и да сложа центрирането в tr:
Код: 
<!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">
<head>
<title>index</title>
</head>
<body bgcolor="#000000">
<table width="100%" height="100%">
<tr align="center" valign="center">
<td style="color: white;">
ENTER
</td></tr></table>
</body>
</html>
Не става и не става!
 
Сигурен ли си, че ползваш xHTML стандарт?
Аз не съм имал проблеми, но пиша на HTML 4 Transitional

ПП. Не бяхобърнал внимание, че си написъл valign="center", но пък с CSS а щом не е станало.
 
Ам...значи проблема е в това, че като зададеш на таблицата height="100%" и в твоя случай понеже има само текст ENTER, просто то го центрира, но е невъзможно да се види, защото рамките на таблицата са плътно до текста (на 1px както е по подразбиране cellpadding)

Измислих два варианта за решаване на проблема ти.

1. <!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">
<head>
<title>index</title>
</head>
<body bgcolor="#000000">
<table width="100%" height="900px" border="1">
<tr style="text-valign: center; text-align: center;">
<td style="color: white; text-valign: center;">
ENTER
</td></tr></table>
</body>
</html>

Просто на таблицата задаваш височина не в проценти, а в пиксели.

ДЕМО1

2. <!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">
<head>
<title>index</title>
</head>
<body bgcolor="#000000">
<table width="100%" height="100%" border="1" cellpadding="200px" >
<tr style="text-valign: center; text-align: center;">
<td style="color: white; text-valign: center;">
ENTER
</td></tr></table>
</body>
</html>

Задаваш вътрешен отстъп в клетките, толкова, че да стане центрирано :)

ДЕМО2


Сложил съм рамка на таблицата, за да видиш какво точно става при различните варианти :) Хубаво е да погледнеш и при твоя вариант как беше ;)

П.С. Също вкарах всичките стилове в style="", защото xhtml, май не можеше да валидира, ако не са в стайл :)

Успех и се надявам да съм го обяснил достатъчно добре :) :?:
 
Адриане, благодаря ти, че толкова си се постарал!
В случая обаче аз искам тотално да избегна поставянето на ограничения в размера на страницата, защото не всеки си отваря браузера на целия акран. Много хора просто си отварят браузера в прозоречен режим а не на FullScreen. Другото, което също е от значение, че има доста различни типове резолюции и например при един 15" CRT този ентер ще отиде най долу в страницата, докато при моя вариант без doctype ще си остане по средата:
http://web-tourist.net/project/phrozencrew/table_valign.html
Така и не мога да намеря решение за автоматично центриране. Много кофти проблем.
 
Това нямам време да го пробвам, но задай примерно 20px height на самата таблица и после и задай margin-top и margin-bottom да са аuto. Не съм го пробвал, но предполагам, че може да стане :)
 
Открих ключа за бараката!
Код: 
html, body {height:100%;}
Мислех си още от начала, че може да е в това, но така и не го проверих. Ей ам съм тъпо парче!
Ето демо:
Table Valign
 
Код: 
 <!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">
<head>
<title>index</title>
<style type="text/css">
td.valign {vertical-align: middle; color: white;}
</style>
</head>
<body bgcolor="#000000">
<table width="100%" style="height: 100%">
<tr align="center" valign="middle" class="valign">
<td valign="middle" class="valign">
ENTER
</td></tr></table>
</body>
</html>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе