Hi Guys,

I uploaded my site : http://www.frscdesign.coffeecup.com/ but it only applies the style when I view in chrome.

It wasn't made with CC software so I directly uploaded the files to S-Drive.

Any advice on what I could of done wrong?

Thanks,
Darren

I can't open the site.

doh! www.frscdesign.coffeecup.com

missed an e

This is the problem.

Hi Darren
Since it's not a responsive site, you could try giving the image a width and height. Also, you could put something between the header and footer to hold your colors/styles and the image, something like .maincontent. Also change header, nav and footer to " <div class="header"></div> ", etc., or add a boilerplate/shiv to make all browsers recognize the HTML5 tags:
http://mashable.com/2010/09/01/html5-boilerplate-guide/

Eric, is it that backslash ... \ ...?

That's the issue I'm having. It has a fixed width and height but in firefox the styles don't apply but in chrome they do.

I have one stylesheet for all the items that don't change, header footer nav background etc but for different pages I have an extra stylesheet so for the home page I just have a stylesheet that styles the image as that's all I have on there at the moment and for the galleries + about page I have one that styles the section, aside.

I might just put it all into one and see if that fixes it.

Darren,

I think you should take a closer look at Eric's and paintbrush's suggestions. They are quite relevant.

The "\" in your image link needs to be changed to "/". If you try it from within Firefox, you'll find that the backslash does not work there: Right-click on the page and choose 'view source', then click on your image link (images\test2.jpg) and you will see that it does not display the image as it should, but something quite different!

Different browsers often behave quite differently to markup errors. In this case Chrome is more 'forgiving' than Firefox.

A couple of other things to correct are these:

1. Remove the repeated (empty) style declaration for "img":

img {
display: block;
margin: 0px auto; /* Display and margin setting to center Image on screen*/
margin-top: 10px;
box-shadow: 5px 5px 2px;
}

img {
}

2. Your markup is missing the following at the very end:

</body>
</html>

Thanks, I didn't know that the \ mattered on firefox. Noted down!!

I also added the closing tags to the end of the document and removed the duplicate img in the home.css stylesheet. Seemed to fix it all up. Not sure why the closing tags were missed off from the upload as they are present on the files I have stored on my hard drive.

Appreciate all your help.

Looking forward to seeing more beautiful pictures from all those places as the site progresses!