Giggle Girl wrote:
I have an embedded style sheet that works perfect in IE6, and looks
wrong in Firefox 1.7. Here is a link to an online sample:
http://c.1asphost.com/giggy/tree02h/main/default.htm
It works for the most part, in that the text of a Nav Tree becomes
underlined onmouseover. But, when you click an item, it should receive
a Yellow background with a border around it, which it does in IE but
not in Firefox.
How can I get the code to work in both?
Thanks,
Ann
Here are the styles that work in IE and not in Firefox:
<style>
HTML, BODY, TD
{ font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
background: #ECEDEF; font-size:11px; }
TABLE.tree_nav
{ border-collapse: collapse; padding: 0; }
TABLE.tree_nav TD
{ padding: 0; }
TABLE.tree_nav_interior
{ border-collapse: collapse; border-spacing: 0px; padding: 0; }
TABLE.tree_nav_interior TD
{ height: 19px; white-space: nowrap; cursor: pointer; padding: 1px; }
TABLE.tree_nav_interior TD.nav_normal
{ color: #333; text-decoration: none; border: 1px solid #ECEDEF; }
TABLE.tree_nav_interior TD.nav_highlighted
{ color: #000; text-decoration: underline; border: 1px solid #ECEDEF; }
TABLE.tree_nav_interior TD.nav_selected
{ border: 1px solid #7A8787; background: FFE99D; }
TABLE.tree_nav_interior TD.tree_nav_off
{ border: 1px solid #ECEDEF; cursor: pointer; padding: 1px; }
IMG.nav_img
{ padding: 1px; }
</style>
Did not search in detail, but a few things that may or may not be of
influence. (I noted Konqueror /did/ display the yellow background)
Not sure if border-collapse is supported by FF. Could Be.
border-spacing I can't even find as a property. Probably IE-only?
The page does not validate, for CSS nor HTML. The Javascript seems to
have some errors as well. (Not sure if it's already supposed to, but the
expand/minimize 'buttons" (- and + signs) don't respond to being clicked
in my FF and Konqueror. I have no IE.)
It would also help if you indented the page properly. It's a mess to
look at right now, doesn't help bughunting. (Prhaps this is related to
My browser and settings, in which case: skip comment)
Wrt CSS, my personal favourite (and widespread I believe) indentation
and use of {} is as follows:
element{
property1 : value;
property2 : value;
}
Look for common denominators. A tad more effort at first, saves a lot of
work later, when changing things.
So if you have:
p.class1{
font-size : 10px;
text-decoration : underline;
margin : 0;
padding : 0;
}
and
p.class2{
font-size : 10px;
text-decoration : bold;
margin : 0;
padding : 0;
}
Combine shared properties:
p.class1, p.class2{
font-size : 10px;
margin : 0;
padding : 0;
}
p.class1{
text-decoration : underline;
}
p.class2{
text-decoration : bold;
}
I also prefer using lowercase HTML tags throughout. XHTML is rapidly
taking over, and it requires lowercase tags!
Attack one issue at a time, you may be looking at a combination of small
glitches/peculiarities. Does the same occur when you remove all
Javascript, tidy the HTML?
A much heard advice from many web developers: never start with IE in
mind. First make it work in more "compliant" browsers, then fix where
necessary for IE. Maybe things will improve with IE7, although I
seriously doubt it.
Good luck!
Sh.
