My site looks different when uploaded

Discussion in 'HTML & Website Design' started by SSimp, Sep 29, 2008.

  1. #1
    Hello, I'm a newbie that thought I knew how to link up css stylesheets & javascript. Apparently I do not. So I have a very basic fundamental problem that I hope some of you can help me out with.

    I used a template to create my website using the trial version of Dreamweaver CS3. When using the "Preview in browser" function in DW, my site looks how I want it. But when I upload it to the server, it seems to be missing some pieces. Primarily the css portions pertaining to the background color and such.

    Can somebody please look at my site before I go any further and point where and what the problem is?

    secret recipes online

    And this is how it's supposed to look.

    file:///C:/Documents%20and%20Settings/HP_Administrator/My%20Documents/Secret%20Recipes%203/Index.html
    (okay, you're just going to have to trust me that there should be a light pinkish background that matches the page - As well as the heading color and menu color, among other things.


    Thank you!


    P.S. Please feel free to critique and point out any other errors, and improvements I could make.
     
    SSimp, Sep 29, 2008 IP
  2. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #2
    That's sweet :D
    Makes me think that you aren't uploading the page properly to your server. Either missing the css file, or images or any other component that should go with your page when put on a live server.
     
    Clive, Sep 29, 2008 IP
  3. SSimp

    SSimp Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks Clive.

    Yeah, I made some headway this evening, but I'm still not there yet. I just noticed there is a CSS sub-forum. Perhaps I should have posted this there.

    Still, anyone, please feel free to critique it in any way. I'm sure there are things on the site I can improve on.
     
    SSimp, Sep 29, 2008 IP
  4. luckybee

    luckybee Peon

    Messages:
    151
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Your images are all local files. This means people that don't have those local files cannot see them. You need to upload the images to your server and change the image paths to match those on your server.

    For example:

    file:///C|/Documents and Settings/HP_Administrator/Desktop/fresh2Root/themes/fresh2/images/1_green_1.png

    Becomes (for example):

    http://www.secretrecipesonline.com/images/1_green_1.png

    or

    ../images/1_green_1.png


    You also override background color in your body tag.
     
    luckybee, Sep 29, 2008 IP
  5. offshore web development

    offshore web development Peon

    Messages:
    235
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    is that specifically happens with any particular browser?
     
  6. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #6
    Indeed, all image paths point to a location that is on your computer, you should follow luckybee's instructions and update that.
     
    Clive, Sep 30, 2008 IP
  7. noobi

    noobi Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Your css link is pointed locally, too:
    Line 15: <link rel="stylesheet" href="file:///C|/Documents and Settings/HP_Administrator/Desktop/fresh2Root/themes/fresh2/style.css" type="text/css" />

    You need to define a site in DW (click Site > New Site) and store it all in one place on your pc (in your Desktop, My Documents, or somewhere else). Call the site folder Site or something else descriptive. Inside Site folder you should store your html files and folders called Scripts, Styles and Images (in reality you could call them Fred, Ann and Tony if you wanted but let's keep the names descriptive). Store your javascript in Scripts, your CSS in Styles and your images in Images. DW can then write the correct paths ready for when you upload the entire Site folder.
     
    noobi, Sep 30, 2008 IP
  8. SSimp

    SSimp Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Wow...I didn't realize what a great question this was until I actually put it to the test.

    It is ALMOST how I want it in IExplore, but looks and acts completely different in the Firefox browser.

    I almost exclusively use Firefox, so I incorrectly assumed that when I previewed in DW with IExplore, it would be the same. Wow, what a difference. Why is this and what to do about it?


    I'm going to step away from the computer for awhile...I'm getting a headache :D
     
    SSimp, Sep 30, 2008 IP
  9. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #9
    It is called cross-browser compatible coding.
    And the best code is the hand-written one if you know what you're doing, and not the code generated by software.
     
    Clive, Sep 30, 2008 IP
  10. SSimp

    SSimp Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thank you everyone for your help. Making slow progress here and there...it is certainly a good learning experience for me.

    Before I google the problem, any help as to how to correct the cross-browser compatibility issue I'm having?

    And also, while I've made progress with my images, I am still having problems applying the JavaScript. I've tried change the js paths to match those on my server, but not having much luck for some reason...your thoughts? Thanks.
     
    SSimp, Oct 1, 2008 IP
  11. Jingletruck

    Jingletruck Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You can add all the browsers to DW so you can preview your design in each, typically templates tend to not be to hot for cross browser compatibility.
    Test IE and Firefox first as these cover most of the visitors browsers.
     
    Jingletruck, Oct 1, 2008 IP