Solved

Images on basic web page

Posted on 2011-02-21
13
833 Views
Last Modified: 2012-05-11
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.
0
Comment
Question by:cabland
  • 7
  • 6
13 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 34943745
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
 

Author Comment

by:cabland
ID: 34943765
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
 

Author Comment

by:cabland
ID: 34943963
The page displays correctly here www.cbtkstest.co.uk

0
 
LVL 11

Expert Comment

by:level9wizard
ID: 34944786
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
 
LVL 11

Expert Comment

by:level9wizard
ID: 34944810
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
 

Author Comment

by:cabland
ID: 34944831
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:cabland
ID: 34944944
Bloody annoying, the page opens and the image is displayed correctly using firefox from both IIS sites??
0
 

Author Comment

by:cabland
ID: 34945040
And also displayes correctly in Google Chrome??
0
 
LVL 11

Expert Comment

by:level9wizard
ID: 34954201
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
 

Author Comment

by:cabland
ID: 34958498
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
 
LVL 11

Accepted Solution

by:
level9wizard earned 250 total points
ID: 34963100
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
 

Author Closing Comment

by:cabland
ID: 34963946
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
 
LVL 11

Expert Comment

by:level9wizard
ID: 34973839
[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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now