PDA

View Full Version : CSS in Firefox vs. IE



Blacktalon
10-30-2009, 01:18 PM
How can I change the CSS coding for a horizontal menu to look like it ought to whenever someone pulls it up in Firefox. In IE, however, it looks as it should with the appropriate parametres.

For example, the horizontal <ul> fits within the <div> tag parametres in IE (everything is aligned properly), however in Firefox the <ul> is a line down from where it should be. Are there any specific modifications to the CSS code I should input for it to work in Firefox?

Anyone have any thoughts?

vangogh
10-30-2009, 01:30 PM
No way to tell without seeing some code. If the page is online post a link to it. If not you'll have to post your code here (both html and css)

However I can tell you you made one big mistake in developing for IE first. IE is usually the browser that gets it wrong so when you develop for it first you generally have to undo what you've done and start again writing code to the standards. If you develop to standards then it's usually just a few tweaks to get things working in IE. If you develop to IE it's usually a lot of work to get things looking right in other browsers.

One quick suggestion if the only problem is the menu is pushed too far down in FF. Look at the margins and paddings of the list as well as elements in the list and above and below the list. Might be a case where FF and IE use different default values.

Blacktalon
10-30-2009, 01:45 PM
I never did develop with IE in mind first. I developed using Dreamweaver's built-in CSS enabler program for the sake of developing css.

Let me see what I have for code:

[css] code:

#nav ul {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
color: #FFFFFF;
word-spacing: 5em;
white-space: nowrap;
float: left;
padding-right: 15px;
list-style-image: none;
list-style-type: none;
left: 5px;


}
#nav li {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#FFFFFF;
float:left;
list-style-position:inside;
list-style-image:none;
list-style-type:none;
z-index:1;
bottom:5px;
background-color:#000066;
padding-right: 2em;



}
#nav a:link {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;

}

[html]

<ul id="nav">
<li><a href="about.htm">About Eny Time</a></li>
<li><a href="services/commercial.htm">Commercial Cleaning</a></li>
<li><a href="services/industrial.htm">Industrial Cleaning</a></li>
<li>Visual Samples (Coming Soon!)</li>
<li><a href="contact.htm">Contact Us</a></li>
</ul>

I read on w3schools that removing the spaces between, say, background-color: #eeeee (to make it look like background-color:#eeeee) would help. So when you see no spaces in the #nav li coding, that's what I tried. But it's just an experiment at this point.

Any thoughts?

vangogh
10-30-2009, 04:06 PM
I read on w3schools that removing the spaces between, say, background-color: #eeeee (to make it look like background-color:#eeeee) would help.

Makes no difference. You could 45 spaces in between and it will be the same. Sometimes in your html removing a space or rather a new line does close some gaps, but in general whitespace in the code shouldn't make a difference.


I developed using Dreamweaver's built-in CSS enabler program

That's part of the problem. DW is pretty good, but it will spit out some bad code.

Your html looks fine. I wonder if not having the link on the coming soon item messes things up. It shouldn't, but you could try wrapping a link tag around it with the href being empty.

Here's a post I wrote on developing a simple css and html navigation bar (http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/) if you want to check that.

You mentioned the problem is an extra space above the navigation bar in FF. My guess is the problem isn't in the code you posted, but the code around the navigation bar itself. Could you post all the code for the page or just send it to me in a PM. I have a feeling the issue is more to do with the overall layout of the page rather than the navigation itself.

painperdu
10-30-2009, 04:39 PM
I can't see much of a difference -

FF:
http://seeimage.info/thumbs/ff.png (http://seeimage.info/?v=ff.png)

IE:
http://seeimage.info/thumbs/ie.png (http://seeimage.info/?v=ie.png)

Blacktalon
10-30-2009, 05:23 PM
That won't be a problem Steve. Let me test out having a link attached to the coming soon part and if that doesn't work, I'll get back to you...

But in PM I'll post the code. Unfortunately at the moment I am at work, and have no access to my pages. Perhaps during tomorrow or Sunday I'll post it.

