CODEWITHSUNDEEP
htmlcssw3cdoctype
Benny
Benny

Reputation: 1568

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.

Upvotes: 1

Views: 755

Answers (2)

hitautodestruct
hitautodestruct

Reputation: 20820

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.

Upvotes: 1

Josh Sterling
Josh Sterling

Reputation: 848

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.

Upvotes: 0

Related Questions