Why is style="position.... not working?

**Oralloy** · Nov 3 '10, 04:02 AM

LELE7,

You probably need to go to the spec and read a little more in depth.

The document http://www.w3.org/TR/xhtml1 is a good place to start, as it's the XHTML1 specification directly from W3.ORG.

Hopefully that helps. There's likely a strong clue in there.

Good luck resolving things!

Oralloy

**drhowarddrfine** · Nov 3 '10, 11:44 AM

That line your are playing with is the doctype which is required for all modern web pages. If it works without it, that tells me you originally created the page without it. The doctype is the set of rules you are telling the browser you are using to create the page. Change the doctype, change the rules.

But without a link, or the complete markup, anything else we say is just a wild guess.

**Oralloy** · Nov 3 '10, 01:31 PM

@drhowardddrfin e,

That's a perfect way of stating the meaning of DOCTYPE. I'd have gone completely techie trying to describe it, which is why I posted the link.

Thanks!

**LELE7** · Nov 8 '10, 04:44 AM

Sorry I was delayed a few days, I hope people can still help me. Here's the part that's giving me problems. Try running this as its own page. The first image- the userImage, is supposed to be positioned properly over the frame image. If I leave out the first line, it listens to my positioning. When I include it, it totally ignores it. Any insights? thanks, I'm getting desperate!

Code:

<!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>
<head/>
<body>
	<table>
	<tr>
		<td>
			
			<form method="post" enctype="multipart/form-data">
			<input type="hidden" name="upload" value="1"/>
			<p><input type="file" name="file"/></p>
			<p><input type="submit" value="Upload"/></p>
			</form>
			<div style="position: relative; left: 0; top: 0;">
				<img id="userPhoto" src="images/originals/flower-creative.jpg" width ="200" height="300" style="position: absolute; top: 50; left: 50;"/>
				<img src="frames/frames/850.gif" width ="300" height="400" style="position: relative; top: 0; left: 0;"/>			
			</div>
			
		</td>
	</tr>
	</table>
</body>	
</html>

**drhowarddrfine** · Nov 8 '10, 12:56 PM

You are seeing changes because, without the doctype, you are in quirks mode and the box model is completely. different. I'd bet you are testing this in IE, too? Never, ever do that.

**Death Slaught** · Nov 8 '10, 04:29 PM

Here is a working, validated, example. Comments are included to explain the code.

Code:

<!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>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	
	
<body>
    <table>
    <tr>
        <td>
 
            <form method="post" enctype="multipart/form-data" action="">
            <input type="hidden" name="upload" value="1"/>
            <p><input type="file" name="file"/></p>
            <p><input type="submit" value="Upload"/></p>
            </form>

			<!-- Position is relative to change the starting point of absolutely positioned elements. The starting point (top and left set to 0) will be within the division, not the browser. -->
            <div style="position: relative;">

				<!-- Elements are listed from the bottom up. Since both elements have absolute positioning, the frame must be listed first. -->
                <img src="http://www.mwallpapers.com/wallpapers/allgraphic_org_wallpapers_from_mufasa_191_7-800x600.jpg" alt="" width ="300" height="400" style="position: absolute; left: 0;" />  

				<!-- Left and top are set to pixels. You need to tell the browser the value of the number (pixels, emphasis, etc.) -->
                <img id="userPhoto" src="http://www.mwallpapers.com/wallpapers/animal_0027-800x600.jpg" alt="" width ="200" height="300" style="position: absolute; left: 43px; top: 50px;" />   
            </div>
 
        </td>
    </tr>
    </table>
</body>    
</html>

To make it validate you simply,

Include title and character encoding.
All forms require the action attribute.
All img elements require the alt attribute.

Regards, Death

**Oralloy** · Nov 8 '10, 04:36 PM

drhowarddrfine,

I don't know about testing on I.E. Seems like he's going to have to make sure that his application works on uSloth browsers at some point. After all, ignoring over half the 'Net market is a good.

Or worse, if this is an in-house application, and the only browser he has to worry about is I.E. *shudder* I happen to bear this particular cross. Worse is I.E. version incompatibiliti es, and systems that are specifically held back, because the later rev browsers break sites.

Oh well...

Cheers!

**Oralloy** · Nov 8 '10, 04:37 PM

Death,

Glad you were able to find the answer. Thanks a bunch for posting the answer, too. We all learn when people do that.

Cheers!

**drhowarddrfine** · Nov 8 '10, 05:23 PM

@Oralloy - I usually complete my thought about IE. One should never use IE as a reference for how things should work. They should always use a modern browser first, then look at IE to see how it screws it up. The many quirks and bugs in IE are well known, as are the hacks to fix it.

I never advocate ignoring IE. I just wish everyone would.

**Death Slaught** · Nov 9 '10, 01:37 AM

Originally posted by Oralloy

...

No problem, it's rather simple once you under how positioning works.

Originally posted by drhowarddrfine

...

Haha, do you mind if I start quoting you?

**LELE7** · Nov 9 '10, 03:12 AM

Thanks so much, Death. I wish I would have posted earlier!

**drhowarddrfine** · Nov 9 '10, 01:26 PM

As I journey about the 'net, I frequently find statements which I swear are quoting me, so feel free. :)

**Death Slaught** · Nov 9 '10, 03:26 PM

Originally posted by LELE7

...

You're quite welcome, but in future pages please keep in mind that the doctype should never be an afterthought. Also, if you wanted to switch to a strict doctype I think that all you would have to do is place the hidden input element in a paragraph.

Originally posted by drhowarddrfine

...

That really doesn't surprise me. You have a way of wording things that somehow stresses the importance of what you're saying, while keeping the explanation simple. Thanks, and if I quote you anywhere but here I'll give you credit. ^_^