Uploaded site different from local site

[alowe]

Spent a few days creating a website. Needed to upload it today to add a functioning search facility. After uploading, most of the font types, hover behaviour, background colour, font sizes and spacing were completely messed up. I am using HTML and 99% CSS for formatting. All editing done through notepad.

Is there a way I can design a website to behave and look as it does on my local computer?

I am using IE7. Peculiar thing is if I reload the same page, some of the formatting gets fixed, but still most of it is still wrong.

[CloudedVision]

most likely the link to your stylesheet got messed up. double check it.

[frinkky]

You mention fonts. Which fonts did you specify in your style sheet? but thats a minor issue, can you post a link and a screenshot of your local view to compare.

[alowe]

Originally Posted by CloudedVision

most likely the link to your stylesheet got messed up. double check it.

the stylesheet is in the same directory as the index file and is just referred to by it's filename with no path.

besides, the html code uploaded is no different from that on the local computer. if a path or filename was incorrect, it wouldn't work locally either.

[CloudedVision]

well, it sounds like your missing the stylesheet, i can't really think of another cause. sure its uploaded?

[alowe]

Originally Posted by frinkky

You mention fonts. Which fonts did you specify in your style sheet? but thats a minor issue, can you post a link and a screenshot of your local view to compare.

fonts specified are:
Verdana,Tahoma,Arial,sans-serif;

font actually shown is, times new roman (or whatever ie7's default is).

the link to the online html is: http://aaronmicalowe.10gbfreehost.com/

interesting thing is, when i load the local version into ie7's cache, then go to the online version (which is identical in every way), the online version now looks exactly as it should (except that it isn't centred on the page).

pictures of what it should like attached.

[frinkky]

Tahoma as I recall is not part of the generic web font list. These are the standard font families:

font-family:Arial, Helvetica, sans-serif;
font-family:"Times New Roman", Times, serif;
font-family:"Courier New", Courier, monospace;
font-family:Georgia, "Times New Roman", Times, serif;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-family:Geneva, Arial, Helvetica, sans-serif;

It would default to Times if it can't find tahoma.

Try that first then lets see where we are.

[alowe]

and here is what the online version of the contacts page looks like:

the background colour is white not black
the logo url at the top is the wrong font
the top menu bar font is too large causing it to overlap
the side menu bar and rest of content fonts are wrong too
the whole page should also be centred

i can see how this could all be caused by the css not loading - what i don't see is why, how i can test this, and how i can fix it

[alowe]

Originally Posted by frinkky

Tahoma as I recall is not part of the generic web font list. These are the standard font families:

if ie7 can find Tahoma to display the html locally, why can't it use the same font to display the identical page online?

also, i based the webpage on a generic template from a well known site (top google link). i'd be surprised if they used fonts that don't work on ie7.

a similar problem happened recently when i direct linked to an image for ebay. the link only worked while the image was in cache. once the cache was cleared the link failed. i ended up using photo bucket to solve this problem, but it seems ie7 can interpret pages differently depending on what is in the cache that matches the items being loaded.

[alowe]

Originally Posted by frinkky

It would default to Times if it can't find tahoma.

Try that first then lets see where we are.

ok, i replaced Tahoma with Arial cause they're not much different.
cleared the cache.
when loading the page for the first time it's still messed up, but after reloading it's fixed (except still not centred on the page). this happens whether i use Tahoma or not

[frinkky]

One step at a time

I've attached what I see in ie7. No issue with fonts and no issue with white background, just the centering.

It could be a local cache issue. Anyway, try changing

margin: 0 auto;

to

margin: 0 auto 0 auto;

on #wrap

But what you should do before anything else is fix your markup errors: validation

Well, a couple things to try.

[alowe]

Originally Posted by frinkky

One step at a time

I've attached what I see in ie7. No issue with fonts and no issue with white background, just the centering.

It could be a local cache issue. Anyway, try changing

margin: 0 auto;

to

margin: 0 auto 0 auto;

on #wrap

But what you should do before anything else is fix your markup errors: validation

Well, a couple things to try.

thanks

the page looks quite good. did you have to reload it, or was it like that first time you loaded? i don't trust what ie7 is showing me.

i'll check out the markup errors - will probably be a lot because i haven't done html or css before. just did this by copying and trial and error.

[unitedcraig]

Originally Posted by alowe

i don't trust what ie7 is showing me.

I no this is a bit too late, but what you are best of doing in my opinion is designing for firefox, and then fixing the errors found in IE.

This can save a lot of time and hassle

[frinkky]

To help you a bit with your validation:

1. You've forgotten the speechmarks on most of your attributes (i.e. <li id="active">)

2. You've got some duplicated ID names, if you need to use more than one per page they need to be set as a class (i.e. <li class="active">

3. heading tags should be outside a tags (i.e. <h2><a href="#">blah</a></h2>)

4. You haven't closed a lot of your <li>'s (see #toplist)

5. some of your attributes are not allowed in XHTML strict (target)

6. should always include alt attributes for images

7. use the self closing <br /> in XHTML Strict if you must use line breaks

8. If you're using self closing tags ( such as <img />) double check you've put in the / as the penultimate character.

9. careful not to use illegal characters in attribute lists (I see a ) in there somewhere)

10. XHTML Strict tags must be in lowercase ( img not IMG or alt instead of ALT)

11. Lastly double check that all your opening tags (<p> for example) are all closed (</p>) and vice versa; any closing tags need to have the opening tags too.

So not that much to do to get it right and you'll be well on your way to understanding XHTML Strict that little bit more. Plus you might fix your centering issue.

I think most people will agree that you fix the obvious errors first before trying to debug the not so obvious so you know you're starting from a clean slate, so to speak.

[alowe]

ok, i've validated the index.html file. only has a warning now about assuming utf-8. i've checked the meta tag and it is correct, so maybe it's 10gbfreehost that's overriding it. checked the console panel and faq at 10gbfreehost and couldn't find any options relating to this so have decided to live with that bit for now. but all other errors are fixed

onto the rest:
changed to margin: 0 auto 0 auto; in #wrap but still not centred

the side menu (called avmenu) isn't correct (pics attached). on my local version there's a gap between the bottom of the font and the bottom of the block its in. on the online version this gap is gone and the announce section below is thinner (or the font in it is wider).

i tried adding a height: 1.7em; to #avmenu li a { and this worked locally (i.e. if i made it 2em it was a greater gap), but on the online version the same change does nothing

one last thing:
when i open the local version i get a popup in ie7's info bar saying that it has restricted scripts and activex for this page, but i don't see it having that anyway

PS also validated the css file but it had no errors

[alowe]

Originally Posted by alowe

the side menu (called avmenu) isn't correct (pics attached).

sorry, here they are

[alowe]

here's those two images in the same image so it's easier to see.
PS the name of the css thing for the side menu is avmenu - i haven't renamed it something better yet.