asked on

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.

level9wizard

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.

cabland

ASKER

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

cabland

ASKER

The page displays correctly here www.cbtkstest.co.uk

level9wizard

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

level9wizard

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).

cabland

ASKER

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.

cabland

ASKER

Bloody annoying, the page opens and the image is displayed correctly using firefox from both IIS sites??

cabland

ASKER

And also displayes correctly in Google Chrome??

level9wizard

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.

cabland

ASKER

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)

ASKER CERTIFIED SOLUTION

level9wizard

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cabland

ASKER

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.

level9wizard

[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!