Question 45920 in CSS Question posted in
Some basic documentation can be found here.

Why does image size and placement change depending on HTML level? – CSS

I have a file that displays properly with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">; images display in the left and right margins, and text is centered. If I change the DTD to <!DOCTYPE HTML> then the images shift and change size.

I used the markup

<!DOCTYPE HTML>
<html lang=en>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <TITLE>favorite things</TITLE>
  <META name="KEYWORDS" CONTENT="filk">
  <style>
    .verse {
      text-align: center;
      font-size: 2em;
      width: 60%
    }
    
    img.l {
      float: left;
      width: 12%;
      position: fixed;
      left: -20%;
    }
    
    img.r {
      float: right;
      width: 12%;
      position: absolute;
      right: 20%;
    }
  </style>
</head>

<BODY LANG="en-US" DIR="LTR">
  <div style="position:absolute; left:20%; width:60%;">
    <H1 style="font-size:4em; text-align:center;">My favorite things</H1>

    <p>
      [Verse]
    </p>
    <img class=L src="https://upload.wikimedia.org/wikipedia/en/d/db/Silmarillion.png" alt="The Silmarillion">
    <img class=R src="https://upload.wikimedia.org/wikipedia/en/8/8e/The_Fellowship_of_the_Ring_cover.gif" alt="The Fellowship of the Ring">
    <p class="verse">
      <a href="https://en.wikipedia.org/wiki/Ungoliant">Gardening spiders</a>
      <br> And <a href="https://en.wikipedia.org/wiki/Middle-earth_weapons_and_armour#Narsil">swords that are broken</a>
      <br> Words in the <a href="https://en.wikipedia.org/wiki/Black_Speech">Black Speech</a>
      <br> That must not be spoken
      <br>
      <img class=L src="https://upload.wikimedia.org/wikipedia/en/1/11/The_Return_of_the_King_cover.gif" alt="The Return of the King">
      <a href="https://en.wikipedia.org/wiki/Denethor">Unfaithful stewards</a>
      <br> Who don't want their kings
      <br> These are a few of my favorite things.
    </p>
    <br>
    <p>
      [hook]
    </p>
    <p class="verse">
      <img class=L src="https://upload.wikimedia.org/wikipedia/en/f/f0/Currents_of_space.jpg" alt="The Currents of Space"> When the <a href="https://en.wikipedia.org/wiki/Orc">orc</a> bites, when the <a href="https://en.wikipedia.org/wiki/The_Currents_of_Space">probe</a>      stings
      <br> When I'm feeling bad
      <br> I simply remember my favorite <a href="https://en.wikipedia.org/wiki/Aragorn">kings</a>
      <br> And I don't feel so bad.
    </p>
    <p>
      [Verse]
      <img class=L src="http://www.philsp.com/visco/Magazines/ASF/ASF_0224.jpg" alt="Astounding Science Fiction vol. XLIII, no. 5, July 1949">
      <img class=R src="https://upload.wikimedia.org/wikipedia/en/3/38/Agent_of_vega.jpg" Alt="<i>Agent of Vega</i> front cover">
    </p>
    <p class="verse">
      Pedllers who drive their
      <br> Mysteriuos wagons
      <br> Pretty young ladies
      <br> Who can speak to dragons
      <br>
      <img class=L src="https://www.isfdb.org/wiki/images/4/45/ANLGOCT67.jpg" Alt="<i>Analog vol. 80,no 2, October 1967">
      <img class=R src="https://upload.wikimedia.org/wikipedia/en/7/75/AnneMcCaffrey_Dragonflight.jpg" Alt="<i>Dragonflight</i> front cover">
      <!--
                  http://www.philsp.com/visco/Magazines/ASF/ASF_0445.jpg
                  Analog vol. LXXX, no. 4, December 1967
                  Dragonrider part 1
             -->
      Travelling the Cosmos
      <br> In a
      <a href="https://en.wikipedia.org/wiki/The_Ship_Who_Sang">ship who sings</a>
      <br> These are a few of my favorite things.
    </p>
    <br>
    <img class=L src="https://upload.wikimedia.org/wikipedia/en/6/60/ShipWhoSang.jpg" alt="<i>The Ship Who Sang</i> front cover">
    <p>
      [Verse]
    </p>
    <p class="verse">
      <img class=L src="https://www.isfdb.org/wiki/images/b/b1/FSFMar1959.jpg" alt="The Magazine of Fantasy & Science Fiction, March 1959">
      <a href="https://en.wikipedia.org/wiki/All_You_Zombies">
Time traveling bar men
</a>
      <br> Who are like no others
      <br> Who are their own fathers
      <br> And are their own mothers
      <br>
      <img class=R src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Heinlein-face.jpg" alt="Robert Anson Heinlein, Grand Master of SF"> Of all such stories
      <br> Know <a href="https://en.wikipedia.org/wiki/Robert_A._Heinlein">Heinlein's</a> are kings
      <br> These are a few of my favorite things.
    </p>
    <br>
    <p>
      [Verse]
    </p>
    <p class="verse">
      <img class=L src="https://isfdb.org/wiki/images/1/10/LRDDRCRWLR2002.jpg" alt="Lord Darcy"> A <a href="https://en.wikipedia.org/wiki/Lord_Darcy_(character)">ducal detective</a> whose
      <br> Aide does the magic
      <br> finds that their cases
      <br> are often quite tragic
      <br> I hope more stories
      <br> still lurk in the wings
      <br> These are a few of my favorite things.
    </p>
  </div>
</BODY>

</HTML>

and expected the same results as with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">.

Tags:

2

Answers


  1. 0

    If you inspect the elements from the developer console you can see that the styles aren’t getting applied. The problem seems to be related to img.l and img.r classes, they’re defined as lowercase inside the <style> tag but uppercase in the html markup, to fix it just update your <style> tag with this:

    .verse {
  text-align: center;
  font-size: 2em;
  width: 60%
}

img.L {
  float: left;
  width: 12%;
  position: fixed;
  left: -20%;
}

img.R {
  float: right;
  width: 12%;
  position: absolute;
  right: 20%;
}
    Login or Signup to reply.
  2. 0

    Your display is changing because, with the doctype you first used, you are in "quirks mode" where you never want to be as it is like 1999 all over again.

    Activating Browser Modes with Doctype

    In the Quirks mode the browsers violate Web format specifications in
    order to avoid “breaking” pages authored according to practices that
    were prevalent in the late 1990s. Previously, different browsers
    implemented different quirks. In particular, in Internet Explorer 6,
    7, 8 and 9, the Quirks mode is effectively frozen IE 5.5

    The current doctype is the second one you used, <!DOCTYPE HTML>, and has been required of all HTML documents for at least 15 years.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search