Forum Moderators: not2easy
It's my first time here on these forums.
I have a strange rendering problem when I change the Doctype from HTML 4.0 Strict to XHTML 1.0 Transitional.
As you will see, <snip>
looks different from <snip>
The following code is my sample test case:
<!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" lang="en">
<head>
<title>test x</title>
<style type="text/css">
.field {line-height: 30px;}
.field label {float: left; width: 200px; text-align: right;}
</style>
<!--[if IE]>
<style type="text/css">
.field input {vertical-align: middle;}
.field span {display: inline-block;}
</style>
<![endif]-->
</head>
<body>
<form action="" method="post">
<div id="new_address_box_box">
<div class="field">
<label for="first_name">First Name</label><input type="text" id="first_name" name="first_name" />
</div>
<div class="field">
<label for="last_name">Last Name</label><input type="text" id="last_name" name="last_name"/>
</div>
<div class="field">
<label for="address_1">Address 1</label><input type="text" id="address_1" name="address_1" />
</div>
<div class="field">
<label for="address_2">Address 2</label><input type="text" id="address_2" name="address_2" />
</div>
<div class="field">
<label for="city">City</label><input type="text" id="city" name="city" />
</div>
<div class="field">
<label for="postal_code">Postal Code</label><input type="text" id="postal_code" name="postal_code" />
</div>
</div>
</form>
</body>
</html>
Can anyone explain what's causing this to happen and give me a solution to this problem? I need to use XHTML Transitional because I will be using ASP.NET which requires you to use XHTML (I think)
[edited by: tucan26 at 2:06 am (utc) on April 26, 2009]
[edited by: swa66 at 7:53 am (utc) on April 26, 2009]
[edit reason] No personal URLs please see ToS [/edit]
The reason why some elements may render differently is because you are telling the browser different instructions.
It is best to chose one Doctype and stick to it.
Then run it through the w3c validator to correct any errors.
They both validate under w3c validator.
Those two pages look VERY VERY different and I don't know why the doctype would cause this problem...
(testy is close to what I want to have)
[edited by: swa66 at 7:54 am (utc) on April 26, 2009]
[edit reason] No personal URLs, please see ToS [/edit]
Referring the posted code:
Take a look at rendered code with something like the web developer toolbar for Firefox and you'll that for your sample code the inline content doesn't have its boxes aligned (typical with forms in my experience.
(alternatively: use backgrounds to see where they are)
To fix it: clear the float in the .field or -maybe far better-, don't set that line-height on .field, but set a (min-)height instead.
As to why it's rendered differently in HTML mode: the inline blocks are apparently on the same vertical position there.
It almost seems its like a sort of quirks mode.
.field {line-height: 30px;}
Try using
height:30px;line-heightIn what browsers do you see the problem? What was your previous doctype?
I am not sure why testx.html goes into quirks mode but you seem to be right. height will fix the page.
I tend to avoid using height but I guess I have to.
Now imagine you're a browser need to render an input field (basically a box around some text that still needs to be entered, yet it's an inline element that needs to somehow align with the text around it. Now imagine what line-height would need to do (outside the box? inside the box ?) ... looking in the standard will not enlighten you all that much.
Hence I try to be very careful what CSS I apply to forms.
xhtml would not trigger quirks mode as such. Typically quirks mode tries to fix things for us to protect us from mistakes against e.g. CSS from before the standards were set.
CSS 2.1 doesn't offer _that_ much control over input fields.
Although you can achieve quite nice effects if you use fieldsets, legends and loads of CSS.
