CSS looks different in FF over other browsers

HTML & CSS
1

This code seems to do well in Edge and Chrome. But in FireFox, the container at times doesn’t have the same look and the menu items can overflow outside the container - but again, only in FF.

If I recall, FF has certain issues like this unlike the other browsers.

Any suggestions to a fix would be appreciated.

BODY { 
font-size : 12px; 
color : #414141; 
line-height : 17px; 
font-family : verdana, sans-serif; 
} 
TD { 
font-size : 12px; 
color : #414141; 
line-height : 17px; 
font-family : verdana, sans-serif;
font-weight: 300;
} 
SELECT { 
font-size : 12px; 
color : #414141; 
line-height : 17px; 
font-family : verdana, sans-serif; 
} 
P { 
font-size : 12px; 
color : #414141; 
line-height : 17px; 
font-family : verdana, sans-serif; 
} 
A:link { 
color : #1e5186; 
text-decoration : underline; 
} 
A:visited { 
color : #1e5186; 
text-decoration : underline; 
} 
A:hover { 
color : indianred; 
} 
.ULContainer { 
width : 172px; 
} 

.MenuItem { 
font-size : 11px;
font-weight:600;
line-height : 14px; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
} 
.body { 
font-weight : normal; 
font-size : 12px; 
color : #414141; 
line-height : 17px; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
} 
.nav { 
font-weight : bold; 
font-size : 11px; 
color : #1e5186; 
line-height : 13px; 
font-family : Geneva, Arial, Helvetica, san-serif; 
text-decoration : none; 
} 

A.nav:link { 
text-decoration : underline; 
} 
A.nav:visited { 
text-decoration : underline; 
} 
A.nav:hover { 
color : #dda100; 
text-decoration : underline; 
} 
A.topLink:link { 
text-decoration : none; 
} 
A.topLink:visited { 
text-decoration : none; 
} 
A.topLink:hover { 
color : indianred; 
text-decoration : underline; 
} 
.MenuHead { 
padding-right : 0; 
padding-left : 5px; 
font-weight : bold; 
font-size : 10px; 
padding-bottom : 5px; 
color : #ffffff; 
line-height : normal; 
padding-top : 5px; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
background-color : #00008b; 
text-align : left; 
} 
.MenuBullet { 
padding-right : 0; 
list-style : square; 
padding-left : 0; 
font-size : 12px; 
padding-bottom : 0; 
margin-left : 0; 
color : #00008b; 
line-height : 12px; 
padding-top : 0; 
font-family : Arial, Verdana, Helvetica, sans-serif; 
} 
.MenuBullet_ff { 
padding-right : 0; 
list-style : square; 
padding-left : 0; 
font-size : 12px; 
padding-bottom : 0; 
margin-left : 0; 
color : #00008b; 
line-height : 12px; 
padding-top : 0; 
font-family : Arial, Verdana, Helvetica, sans-serif; 
} 
.ULContainerInner { 
width : 172px; 
height:250px;
background-color : #c4d7dd; 
} 
.ULContainer UL { 
clear : both; 
margin : 8px 5px 5px 20px; 
}
ul {margin-left: 0; padding-left: 0;}
td {vertical-align:top;}

Same problem if I use 100% rather than fixed:

```
.ULContainerInner { 
width : 172px; 
height:100%;
background-color : #c4d7dd; 
}
2

Without seeing the HTML to which this applies, no one can guess what is going on.

4 Likes
3

The issue is likely with your code rather than the browser :slight_smile: Firefox has a few bugs (like most browsers) but without seeing your html the css on its own is not much use.

However there are signs of problems in your CSS such as this:

.ULContainerInner { 
width : 172px; 
height:250px;
background-color : #c4d7dd; 
}

height:250px looks like a magic number alert and if you are expecting a number of lines of text to fit in that space then that is unlikely to work especially if the user resizes their text (as they most likely would due to the extra small font-sizes you are using).

If you can provide the html that goes with that css and a screenshot of the problem (or better still a link to the page in question) I’m sure we can get you back on track pretty easily :slight_smile:

2 Likes
4

Thank you for the magic number information.

I have decided to scrap this menu altogether and to completely redo it with new css and look.

Thank you for your response.

2 Likes