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.
LELE7 0 Newbie Poster
Baradaran 1 Junior Poster in Training
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?
ko ko 97 Practically a Master Poster
teedoff 3 Posting Pro
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.
LELE7 0 Newbie Poster
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> teedoff 3 Posting Pro
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.
Cool&Awesome 7 Junior Poster in Training
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;
teedoff 3 Posting Pro
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.
LELE7 0 Newbie Poster
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.