Member Avatar for LELE7

I have an upload form that uploads a picture and places it relative to another image. It works fine on it's own web page, but when I add it the website, all my positioning is disregarded. This is in IE and Firefox, and with both absolute and relative positioning.
I boiled it down to this line: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> which seems to be quite important, however, when I remove it, my problem is gone. Can someone please explain what this does, and how I can prevent it from causing me problems? Thanks.

  • 5 Contributors
  • 8 Replies
  • 221 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by LELE7

Dani AI

Generated

Short summary and a practical checklist based on the thread: the visible symptom (positioning working with the doctype removed, broken when it was present) usually means the page was switching rendering modes and exposing a CSS/markup error that standards-mode browsers treat strictly. was right to flag the doctype as important, to suggest validation, to check the HTML structure, and correctly pointed out the unit issue that fixed the immediate bug. For why this happens and how to avoid it in future, see the steps below. (developer.mozilla.org)

Key rules to keep in mind when overlaying one image over another

  • An absolutely positioned element is placed relative to its nearest ancestor that is positioned (position other than static). If no such ancestor exists it is placed relative to the initial containing block. Make the container the positioning context when you want predictable overlay behavior. (developer.mozilla.org)

Fast debugging checklist (do these in order)

  • Confirm the doctype is the very first thing in the document (use a simple modern doctype). Check document.compatMode in the console. (developer.mozilla.org)
  • Use DevTools: inspect the overlay element, open the Computed/Styles panel and verify top/left are present and have the units you expect. If a declaration is invalid the browser will usually ignore it — that’s how a missing unit can be invisible until you switch modes. (developer.chrome.com)
  • Run the HTML validator and, separately, a CSS linter/validator to catch malformed tags and invalid property values. Fixing the head tag and other errors makes browser behavior consistent. (developer.mozilla.org)

Best-practice notes

  • Use the HTML5 doctype at the top of templates, keep layout CSS in stylesheets (not scattered inline), give the wrapper a position: relative, and always supply units for non‑zero length values. That keeps pages behaving the same across pages and prevents quirks-mode surprises. (developer.mozilla.org)

Recommended Answers

All 8 Replies

Member Avatar for Baradaran

Hi, the "line" you have picked out is the doctype declaration, so that the browser knows how to handle the code it receives.

You have to get to the code and inspect the structure of the whole page. Where do you display the uploaded image? In the main page or in an inline frame? Would it make any difference if you try to put a dummy picture in the place of the uploaded picture or in other words, does this distortion happen when you upload a picture?

How about pasting a few lines of the code here?

Member Avatar for teedoff

If I understand you correctly, and if you are using divs to contain these images, then you might be looking at images to large to display side by side other images within divs. But im just guessing since you havent posted your entire code or a link to your site.

Also, as someone pointed out earlier, the doctype is THE most important thing. There are different types, but once we see your code we can tell. I would warrant the doctype is not the issue.

Member Avatar for LELE7

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!

<!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>
Member Avatar for teedoff

Ok first things first. You have bad tags in your html. The <head> opening tag should be closed like so: </head> You have <head/>

You also have several errors in your code validation. But I suspect if you fix the head tag, most of them will be resolved.

Copy and paste your code here to see your errors and work through them. After they are fixed, see what you've got.

Edited by teedoff because: n/a
Member Avatar for Cool&Awesome

Hmmm..

<img id="userPhoto" src="images/originals/flower-creative.jpg" width ="200" height="300" style="position: absolute; top: 50; left: 50;"/>

I think you may need to add "px" to your positioning, like this: top:50px; left:50px;

This is to let the browser know it's pixels, (as it might as well be % or whatever)

The only case when you don't have to do this is when the value is 0 (as 0px and 0% is the same) which would explain why the rest of your positioning works well.

If it works but your image ends in a weird position, remember to bring back position:absolute; to position:relative;

Member Avatar for teedoff

Hmmm..

<img id="userPhoto" src="images/originals/flower-creative.jpg" width ="200" height="300" style="position: absolute; top: 50; left: 50;"/>

I think you may need to add "px" to your positioning, like this: top:50px; left:50px;

This is to let the browser know it's pixels, (as it might as well be % or whatever)

The only case when you don't have to do this is when the value is 0 (as 0px and 0% is the same) which would explain why the rest of your positioning works well.

If it works but your image ends in a weird position, remember to bring back position:absolute; to position:relative;

Yes you also need to specify what unit of measurements. I was trying to take things step by step. First thing you need to learn is you need to write basic standard correct html code.

Member Avatar for LELE7

Hmmm..

<img id="userPhoto" src="images/originals/flower-creative.jpg" width ="200" height="300" style="position: absolute; top: 50; left: 50;"/>

I think you may need to add "px" to your positioning, like this: top:50px; left:50px;

This is to let the browser know it's pixels, (as it might as well be % or whatever)

The only case when you don't have to do this is when the value is 0 (as 0px and 0% is the same) which would explain why the rest of your positioning works well.

If it works but your image ends in a weird position, remember to bring back position:absolute; to position:relative;

Thanks so much! This was the issue- that I was missing "px". I love these annoying little errors that can drive you crazy....

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.