Forum Moderators: not2easy

Message Too Old, No Replies

CSS problems with XHTML

         

mickleyd

7:27 pm on Mar 26, 2004 (gmt 0)

10+ Year Member



I have a questions about why these two pages display differently in IE 6. The only difference in them is where the encoding is placed. Test 2 holds true to the width of the span tag making it 135 pixels, Test 1 only makes the span container as large as the text inside. Why does it do this. Is there a bug? Which it is the correct implementation?


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test 1</title>
<style type="text/css">
.Name
{
width: 135px;
border: 1px solid #999999;
}
.Phone
{
width: 135px;
border: 1px solid #999999;
}
</style>
</head>

<body>

<span class="Name">
My Name here
</span>
<span class="Phone">
(999) 999-9999
</span>
</body>
</html>

<?xml version="1.0" encoding="iso-8859-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">
<head>

<title>Test 2</title>
<style type="text/css">
.Name
{
width: 135px;
border: 1px solid #999999;
}
.Phone
{
width: 135px;
border: 1px solid #999999;
}
</style>
</head>

<body>

<span class="Name">
My Name here
</span>
<span class="Phone">
(999) 999-9999
</span>
</body>
</html>

zaptd

7:47 pm on Mar 26, 2004 (gmt 0)

10+ Year Member



Good explanation: [css-discuss.incutio.com...]

HTH,
CK

[edited by: tedster at 3:12 am (utc) on Mar. 27, 2004]
[edit reason] fix url [/edit]

DrDoc

2:59 am on Mar 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to Webmaster World!

The first example causes IE to render the page in "standards compliant mode", whereas the second example causes IE to render the page in "quirks mode". The biggest difference between the two rendering modes is compliance with CSS standards, the box model in particular.

Microsoft gives a very good overview of the two differences: [msdn.microsoft.com...]

The reason why the second example throws IE into quirks mode is because the doctype, even though it is valid, does not come FIRST on the page.

The important thing to remember is that most other browsers will render the page according to the standards.

mickleyd

1:15 pm on Mar 29, 2004 (gmt 0)

10+ Year Member



Thanks zaptd and DrDoc! I have one more question for you. I want the page to look like the second one in quirks mode but by using the standards (with the widths of the containers being 135 px). How can this be done?

Thanks again
Dwight