Search code examples
htmlcssw3cdoctype

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

I have a simple page with two elements:

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

In an attempt to make it w3c compliant and to display consistently across browsers, I've added a DOCTYPE element and an XML namespace:

<!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>
    <input type="text" style="height: 18px; width: 120px" /><br/>
    <select style="height: 18px; width: 120px">
      <option>test</option>
    </select>
  </body>
</html>

The CSS is just an attempt to make the widths and heights of both the textbox and select box the same.

However, for some reason, the 2nd page no longer respects the height and width CSS attributes I've set on the input tag. The textbox is about 4 pixels taller in each browser (IE, Firefox, Chrome) and 4-6 pixels wider in each browser.

I've used various developer tools to try to find out what additional markup is being applied, but I can't find any.

If possible, could someone explain this behavior to me?

Any help would be much appreciated.

Thanks,

B.J.

Solution

  • 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">
<html xmlns="http://www.w3.org/1999/xhtml">

  <!-- 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

    An article concerning good resources and a good explanation why the above site is not a good reference: W3Fools.