• Gender: Male
  • From: Melbourne, Australia
  • Registered: 2009-10-15
  • Posts: 17

Topic: Differences between HTML 4.0 and 4.01

I have noticed that if I use the Doc Statement:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">,  IE7 fails to recognize one ID that I have placed within another ID.  FF displays correctly.

IE7 displayed the two IDs corectly when I used the Doc Statement:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

The IDs in question are:-
#right {
    float:right;
    color:#E0E0E0;
    background-color:#506F89;
    width:130px;
    margin-left:10px;
    padding:1em;
    }

#inner {
    float:right;
    color:#000000;
    background-color:9EB1C0;
    width:110px;
    margin:3px;
    padding:0.5em;
    }

While the code is:-
<div id="right">
    <div id="inner">
      <h2 align="center">What's New</h2>
      <hr>
    <?php include("whatsnew.php"); ?>
    </div>
  </div>

The whatsnew.php just contains text:-
<p>Exciting news on the "Walk The Y" front!</p>
<p>Check out the new <a href="WalkTheY.php">Walk the Y page !</a>

All the text is displayed correctly, just the inner box with the lighter color is missing in IE7.

The display differences can be seen in FF and IE7 at ww w.irish type3dna.o rg/About.p hp

Any clues as to why the Doc Statement is upsetting IE7?  And any suggestions to correct?

  • Gender: Male
  • From: Salisbury UK
  • Registered: 2008-12-20
  • Posts: 1,231

Re: Differences between HTML 4.0 and 4.01

The second doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> is incomplete and although it works as you want in IE7 you should learn to use the correct doctype with the url.

Your style for the #inner div has a missing#

#inner {
    float:right;
    color:#000000;
    background-color:#9EB1C0;/*was0EB1C0*/
    width:110px;
    margin:3px;
    padding:0.5em;
    }

which Firefox is clever enough to ignore. I originally drafted the answer below which works but is now unnecessary as the color code works if corrected.

Both your divs have a float which means that browsers assume that they have no height, so in your case, why does the inner div have a float? It's the only div in the #right div. It has a width of 110px in a 130px container so delete the float and change margin to margin: 3px auto;

Last edited by Wickham (2009-11-05 02:05:22)

  • Gender: Male
  • From: Melbourne, Australia
  • Registered: 2009-10-15
  • Posts: 17

Re: Differences between HTML 4.0 and 4.01

Thanks Wickham ...I could kick myself with something being so simple!

I realised that the original DOC statement was incomplete, that's why I wanted to use the correct one ... but it caused IE7 to play up.
I guess the situation is when something is working you don't look again at that piece of code when, what seems to be a different problem, arises.
I have also taken your advice on the float and auto margin in the inner box too.

Cheers once again.