ansaurus

Question

Why do elements look different with the XHTML Transitional doctype applied?

Answer 1

A:

Not specificying a doctype can put many browsers into a compatability mode. Without actually investigating I'd guess the page without the doctype is rendering incorrectly. Try putting a doctype (html4 or something) on the first sample and see what happens.

Edit: The biggest cause of rendering discrepancies comes from compatibility mode(s). Before trying to hunt down differences, make sure your markup is valid (http://validator.w3.org/) as are your stlyesheets (http://jigsaw.w3.org/css-validator/). If you markup doesn't tell the browser how to parse it, or has errors in it, the browser will probably make errors rendering the page.

In your example, it's probably running quirks mode on the no-doctype markup causing stylesheet errors.

Josh Sterling 2010-08-09 14:39:55

The second sample is the first sample with a doctype and namespace added.

Benny 2010-08-09 19:49:21

The first example might be the one with the problem though. If the browsers are rendering that in compatibility mode because it has no doctype.

Josh Sterling 2010-08-09 21:54:47

I'm saying the first and second examples are the same; the second example is the solution to the problem of the first example.

Benny 2010-08-10 13:39:24

Answer 2

+1 A:

Your code is not XHTML compliant, you're missing out a head element:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

  <!-- head goes here -->
  <head>
   <title>My page title</title>
  </head>

  <body>
    <input type="text" style="height: 18px; width: 120px" /><br/>
    <select style="height: 18px; width: 120px">
      <option>test</option>
    </select>
  </body>
</html>

If you want to make the inputs the same you should style them as follows:

<style type="text/css">
input[type="text"], select{
    width: 120px;
    height: 18px;
    padding: 0;
    margin: 0;
    border:1px solid grey;
}
</style>

This is a good reference for writing proper XHTML http://www.w3schools.com/xhtml/xhtml_intro.asp

hitautodestruct 2010-08-09 15:09:01

That brings me a little closer but the elements still aren't quite the same. The textbox is about 2 pixels taller and longer than the select box.

Benny 2010-08-09 16:26:13

I've just had a look through w3schools XHTML pages, and frankly the advice is terrible, with key omissions in all the places where we see regular questions on SO. I wouldn't recommend it to anyone.

Alohci 2010-08-09 19:41:15

Select boxes always have styling problems, try adding width and height to the select to match the input.

hitautodestruct 2010-08-10 07:20:54

I'm accepting this as the solution, but saying they "always have styling problems" isn't really the answer I'm looking for. I really want to know why browsers consistently display the select box as being shorter than the textbox. Is there some specification somewhere that browser developers have followed to style them this way? Does the xhtml1-transitional DTD make some kind of ambiguous "this should be longer and taller than that" statement? I guess I'm trying to say that I'd like to know where this type of information comes from, if a problem like this comes up again.

Benny 2010-08-10 14:26:10

The specs for styling anything on the web should come from the <a href="http://www.w3c.org">w3c</a>.The fact is that every vendor is on it's own when it comes to displaying elements that have initial styling. Safari does it generically, Firefox like it's distant relative Netscape, chrome somewhat implements different styling and so on.Your best bet for actually finding out about such browser differences is through searches, articles and experience.This is the weird way of the web and it's standards.

hitautodestruct 2010-08-11 08:55:34

ansaurus

tags:

views:

answers:

Why do elements look different with the XHTML Transitional doctype applied?

related questions