Jump to content

Firefox not displaying site properly


Guest eavenue
 Share

Recommended Posts

Guest eavenue

Hey Guys,

Thanks for all the help... you've been great!

I have a few problems, but the biggest is that Firefox isn't displaying our website properly. Didn't realize this until someone pointed it out. I always use IE, but opened Firefox, then our site and everything was different. The biggest thing is that our company logo isn't even there. The search box is now on the left where the logo should be. The fonts aren't correct. The border under the header isn't there, as well as the border around all the information boxes on the left and right. Everythings crammed together... it just looks terrible. IE shows the site perfectly, as well as MAC OS. Havent tried other browsers, but Firefox messes it all up.

Is there something I can do on my end or is this an issue with Firefox. Also, are there any changes that Firefox users can do within there settings? I know like 85% of all browsers out there are IE, but i'd like to be able to put something in our home page that advises users of others browsers.

Any ideas?

Here's our site: http://eavenueonline.com/shopping

Got another question, but i'll save it for alter.

Thanks a lot!

Chris

Link to comment
Share on other sites

Guest eavenue

Take a look in layout.css, you have two '}' together but a line apart.

Thanks!

I just removed one of the double '}}' and it now shows the borders. But it still doesn't show the top header image/logo and isn't showing the border un the top header. Also, the fonts still look bad. Anymore ideas?

And I tried Netscape and Opera. They both show the same as Firefox. Seems that the only browsers showing the site correctly is IE and MAC. Do you know if there is any special way these two are reading the site?

Thanks!

Link to comment
Share on other sites

You are missing a lot of syntax from your stylesheets. Missing values, missing semi-colons etc which are undoubtedly causing the problems. Go through your stylesheets making sure you have values in your attributes (or remove them) and there are semi-colons on the end.

Link to comment
Share on other sites

Guest mosis

And I tried Netscape and Opera. They both show the same as Firefox. Seems that the only browsers showing the site correctly is IE and MAC. Do you know if there is any special way these two are reading the site?

eavenue, we went through many headaches in the beginning trying to figure out why it looked good in one browser and not another. You will always have differences in each browser, but you gotta just make sure you check it on as many different browsers you can anytime you make significant changes/additions. I'm sure you already know this but make sure to check on IE v.6 as well as IE v.7 because those two have significant differences as well. I believe the majority of people are still using IE 6, and we can't wait till they all go to 7 because there are significant improvements overall.

Also, from personal experience I would recommend FireFox(with web developer toolbar)for getting things done and just use IE for checking to make sure it looks good. Just a persona preference tho.

Link to comment
Share on other sites

Guest eavenue

Thanks Mosis,

I had someone check IE 6 and it shows perfect too. I changed some things in layout, checked back and forth. When I got Firefox looking better, IE looks worse. I talked to a friend locally and he said that IE and Mac are just a bit more advanced than the other smaller browsers, that they are more forgiving with minor coding errors and are advanced enough to be able to read this and still display the site the way it was intended. I don't know if that's true becuase Firefox seems to be a pretty awesome browser. And I also don't know enough about HTML and coding to be able to see what syntax may be missing or is out of place. I checked and all looks ok from what I can tell. But once again, I just don't have enough knowledge to really know.

Also, I checked the error console in Firefox, and this is what it gave me:

Warning: Error in parsing value for property 'background-repeat'. Declaration dropped.

Source File: http://www.eavenueonline.com/shopping/skin...eets/layout.css

Line: 7

Warning: Error in parsing value for property 'background-image'. Declaration dropped.

Source File: http://www.eavenueonline.com/shopping/skin...eets/layout.css

Line: 26

Warning: Error in parsing value for property 'float'. Declaration dropped.

Source File: http://www.eavenueonline.com/shopping/skin...eets/layout.css

Line: 103

I checked these areas in layout.css and it seemed ok.

Any thoughts?

Thanks!!!

Link to comment
Share on other sites

layout.css:

#topHeader 

	{text-align: right;

	height: 115px;

	margin-bottom: 20px;

	padding-right: 8px;

				padding-left: 20px

	padding-top: 0px;

	background-image: url(../styleImages/topHeader.gif);

				background-repeat: no-repeat;

	border-bottom: 3px solid #05731A;}

padding-left: 20px has ; missing

Link to comment
Share on other sites

Guest offthehook

Okay heres what I see wrong in your stylesheets:

In the layout css:

body {

	margin: 5px;

	background-color: #000000;

	background-attachment: fixed;

	background-image: url(../styleImages/backgrounds/pageBg.jpg);

	background-repeat: 

	background-position: top;}





That pageBg.jpg doesn;t appear to be uploaded into the backgrounds folder. And you need to declare on the background repeat how it should be repeated and add a semi-colon afterwards.






#subSurround {

	border: 1px solid #05731A;

	background-image: url(../styleImages/backgrounds/;

	background-repeat:0

	background-position: bottom;}



The background image has no image assigned to it and the closing parenthesis is missing. the background repeat has no semi-colon after the '0'. The 0, really should be replaced with 'no-repeat' anyway if you don't want it to repeat.




#topHeader 

	{text-align: right;

	height: 115px;

	margin-bottom: 20px;

	padding-right: 8px;

				padding-left: 20px

	padding-top: 0px;

	background-image: url(topHeader.gif);

				background-repeat: no-repeat;

	border-bottom: 3px solid #05731A;}



The padding-left is missing a semi-colon after the '20px'.



Once you have made these changes then your header image will display in Firefox.




#subCats {

	background-color: #E8E7E7;

	text-align: center;

	border: 1px solid #E8E7E7;

	margin: 3px;

	padding: 12px;

	float: center;

	width: 579px;}

The float declaration can only be one of three values; left, right or none.

I couldn't see anything else straight from a quick skim through however I would advise you to check carefully that you have all the requisite colons and semi-colons in place.

Link to comment
Share on other sites

Guest eavenue

Hey guys,

Thanks SO much for all the help!

I went in and removed all reference to a background image; I want a solid color there rather than an image.

I changed the "float" value to left.

Then I just added the semi-colon after the '20px' .... and viola... there's the logo image and header border. (Amazing how one little semi-colon can throw it all out of whack!) :w00t:

So, got that done. And hate to be more of a pain; but any idea why the fonts are unusual? In IE, they're the correct size and are smoothed. In the other browsers they're smaller and look rough, as if they weren't maybe ture-type? Make sense to anyone?

And thanks again for all the help; I really, really appreciate it.

Chris

Link to comment
Share on other sites

Guest offthehook

I don't see any problems myself. Could it be your your font size settings in your browser? Generally the larger fonts go on your screen the smoother they'll be so if your explorer browser has the text size set to 'larger' that could be the problem.

Two other css issues for you are that the left hand menu in Firefox does not get line spacing like in Explorer. Second one is the rollover text for links in Firefox which gets smaller. Should try to keep that the same size as some of the boxes start jumping around a bit. It works in Explorer so you need to take a look at your css again which could have a small error.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...