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.
13  2415  Oralloy 988
Recognized Expert Contributor
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.
Oralloy 988
Recognized Expert Contributor
@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!
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
Oralloy 988
Recognized Expert Contributor
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 988
Recognized Expert Contributor
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.
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 style="display:none"> can be displayed by setting the style attribute
to "display:", or hidden with "display:none". This gives the illusion that the person
filling out the form is switching from page to page...without the overhead of extra
hits on the server,...
|
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 http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>Untitled</title>
|
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 perform updates. All the styles that are
set are being followed by all templated columns with the exception for the
update column. The update column does set the BackColor appropriately but
when setting its ForeColor the LinkButton's color is blue and...
|
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 - 5 seconds.
When it is complete, the same page is still displayed. What is the best way
to tell the user the page is working? I don't like the idea of switching to a
| | |
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);
mybody.appendChild(newdiv);
Using Firefox's DOM inspector, I only saw "position:absolute"
Does a multi-attribute CSS specification, have to be set another way ?
|
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 multiline textbox. I am
still fairly new to developing in ASP.net and C#, and I'm not sure if there
is a better way to disable the scrollbar.
The code above turns off the scrollbar just fine, however the textbox does
not remain in the location...
|
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: style attribute present)
<wsdl:operation name="HelloWorld">
<soap:operation soapAction="http://tempuri.org/HelloWorld"
style="document" />
But when .Net 2.0 webservice (VS2005) generates a wsdl -
|
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
What am I doing wrong...?
|
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 log1()
{
window.location="log1.asp"
}
function page1()
{
window.location="page1.asp"
}
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| | |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
