Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Atul Jalan
1,627 Pointsdifferent browsers display a webpage differently...?
Hi everyone, I've been working on a website and have uploaded it to the web, but have come across the problem that it displays fine on google chrome and safari but only the html displays on mozilla firefox and maybe internet explorer (I haven't checked for internet explorer)
here is the website name... diamplus.com
and here is the code... http://codepen.io/anon/pen/lBxhb
UPDATE: ok thanks everyone, my question has been answered and the problem fixed, thanks to all.
Diego Lucero
10,588 PointsI think I figured out your problem. I pulled this from your source code:
<link rel="stylesheet" href="http://www.diamplus.com/CSS/normalize.css" type="text.css" media="screen">
<link rel="stylesheet" href="http://www.diamplus.com/CSS/boxer.css" type="text.css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Quattrocento:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cinzel:900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bilbo+Swash+Caps' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Port+Lligat+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://www.diamplus.com/CSS/style.css" type="text.css" media="screen">
It seems that your link type is set as text.css instead of text/css.
I guess that also means that Chrome tries to fix errors if it notices them.
Diego Lucero
10,588 Pointsalso for your href on all of your font links, you have single quotes instead of double quotes around several of the attribute values.
Here is an updated codepen with the needed changes that were listed above.
Diego Lucero
10,588 PointsForgive me, that last codepen link was bad. This is the real codepen link with the changes.
Atul Jalan
1,627 PointsThanks so much!!! This problem was bugging me for literally days... I guess I didn't catch that. Again, thanks
2 Answers
Nick Pettit
Treehouse TeacherHi Atul Jalan,
This could be any number of problems. Browsers are very complex and can behave strangely. :) You'll need to post your code either in a zip file or on a website like CodePen in order for people to help you diagnose the issue.
Atul Jalan
1,627 PointsHi, Nick, I'm really sorry, but how do I upload a file in the forum? In the textbox, I can't seem to locate the option to upload a zip.
Nick Pettit
Treehouse TeacherHi Atul Jalan,
You can't upload files directly to the forum. Sorry! :-/ You'll have to host the zip externally and then link to it here.
Alternatively, you could just link to the website if it's already live somewhere. You could also paste your code into a site like CodePen.
Atul Jalan
1,627 PointsHi Nick, I figured out the problem to my previous thing about google chrome and safari, but that has left me with yet another browser problem. My website is currently live on diamplus.com, and if you go to that website on google chrom and safari then the home page should load up completely fine but if you go to it on mozilla firefox then only the html file loads up... what do I do about this problem?
Nick Pettit
Treehouse TeacherHi Atul Jalan,
The type attribute on your CSS link elements is incorrect. Right now, you have three stylesheets that say:
type="text.css"
Instead they should say:
type="text/css"
Safari/Chrome are forgiving on this particular attribute, but I guess it was enough to throw off Firefox.
Atul Jalan
1,627 PointsThanks Nick, I see what you're talking about, I guess I just didn't catch that.
Mike Kohl
Courses Plus Student 6,793 PointsHi,
A few things I would look at are:
The file named "finale.jpeg", is the file extension supposed to be .jpeg or .jpg?
Do you have image "finale.jpeg" in a folder such as images? If you do then you need to update the src src="../images/finale.jpeg"
Atul Jalan
1,627 PointsI've already tried out all the file extensions such as gif, png, jpg, and jpeg, none of them worked, and as for the second comment, my files were previously in a folder and I did access them the way you are suggesting, but it still didn't work, so now I just have them there, not in a folder, but of course, it still doesn't work
Diego Lucero
10,588 Points"I've already tried out all the file extensions such as gif, png, jpg, and jpeg, none of them worked, ..."
Forgive me, I'm not sure what you mean by the above statement.
From the way you phrased it above, it seems that either: +you may not know the actual file extension, or +you have created the image(s) yourself and have saved it in the 4 formats: gif, png, jpg, and jpeg
If the first scenario is true, we would need to do some investigation through either the apple finder or the window's explorer to find the exact file extension.
If the second scenario is true, then I think you probably know the specific file extensions that you are using very well already. In this case, I'm at
Atul Jalan
1,627 PointsOk, so I figured out the problem, yes I created the photos myself on photoshop, so that's why it wouldn't work..., but then I later just resaved the files as something else, and magically it works, so now my website works completely on google chrome and safari. Now though I have another problem, if you go to diamplus.com (the website where my site is), then it should load up completely fine on both chrome and safari but then only the html file opens up in Mozilla Firefox, this has left me very confused, so I need to know what to do about that problem...
Diego Lucero
10,588 PointsI went to your website, and I did see what you were describing.
Then, a few minutes later, I refreshed the page and this is what I saw.
How long has it been since you have uploaded your site as it is now?
Diego Lucero
10,588 PointsI have a feeling that your problem has more to do with server propagation than the code itself. If you have uploaded this site recently, or especially if you have redirected the domain to point to your server, it should take anywhere between 12-48 hours to fully propagate to servers and update the cache on each.
I could totally be wrong though.
Mike Kohl
Courses Plus Student 6,793 PointsLooks like your doing a great job on the website.
Some times the browsers can be the problem, it will cache and then display the old version of the website.
A few suggestions:
If you don't see the changes that you made after updating your website, you might want to clear out the browser cache and try to view the website again to see if that fixed the issue.
I noticed the image on the index page is named, "pleaseplease.jpg". Its best to learn early in your career that names like that will only get you in trouble and can cause more work for yourself and others. I would change the name to something more descriptive like "HighQualityDiamonds.jpg". ( just a suggestion ).
Also, I did not see this in your code, you might want to add normalize.css to your code.. this will help reset your browsers. http://necolas.github.io/normalize.css/
Atul Jalan
1,627 Pointsoh, normalize.css is in my code i just forgot to put it on the codepen, and about the name of my picture, I named it pleaseplease because I was very frustrated... but, I do understand what you are saying, thanks for all the advice :)
Diego Lucero
10,588 PointsDiego Lucero
10,588 PointsPlease post your code or screen cap so we can see what exactly you are referring to/figure out a solution.