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.
Here is a working, validated, example. Comments are included to explain the 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
13  2395 
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
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.
@drhowardddrfine,
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!
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>
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.
Here is a working, validated, example. Comments are included to explain the 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
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 incompatibilities, and systems that are specifically held back, because the later rev browsers break sites.
Oh well...
Cheers!
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!
@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.
@Oralloy
No problem, it's rather simple once you under how positioning works. @drhowarddrfine
Haha, do you mind if I start quoting you?
Thanks so much, Death. I wish I would have posted earlier!
As I journey about the 'net, I frequently find statements which I swear are quoting me, so feel free. :)
@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. @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. ^_^
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Dan R Brown |
last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to
break up this form into several "tabbed" sections, I break up the form using <div>
tags. Each <div...
|
by: Hostile17 |
last post by:
Consider the following HTML.
----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta...
|
by: Ghyslaine Crespe |
last post by:
Hello,
In my script, the line
document.getElementById(id).style.background-position = "-200px -500px";
fails !
So, how can I change the background-position value ?
|
by: Max Weebler |
last post by:
Hi,
I have a datagrid built that has an alternating item style that sets the
backcolor and ForeColor of its rows. I have 4 template columns. One of them
has a LinkButton embedded in it to...
|
by: David Thielen |
last post by:
Hi;
..NET 2.0
I have a situation where when the user selects an item in a drop down list,
the code behind is called to update the values in another list on the page.
This update can take 3 -...
|
by: awebguynow |
last post by:
OK, I'm on the bandwagon, to mimic Google Suggest
At this point I'm just trying to place my div in the right x, y spot.
newdiv.setAttribute("style", "position:absolute;left:"+x+";top:"+y);...
|
by: SAL |
last post by:
I have the following line of code in my Page_Load Event of my ASP.net page:
txtExplanationofChange.Attributes.Add ("style","overflow :hidden");
which allows me to can turn off the Scrollbar of my...
|
by: =?Utf-8?B?QXR1bA==?= |
last post by:
When .Net 1.0 webservice (VS2003) generates a wsdl -
<wsdl:binding name="TestSoap" type="tns:TestSoap">
<soap:binding transport="http://schemas.xmlsoap.org/soap/http"
style="document"/(note:...
|
by: =?Utf-8?B?bWFnZWxsYW4=?= |
last post by:
I have VB 2005 running on XP.
Me.ProgressBar1.Style =ProgressBarStyle.Blocks
does not appears to be functions, I'm still getting the "continuous" rather
than a "block"... running on XP
...
|
by: vikas251074 |
last post by:
When change the <script language="javascript"> to <script type="text/javascript">, javascript function now works no more. Previously it was working. Javascript function is given below -
function...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
