By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

CSS Difficulties in Firefox

P: 3
After reading throught many posts I know that I'm not alone when I say how frustrating it is when layouts appear differently in various browsers.

Here's a quick run-down of my saga:
I'm working in the marketing dept. of my company and have just been volunteered to update our prospective member website from tables to css. (Our company site has been outsourced to a web design firm--thank goodness!) In college I was a Communications major and Graphic Design minor. I took a few intro html / css classes, but nothing above a beginner level.

So far I've redone a few pages, and, as I figured, the layouts between IE and Firefox are not uniformed--no surprises there. I just don't know where to go. The more I debug and stare at the code the more baffeled and frustrated I become. I've consulted this site, other sites like this, and I've validated at w3c (with the exception of a few "alt" tags, most html pages come up clean.) My css on the other hand: 1 error, 40 warnings! But silly warnings like: "Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space." I also have a coolmenus script....the placement of that in Firefox is screwy too.

I understand a lot of this can be trial and error, and I'm willing to keep trying, but it gets very disheartening when all you keep getting back are the errors!

Anyway, before I go any further, I'm asking for some assistance. I'm new to the forum concept so I'm not sure what code information I need to post for someone to help.

Suggestions are VERY much appreciated!

Thanks!
Apr 18 '07 #1
Share this Question
Share on Google+
6 Replies


drhowarddrfine
Expert 5K+
P: 7,435
If your code validates then there are only two possibilities:

1) Code that validates only means the tags and syntax are used correctly. It does not mean placement is appropriate.

2) The problem will almost always lie with IE.

If you get your markup working in a modern browser, such as Firefox or IE, then it will work in every other browser, generally. The only exception will most likely be IE. It is old, buggy and non-standards compliant. However, most of the bugs are known with known workarounds.

But without the complete code or, preferably, a link, we can't help you.
Apr 18 '07 #2

P: 3
hmf
First of all, thank you. I know I'm only one of many people asking for help and your time is precious, but any pointers and tips are greatly appreciated and welcomed!

Because in order to fix code, you need to actually see the code, I've had a co-worker post a temporary page:

http://www.furniturefirst.coop/hayley/prospective/mission.html

Viewing it in IE is fine, viewing it in Firefox is not. When you view the page source, make note that I commented out the css and javascript codes at the bottom. I hope this helps.

Lastly, I want to make it clear that I'm not asking for someone to completely re-do my code, merely guide me as to what I can do to fix this myself. I think learning to figure out code on your own is the best way to learn-plus I like feeling the satisfaction of achievement!

Thank you all!
Apr 19 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
Commenting out the stuff at the bottom really makes a mess of things. I'm thinking there is a misplaced or incorrect comment tag. Make sure there is a space before and after <!-- and --> and also /* */.

For scripts, it should be <script type="text/javascript">.

Your paths for images have one of the slashes going the wrong way.
src="../images\fflogo_web.jpg" should be
src="../images/fflogo_web.jpg"

(more)
Apr 19 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
Validate your CSS for a list of errors that need fixing.
For further help from me, I would need all that commented out stuff at the bottom removed.
Apr 19 '07 #5

P: 3
hmf
I think I fixed the problem with the commented out script. I saw what you meant about it being jumbled on the screen. I left the CSS and Javascripts there, however, I took better care in commenting them out. I checked it again in Firefox after I uploaded the revised file and it seems ok. My reasoning for leaving those codes there are for viewers to see exactly what I'm doing or where I went wrong. If you have an alternate way for me to post my CSS and Javascript it its entirety without having it directly on my html page, I'll try that instead.

Here's the URL again:
http://www.furniturefirst.coop/hayley/prospective/mission.html

I went back over my CSS and cleaned up the warnings. After doing so, I'm left with 23 warnings which all tell me the same thing:

-Same colors for color and background-color in two contexts #navbox and .toplink
-Same colors for color and background-color in two contexts #navbox and .header....etc.

I don't understand why this is a problem?

#navbox
{
background-color: #bd0000;
}

.toplinks
{
color: #bd0000;
}

I'm aware that my navbox and toplinks are the same hexidecimal colors, however, these two elements will never be placed on top of each other, so having the same color really shouldn't matter. Am I missing some fundamental CSS principle or is this really just the useless error message that I think it is?

Once again, thanks for taking the time to help! :o)
Apr 19 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
Warnings are just that, warnings, and not errors. You do not have to change them. They are there for accessibility reasons and nothing else. Many want to make sure their sites are viewable by those with sight problems and some countries even require it legally. If these are no concern to you, you can safely ignore them.

Regarding the posting of code, I only need a link while others may prefer posting the code. I use the web developer extension to Firefox which allows me to view everything on your site as it is seen by the browser. So there is no need to have the css and js listed with the html.

Of course, if the site is not online then posting the complete code is fine. Javascript problems may also require the posting of the code
Apr 19 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.