Painperdu (Lost Bread): So according to your insertion it worked regardless of the browser platform?

C'est bizarre...

vangogh
10-30-2009, 05:39 PM
No problem Sean. I link will be better if you can post it. Makes it easier for me to debug. Looking at the screenshots Painperdu posted is what I thought. I don't think it's the navigation bar by itself causing the problem, but rather the code around the navigation bar.

Post when you can. If it's over the weekend be a little patient with me since I don't respond as quickly over the weekend.

Blacktalon
10-31-2009, 02:11 PM
I won't be able to post a link because the page is not officially online yet. It bothers me a lot that IE can pick it up no problem; with Firefox it's as if FF doesn't recognize the CSS at all. At least whenever I open up the page in FF it doesn't.

I'll get to it later on. About to leave for an all hallow's eve get together.

vangogh
11-02-2009, 11:41 AM
I can almost guarantee the issue isn't FF. Firefox does recognize css and does it well. In fact the issue is really never the browser. The issue is generally poor code. When it comes to browsers IE is usually the one that gets things wrong. If things are working in IE and not Firefox then in all likelihood the code has been written specifically for IE and isn't based on css standards.

Blacktalon
11-02-2009, 01:10 PM
I can almost guarantee the issue isn't FF. Firefox does recognize css and does it well. In fact the issue is really never the browser. The issue is generally poor code. When it comes to browsers IE is usually the one that gets things wrong. If things are working in IE and not Firefox then in all likelihood the code has been written specifically for IE and isn't based on css standards.
I'm not sure what it could be. I researched the code online (w3schools) and did what I could to ensure proper coding, then applied it through Dreamweaver's built-in css enabler; if painperdu was able to look at things fine through their Firefox with the code I posted above, then I'm at a loss as to what it could be. Maybe it's the settings in my existing firefox. But in the meantime, I'll send you my code. How do you want it? PM or email?

Edit: I sent you the code via PM in two parts. Thanks for doing this again Steve.

I owe you one.

vangogh
11-02-2009, 05:32 PM
I got the PM with the code and as soon as I can I'll take a look. It's probably something minor. I'll let you know what I find.

I saved your code and looked at it quickly in FF. For me the entire page is a mess, but I'm guessing that's partly because I don't have the images you're using and little things like that. Can you post a screenshot of how the page is supposed to look. Post how it looks in IE or send me another PM.

I want to make sure I know specifically what the problem is. Thanks.

Blacktalon
11-02-2009, 05:52 PM
I'll post a screen shot of how it appears to me in IE and how I see it in FF.

Know what, I think I can give you a sneak peek. Try here: Site (http://www.blacktalonsolutions.com/website/index.htm). Yes, that works.

Voila. I'm looking at it now through IE at work and it looks as it should. So I'm not sure what the issue is. Your efforts of reviewing this are appreciated.

Blacktalon

vangogh
11-02-2009, 10:32 PM
Ok I figured it out. The problem wasn't Firefox. The problem was IE doing things it wasn't supposed to do. You have an awful lot of unnecessary code, no doubt there as you tried to fix things that weren't working.

In general don't use positioning to build web pages. Until you're an expert with css it'll only cause more problems than it will help you layout a page. Use floats instead.

You have css for

#nav ul

There's no #nav ul in your html though. What you have in your html is ul id="nav" which would be

ul#nav

so none of the styles you have on #nav ul are doing anything.

Replace them with this



#nav {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
color: #FFFFFF;
float: left;
padding-right: 15px;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
left: 5px;
margin:0
}


and your navigation should look the way you want.

Blacktalon
11-03-2009, 11:46 AM
Edit # 2

Nevermind. It works now. Thanks for the help.

vangogh
11-03-2009, 02:35 PM
Glad it's working.

TulsaWeb
12-27-2009, 02:17 PM
Conditional Stylesheets More here (http://css-tricks.com/how-to-create-an-ie-only-stylesheet/)