In IE6 DOCTYPE causes CSS formatting to be ignored.

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

When I added the following DOCTYPE declaration to my web page, it caused the
CSS formatting of my footer section to stop working:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

If I leave the "http://www.w3.org/TR/html4/loose.dtd" portion out it works.

The CSS definition is:
#footer {
font: "arial", "helvetica", "sans-serif";
font-size: 9px;
bottom: 0px;
text-align: center;

and the code for the footer is:

<div id="Footer" align="center">
©2006, In a Chord Web Design and Consulting, All rights reserved.<br>
Report web site issues to <a
href="mailto:[email protected]"><font
size="-3">[email protected]</font></a><br>
<!--begin-->
<font color="#999999">We're a preferred vendor in the <a
href="http://www.marketingtool.com/channel/webfirm/b.435.g.6880.html"><font
size="-3">Greenfield, Indiana Web Design Services</font></a><font size="-3">
</font>section of Marketingtool.com.
<!--end-->
</font> </div>

(The code between the begin and end comments was supplied by a marketing
company I posted with.)

The web site is www.inachordwebdesign.com.

Any ideas on why it's ignoring the font size setting from the CSS footer
section or why it changes when I leave the specific dtd file reference off?

Thanks.
 
Peggy said:
When I added the following DOCTYPE declaration to my web page, it caused the
CSS formatting of my footer section to stop working:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Click to expand...

This forces standards mode.
If I leave the "http://www.w3.org/TR/html4/loose.dtd" portion out it works.
Click to expand...

This triggers quirks mode.

That should give you hint: you are doing something that is not in the
standards, so IE6 behaves differently when you use a DOCTYPE that
triggers standards mode.
The CSS definition is:
#footer {
font: "arial", "helvetica", "sans-serif";
font-size: 9px;
bottom: 0px;
text-align: center;
Click to expand...

instead of font, it should be font-family. quotes are only needed for
font names that have spaces.

bottom:0px? Bottom what? margin-bottom? padding-bottom?
border-bottom? Is the browser supposed to guess?

Your code has lots of HTML and CSS errors. Use the W3C validator, clean
them up, and then see what happens.
 
Thanks. As you may have guessed, I'm new to CSS coding, so I'm learning as I
go. I'll run it through a validator to see what other errors it picks up. I
need to pick up a really good CSS reference book!

I appreciate the information.
 
Back
Top