Uploaded site different from local site

alowe · March 26th, 2008, 10:44 PM

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 · March 26th, 2008, 10:51 PM

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

frinkky · March 26th, 2008, 10:51 PM

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 · March 26th, 2008, 11:48 PM

Quote:

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 · March 26th, 2008, 11:58 PM

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

alowe · March 27th, 2008, 12:00 AM

Quote:

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 · March 27th, 2008, 12:13 AM

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 · March 27th, 2008, 12:14 AM

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 · March 27th, 2008, 12:18 AM

Quote:

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 · March 27th, 2008, 12:26 AM

Quote:

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 · March 27th, 2008, 12:37 AM

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 · March 27th, 2008, 10:53 AM

Quote:

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 · March 27th, 2008, 11:12 AM

Quote:

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 · March 27th, 2008, 11:46 AM

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 · March 27th, 2008, 03:45 PM

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 · March 27th, 2008, 03:49 PM

Quote:

Originally Posted by alowe

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

sorry, here they are

alowe · March 27th, 2008, 03:55 PM

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.

frinkky · March 27th, 2008, 05:54 PM

Just add some padding to the bottom of the buttons. Something like:

Code:

#whatever li {
padding:0 0 5px 0;
}

alowe · March 27th, 2008, 08:19 PM

Quote:

Originally Posted by frinkky

Just add some padding to the bottom of the buttons. Something like:

Code:

#whatever li {
padding:0 0 5px 0;
}

lol frinkky, was so easy after all

i went through all the other webpages and fixed all the markup errors (which took hours), except one:

in http://aaronmicalowe.10gbfreehost.com/videos.html i have copied several embedded links to youtube videos. unfortunately xhtml don't like the embed keyword inside the links. i found a link which explained how to fix this here: http://alistapart.com/articles/flashsatay but since i only started doing html a few days ago, after reading a bit of this my mind finally melted

totally

i feel like a zombie

anyway, can someone please tell me how you're supposed to write the following html in html/css/xhtml/whatever in a way that is still strict.

<object width="210" height="175"><param name="movie"
value="http://www.youtube.com/v/7U7Zhrhy7IQ...</param><param name="wmode"
value="transparent"></param><embed src="http://www.youtube.com/v/7U7Zhrhy7IQ&hl=en"
type="application/x-shockwave-flash" wmode="transparent" width="210"
height="175"></embed></object>

thanks, i appreciate the help as otherwise i'd have to go back to school just to understand the basics of some of this stuff

frinkky · March 27th, 2008, 08:59 PM

Hmm, not embedded youtube videos before, but a quick Google found this

Quote:

my mind finally melted

totally

i feel like a zombie

Its all good practice