If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Webpage doesn't structure online, but does offline.

Hi everyone,

I wasn't sure what Discussion Board to put this on but thanks in advance.

I have a HTML webpage written in XHTML 1.0 using CSS.

I've tried hosting the webpage on both a Windows and Linux CPanl system with the same result and that is the webpage just doesn't structure at all, it's all over the place in Firefox, Chrome, IE 9. But it does look as expected when IE 9 is in compatibility mode or when viewed from IE 8 in normal and compatibility mode.

However, if I open the .html file locally on my computer the webpages structure perfectly in every browser I throw at it. The only prompt I get is from IE 9 reading 'Internet Explorer restricted this webpage from running scripts or ActiveX controls' then I just click 'Allow Content' and it's fine, I think this is probably just a IE 9 local security setting and nothing to worry about but just thought I'd throw it in encase it gives someone a hint.

Url

You may want to start correcting the markup errors in your code... For example I notice several <style> declarations that are not in the <head> section of your code. Those aren't legal, so I suppose browsers have the right to ignore them.

You should first restructure your CSS, it is badly written so some browsers may not interpret it right.

First issue. How come you have so many <style> tags? If your going to have your styles right on the page, put everything in one style tag, will result in cleaner code and a smaller size page. I cannot give you specific line errors because you have so much code all over the place but will try my best!

You should transfer all your code to an external style sheet.

Now for the coding problems I see in your css (Looked through FireBug)..

1) Well the biggest one of all. you don't have any defined styles for the actual html and body elements of your website. For example, on my sites, I ALWAYS start out declaring margin:0 and padding:0 to ensure all my positioning is exactly how I want it on the page.

It seems that you most likely want the page centered? Use text-align:center in your html declaration to ensure that anything with a margin set to auto inside your page container is centered on the website. In your #pagecontainer declaration, insert margin:auto and it should align the whole site to the center of the users browser.

2) you have "2" #pagecontainers, both containing position:relative.. This could cause a potential "misfire" of the command. If that makes any sense.

5) You have way to many ID's on your page, only use ID's for the MAIN static elements on your page that will never update (have new content added to it).

For example, you have set a div id for a button (div id="button")... You could just use the image in the html then set a class to the image..for example..if you had an image for the button and you gave it a class of "myImage"

6) The way you have your javascript linking set up is creating a double entity as well. Most of your scripts on your made you links to them at an external source, and also have the script coded right in the page as well...There's no need to have them set up both ways..Either have all the javascript coded in "one" <script type="text/javascript" src="xxxxxx.js"> </script> declaration right on the page (which I don't recommend) or just have separate declarations that links to the several js. files or have all the scripts in one big .js file.

7) It seems you have quite a bit of Javascripts for a small-sized website. Is there any javascript that you have that you may not being using anymore? If the browsers is rendering javascript to files or elements that are no longer on the page or anything, it will require higher page load time.

8) In your meta tags, declare the name of the meta first then the content.

9) Try not to use iframes for anything, they are depricated and may be causing layout errors if the browsers are rendering them right. Especially the new ones. I think I may of saw some ajax scripting as well? If you use ajax to update Div's rather than update iframes.

Thats a few of the things I noticed. I went through it really fast but hopefully if you fix some of these errors your page will be fresh as new. If you need any more help or anything let me know, or send me a private message. Good luck with your coding adventures!

OK I went back to the developer and they admitted they weren't sure of hwo to export a website from there system. They tried again but it seemed to be the exact same thing. So I've gone through some of the code myself to get it working.
It now works fine offline in every browser, but is still having troubles online.
Any further help would be greaty appreciated.

Fixed.

The issue has been resolved, along with having to change the doctype... redo all the style etc the end fix was because of the following.

All I can say is I will never be buying another website from this developer and will do all I can to stop anyone I know from doing the same thing. There original code is TERRIBLE.

The problem seems to be right here:

Code:
<link rel="stylesheet" type="text/css" href="getcss/index1111.html?Staging=Yes&amp;Stage=Show&amp;" media="screen"/>
This file contains all the css that should structure the site correctly. My guess is that because it's an HTML file and doesn't have a <style> and </style> tag in it, normal modern browsers ignore any css in it, but IE renders it as normal.

Try renaming that file to index1111.css and relinking to it. See if that sorts things out.