Dlo 0

Hi I just started learning html and css. In the following code, when the doctype is commented out it works fine, but when left in the relative positioning stops working.

<!--
 <!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>Untitled Document</title>
</head>

<img alt="Big pic" width=300 height=300 
style="z-index:1; position:relative;">

<img alt="Small pic 1" width=50 height=50 
style="z-index:1; position:relative; top:-200; left:-20;">

<img alt="Small pic 2" width=50 height=50 
style="z-index:1; position:relative; top:-120; left:-200;">

<body>
</body>


</html>

2 answers

danwellman 5600
4
points

Is that how the code truly is in your file? The img elements should be within the <body>...</body> tags. This may explain why the position works in quirks mode (i.e. with no DOCTYPE) but doesn't work when in standards mode.

Which browser are you testing in out of curiosity?

Always use a DOCTYPE to trigger standards mode - there is never a time when you want pages rendering in quirks mode ;)

Also, inline styles (using the style attribute directly on elements in the HTML) is a bad thing - it leaves your code a mess, makes pages load slower and doesn't seperate content from presentation

Answered about 6 years ago by danwellman
3
points

The short answer is "yes," the long answer is "yes, but there are several related things in your code that could be causing problems."

As @danwellman mentioned, commenting out the DOCTYPE triggers quirks mode (in IE), which exists to cater to older, non-standards-compliant websites. If you don't want to spend a lot of time debugging non-standard code (trust me, you don't), you should always use a DOCTYPE, and always stick to its rules.

Dan mentions moving the img tags inside your <body>, which is probably the biggest thing in making this work. There are a few other things to look at, too:

  1. You're using an xhtml DOCTYPE, so you'll need to "close" your img tags. This is a self-closing tag, so the format is <img attribute="value" />. (replace attribute="value" with all of your attributes like alt, height, width, etc).

  2. When using CSS "top" and "left", you should always include units. Some browsers may assume that you meant "-200px", but being explicit will help avoid potential problems.

  3. I don't know what the context of your images is, but I've found that using lots of negative numbers to move elements around can cause a lot of confusion in the long run. There are some cases where it's appropriate or necessary, but generally code is easier to understand later if you don't move elements outside of their container. Similarly, I'd steer clear of z-index unless you need to explicitly control overlapping layers.

Answered about 6 years ago by Michael Martin-Smucker
  • It's actually been my experience that omitting units in positioning breaks the positioning - in Firefox and Chrome, at the very least. So it seems like, besides getting those images into the body, declaring the units in those tags is the first thing thing that needs to be done for this to work. Ben Saufley about 6 years ago
  • Good to know -- I'll update my answer. Michael Martin-Smucker about 6 years ago