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>
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
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:
You're using an xhtml DOCTYPE, so you'll need to "close" your
imgtags. 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).
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.
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-indexunless you need to explicitly control overlapping layers.