Marcel 57

I have a Menu with "li" objects, while text in Safari, chrome and IE8 is in the middle, Firefox shows it a pixel to high! Firefox should have conditional comments too...

This is the CSS for the simple list Menu:

    .subnav { margin-top: -51px; margin-bottom: 11px;}
.subnav ul { height: 28px; margin-top: 0px; margin-right: 1px; float: right; list-style-type: none; }

.subnav li {
    float: left; 
    display: inline;
    background: transparent url(/goro/images/subnav_06.jpg) top left no-repeat;
    padding: 5px 0 4px 0;
    height: 28px;
    font-size: 15px;
    color: black;
    text-shadow: 0 -1px 1px black;
    margin-right: 5px;
    font-weight: normal;
}

.subnav li a { color: rgb(242,242,242); padding: 0px 0px 5px 14px; font-weight: normal;}
.subnav li span { color: rgb(242,242,242); padding: 0px 0px 5px 14px; font-weight: normal;}

.subnav li:hover, .subnav li.active {
    background: transparent url(/goro/images/subnav_08.jpg) top left no-repeat;
}

Anybody an idea how to trick FF?

3 answers

danwellman 5600
2
points

A reset stylesheet may help you nuetralize differences in the default styles applied to different elements by different browsers.

Once the default styles have been reset, any new styles you add should be applied equally. this won't account for bugs in the implementation though so you'll probably still need a separate IE-only stylesheet ;)

Answered over 6 years ago by danwellman
  • Thanks for the answer, but a working reset-stylesheet is already part of the CMS. But 'll check anyway. Marcel over 6 years ago
  • Ok now it seems better, its still not exactly the same, but enough, just asking myself what was been missing in the CMS reset Stylesheet. Padding on ul or li objects maybe? Marcel over 6 years ago
Remco 80
2
points

Check your line-height settings. Line-height - combined with font-size - often causes these subtle differences.

Answered over 6 years ago by Remco
  • Thanks for the answer dude, i'll check that aswell. Marcel over 6 years ago
  • I agree on line-height; I never used to worry about it but now that I make buttons and navbars with lists & CSS instead of tables or images I realized this is where things get tripped up. Firebug is also a good FF plugin if you don't have it already, it will let you see the padding, margins, etc. on your elements by hovering over them. Sometimes you'll realize you have a style applied to more elements than you need (see the suggestion below from Tony Crockford). Stephan Hovnanian over 6 years ago
0
points

try taking the padding off the li and see if that makes a difference? for troubleshooting add borders to the li and the a & span elements in turn to see if it's the container or the contained that are out of line. Also check that text-decoration is off on your links - sometimes the padding is added differently depending on browser interpretation.

I tend to use margins on a display:block; <a> element rather than vertical padding.

Answered over 6 years ago by Tony Crockford