The old CSS trick doesn't work in Firefox

[OnTopic]

Hi all,

A couple of years ago I learned a trick in this forum and moved to CSS. I'm a translator, interested in and depending on SEO and CSS, but a translator never the less. My limited knowledge of CSS has worked for me for years, until people started complaining about how my site rendered in Firefox.

Tonight I downloaded Firefox and my menus look really bad. So I thought maybe the guru that helped me set up my site is still around. His solution was:

<link href="Styles/standard.css" rel="stylesheet" type="text/css">
<!--[if IE 5]><link href="Styles/iehack5.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 6]><link href="Styles/iehack6.css" rel="stylesheet" type="text/css"><![endif]-->

I'm fully aware that this information doesn't say much, It's a long shot. I'm doing so well in the search engines that I'm reluctant to change anything on my site, but I hate it that my stuff doesn't look right in Firefox. What I'm really looking for is a

<!--[if FF]><link href="Styles/firefox.css" rel="stylesheet" type="text/css"><![endif]-->

kind of hack and the style sheet to go with it, in order to make my menus look right in Firefox. To work it out myself would take me days to weeks so I thought I'd try this forum first.

Kind regards,
Gerard de Noord

[Robin_reala]

Search engines shouldn't read the CSS so you should be fine with any changes.

What you've got is a default stylesheet, then two extra sheets with hacks for IE. IE isn't amazingly standards compliant and sometimes needs hacks to get it working. On the other hand, Firefox is generally good at standards compliance so it really shouldn't need the hacks. If I were you I'd simply adjust the main stylesheet until the site works. It may be a bit more work but you'll be furute proofing in the long run.

In a direct answer to your question, no, there isn't a conditional comment system implemented in Firefox.

Edit: after thinking about it there is a possibility that search engines do read CSS - istr something about have text the same colour as the background dropping your scores. I'm not well versed in this but I'd assume that there wouldn't be any problem. You may like someone else to confirm this first.

[Farix]

What kind of menus are you using, dropdowns? If so, then do a search for the string "Son of Suckerfish" and you will see how to do a purely CSS dropdown menu that also works with IE with a little bit of JavaScript.

[OnTopic]

Hi Farix,

I don't use dropdowns. There's nothing fancy going on. Just <p>'s and <a>'s.

Regards,
Gerard

div.nav {
position: fixed;
width: 193px;
left: 0px;
top: 0px;
background: #CCCCFF;
padding-top: 17px;
padding-left: 0px;
height: 100%;
}
.nav p {
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
display: block;
padding-top: 2px;
margin: 0px;
padding-left: 10px;
}

div.nav a:link {
font-weight: bold;
color: #000066;
background: #FF9900;
width: 150px;
display: block;
margin: 0px;
padding-top:2px;
padding-bottom: 2px;
padding-left: 20px;
text-decoration: none;
height: 12px;
border-top: 1px solid #FFFFCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #FFFFCC;
}
etc.

<div class="nav">
<p>
<a href="English_UK1.htm" target="_self"><img src=
"Eloquo_images/uk-vlag.gif" width="40" height="20" alt=
"Information in English" border="0"></a>
</p>
<p>
<a href="Default.htm">Home</a>
</p>
etc.

[createErrorMsg]

When a site breaks in Firefox, 9 times out of 10 it's a doctype issue. Are you using a full and valid doctype declaration [w3.org] on your page?

If not, pick the one that best suits your code (from the looks of your code snippet, I'd say HTML 4.01 Transitional) and add it to the very top of your page, with no spaces, line breaks or code before it. It must be the very first thing in the source code.

Then view the page in Firefox and tweak until it looks right. Looking at your code, I'm assuming that what's wrong with the menu is that the nav "buttons" are too big, causing parts of the menu to wrap to a new line. This is because Firefox is adding the padding and border to the left and right of the link, and not stuffing it inside of the width (which is what IE5.x and IE6 without a doctype will do). So in FF, your nav links are 172px wide (150width + 20left-padding + 1border-left +1border-right), but 150px wide in IE5.x and IE6 without a doctype. Change the width to 128px (150width - 22paddingandborder), then change it back to 150px for IE versions lower than 6. The doctype will cause IE6 to use the same box model as FF, so hacking it will not be necessary.

OR use the better solution of reworking the menu so that any given element does not have both a width and a padding or border. This avoids the problem altogether and makes hacking unnecessary.

For more information, search this forum for "box model problem," or "standards and quirks box model."

Regardless, adding a doctype and adjusting the menu widths should get the menu looking identical (barring a few situations that are unlikely to arise in a menu bar) in FF and IE6. YOu could probably even get rid of the IE6 conditional stylesheet at that point (although without seeing it and the rest of the page/css it's impossible to say for sure). Then load it in IE5.x and tweak that conditional stylesheet back to the old box model.

cEM

[OnTopic]

Thank you very much for your detailed reply, cEM,

I'll look into this in my spare time (and now I know what to look for).

Regards,
Gerard