Images on basic web page

Hi,

I have a very basic web page that I have created, the web page references a style sheet, and aslo has a image.

When I view the web page from a file location the page is displayed correctly, with the image in the correct place.  When I put the file onto a web server and try to view it as a web page the image slightly moves location.  I have tried this on different instances of IIS  (6 and 7) and it happens on both.  However I have also loaded the file onto a hosted website and this images are dispalyed correctly.

Does anyone know why ths might be?

I dont know what web service is used by the hosting company.
cablandAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

level9wizardCommented:
Can you share the source code of your page? I suspect there is a relative or absolute path you are using, and that only becomes a problem when you move to your live webhost.

For example, make sure the path to the CSS file and <img> is not something absolute like <img src="c:\wamp\www\myImage.jpg" />. There's nothing wrong with absolute path's, they just generally mean you have to modify them when moving a site with absolute paths.

A relative path could also cause problems, for example something like <img src="./myWebProject/myImage.jpg" /> will mean you need a myWebProject folder in the relative location on your web server.
0
cablandAuthor Commented:
wow, quick response, attached is the code  and the css file that im using.  There are no absolure file paths.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hmtl PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xlmns="http//www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Internet Access</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />	
	</head>

	<body>
		<h1>ThyssenKrupp Services Ltd<img src="TK_image.png" alt="ThyssenKrupp" width="200" height="50" /></h1><br>
		<hr />
		<h2>Access to this site is restricted</h2>		
		<p align="justify">
		The website that you are trying to access has been blocked, 
		this is either due to the nature of the website content or 
		because you are trying a to access a social networking site 
		such as Facebook or a personal email website such as hotmail.
		<br>
		<br>
		If you believe that the website has been blocked in error please 
		send an email to the Service Desk, detailing your reasons why this
		site should not be restricted.<br><br>  Your request will be reviewed
		by a member of the IT department and will be submitted for Director
		approval</p>
	</body>
</html>

Open in new window

body {
	font-size: 10pt;
	font-family: Verdana, Arial;
 	color: black;
	line-height: 14pt;
	padding-left: 40pt;
	padding-right: 40pt;
	padding-top: 5pt;
}


h1 {
	font:10pt ;
	color: #808080;
	font-weight: bold;
	line-height: 12pt;
}

h2 {
	font:10pt ;
	font-weight: bold;
	line-height: 11pt;
}

p.subheader {
	font-weight: bold;
	color: #593d87;
}


img {
	padding: 2pt;
	float: right;
	style="vertical-align:=top";
}

a {
	text-decorative: none;
	
}

a:link, a:visited {
	color: #8094d6;
{

a:hover, a:active {
	color: #FF9933;
}

div.footer {
	font-size: 9pt;
	font-style: italic;
	line-height: 12pt;
	text-align: center;
	padding-top: 10pt;
}

Open in new window

0
cablandAuthor Commented:
The page displays correctly here www.cbtkstest.co.uk

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

level9wizardCommented:
cabland,

My apologies - when I first ready this I thought the image wasn't displaying at all (hence my comments on absolute/relative paths). Now I see it's simple a matter of the image being inconsistent.

When you say, "When I view the web page from a file location the page is displayed correctly", what do you mean by this - please provide more details. For example, are you double clicking the .HTML file on a  windows machine and viewing this in Explorer (not internet Explorer necessarily depending on how you opened it and what version of Windows).

At first I suspected you're seeing a slightly different version of the page because it is being rendered differently by opening in Windows Explorer (possible Internet Explorer) vs the webbrowser you used to visit the site on your IIS server - however, if you've tried it on another server than your IIS and it looks different, it's possibly something else. Obvious question, but are you using the same webbrowser to visit IIS vs the other server?

If the browser you're using is consistent, but you still notice the image is in a different location in IIS vs the other host: it's unlikely but possible the server (IIS) is sending some extra header or something. Take a look at the headers being sent from IIS and see if they are modifying the output (i.e. adding an <xml> tag to the top of the document). You can view header info in FireBug (FireFox) or using something like: http://www.rexswain.com/httpview.html
0
level9wizardCommented:
PS - confusing wording on the second last sentence, if IIS was adding <xml> to the document - this would be something to watch for in the generated HTML (not the headers).
0
cablandAuthor Commented:
Hey, I should of explained properly..

If I right click on the html file and select open with Internet Explorer the file opens and the image is displayed exactly where it should be.

I have IIS set up on 2 servers, if I add the html file (and relevant files) then the image drops onto the horizonal line under the title.

I have also uploaded to the 3 files to a web hosting site, and when I access this site the images are displayed correctly.
0
cablandAuthor Commented:
Bloody annoying, the page opens and the image is displayed correctly using firefox from both IIS sites??
0
cablandAuthor Commented:
And also displayes correctly in Google Chrome??
0
level9wizardCommented:
So where exactly does the inconsistency occur? It doesn't surprise me that there's problems rendering any page in IE as it's a garbage web browser - however, it should happen consistently: is the only difference between your tests in ie the fact that you are hitting two different IIS servers?

If so, did you look at the headers or generated source code/html as I mentioned? That might provide a clue.
0
cablandAuthor Commented:
I have found a resolution to the problem, I think, by switching off compatability mode.  I have re-buillt a clean wind2k8 r2 standard installation and installed apache on it and get the same occurance of error.  Is there anyway in the coding that I can get it to ignore the browser version (if you havent guessed all this is new to me)
0
level9wizardCommented:
cabland,

In short no, there's no way to program your page to ignore the browser version (short of making your page be one large image or something silly like that). In fact, this is an ongoing battle us web developers face every day, and is why organizations like the W3 (http://w3.org) exist.

The best thing you can do is select an appropriate DOCTYPE (http://www.w3.org/QA/2002/04/valid-dtd-list.html) and validate your code accordingly (http://validator.w3.org). Then, even after valid code, if you're still seeing inconsistencies it usually means 1 of 2 things:

1.) Even though the code is valid, it has a misused element or property (or poor logic). For example, margin being used where padding was intended (a box-model dilemma, i.e. see http://www.w3.org/TR/CSS21/box.html).

2.) Even though the code is valid, the browser itself has rendering bugs (the way the browser interprets and displays style code). For the life of Internet Explorer, it has thus far proven to be a major pain in this regard - solutions in these instances usually involve a 'hack' or conditional CSS (see: http://www.quirksmode.org/css/condcom.html)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
cablandAuthor Commented:
I guess its a case oof keep tryin until I find something that works for me then?  I did have a feeling that this was the case after the first couple of days.  Thanks for all the pointers, youve earned the points - cheers.
0
level9wizardCommented:
[cabland]>> I guess its a case oof keep tryin until I find something that works for me then?

Testing (and retesting, and retesting...) is certainly clutch in web development. I recommend testing your website throughout the build (or at least at major pieces) instead of just at the end, because you might find some critical issue late in the game that is a dealbreaker. I usually focus on testing in stable Opera, IE7/8, stable Safari on Mac & PC, and stable FireFox.

Good luck!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.