CSS: IE=ok Firefox=strange. What is wrong with my style?

NoFantasy · Worker Joined: Apr 26, 2005 Posts: 114

I want to show a picture as background to my links in a navigation-bar. As you can see, most of the values is selected from a database. This is working just fine (like the phpbb-forum does).

The strange thing is that IE shows the picture as it should, Firefox doesn't. The test-picture is width=135px height=25px. In Firefox, the picture ends where the text ends, not after 135px.

The css-part is like this:

Code:

echo "a.lmenu:link {background-image: $linkbackactiveimg; height: $linkbackheight".px."; width:$linkbackwidth".px."; background-repeat: no-repeat; background-position: 100% 100%; color: $linkcoloractive; font-size: $linksizeactive".px."; font-family: $linkface; text-decoration: $linkdecoactive; font-weight: $linkweightactive; font-style: $linkitalicactive}\n"
      ."a.lmenu:active {background-image: $linkbackactiveimg; height: $linkbackheight".px."; width:$linkbackwidth".px."; background-repeat: no-repeat; background-position: 100% 100%; color: $linkcoloractive; font-size: $linksizeactive".px."; font-family: $linkface; text-decoration: $linkdecoactive; font-weight: $linkweightactive; font-style: $linkitalicactive}\n"
      ."a.lmenu:visited {background-image: $linkbackactiveimg; height: $linkbackheight".px."; width:$linkbackwidth".px."; background-repeat: no-repeat; background-position: 100% 100%; color: $linkcoloractive; font-size: $linksizeactive".px."; font-family: $linkface; text-decoration: $linkdecoactive; font-weight: $linkweightactive; font-style: $linkitalicactive}\n"
      ."a.lmenu:hover {background-image: $linkbackhoverimg; height: $linkbackheight".px."; width:$linkbackwidth".px."; background-repeat: no-repeat; background-position: 100% 100%; color: $linkcolorhover; font-size: $linksizehover".px."; font-family: $linkface; text-decoration: $linkdecohover; font-weight: $linkweighthover; font-style: $linkitalichover}\n"

I ran my page trough

Only registered users can see links on this board!
Get registered or login to the forums!

without errors at all (at least not in this part). This was the output:

Code:

a.lmenu:link {
background-image : url(modules/Chatrom/copy.gif);
height : 25px;
width : 135px;
background-repeat : no-repeat;
background-position : 100% 100%;
color : #f2f2f2;
font-size : 16px;
font-family : Trebuchet MS;
text-decoration : none;
font-weight : bold;
font-style : italic;
}
a.lmenu:active {
background-image : url(modules/Chatrom/copy.gif);
height : 25px;
width : 135px;
background-repeat : no-repeat;
background-position : 100% 100%;
color : #f2f2f2;
font-size : 16px;
font-family : Trebuchet MS;
text-decoration : none;
font-weight : bold;
font-style : italic;
}
a.lmenu:visited {
background-image : url(modules/Chatrom/copy.gif);
height : 25px;
width : 135px;
background-repeat : no-repeat;
background-position : 100% 100%;
color : #f2f2f2;
font-size : 16px;
font-family : Trebuchet MS;
text-decoration : none;
font-weight : bold;
font-style : italic;
}
a.lmenu:hover {
background-image : url(modules/Chatrom/copy.gif);
height : 25px;
width : 135px;
background-repeat : no-repeat;
background-position : 100% 100%;
color : #f2f2f2;
font-size : 16px;
font-family : Trebuchet MS;
text-decoration : underline;
font-weight : bold;
font-style : italic;
}

Any ideas what may be wrong? Seems to me that Firefox don't get the height og width-values...

Raven · Posted: Mon Jun 13, 2005 7:03 am

I need to see the actual code because your definitions look fine. It's more of an issue, I believe, in the usage and html layout. Keep in mind that it's usually the case that IE is actually displaying it wrong because it's too forgiving. In any event, if the code is not too long, please post it. Otherwise, please provide a link to the code. Also, please provide a link to your site where this is used.

NoFantasy · Worker Joined: Apr 26, 2005 Posts: 114

I'll send a PM with link to the site/page (since it's not finished yet).

NoFantasy · Worker Joined: Apr 26, 2005 Posts: 114

I think I have found a solution after all. At

Only registered users can see links on this board!
Get registered or login to the forums!

it's an example close to what I want the CSS-menu to do.
I don't actually know what all the elements control, but that's to find out. With a little modification my CSS looks like this:

Code:

a.lmenu:link {
display : block;
width : 135px;
margin : 0 0;
padding : 1px 0 0 1px;
font : bold 16px Trebuchet MS;
color : #f2f2f2;
background : url(modules/Chatrom/copy.gif) no-repeat 0 0;
text-decoration : none;
}
a.lmenu:active {
display : block;
width : 135px;
margin : 0 0;
padding : 1px 0 0 1px;
font : bold 16px Trebuchet MS;
color : #f2f2f2;
background : url(modules/Chatrom/copy.gif) no-repeat 0 0;
text-decoration : none;
}
a.lmenu:visited {
display : block;
width : 135px;
margin : 0 0;
padding : 1px 0 0 1px;
font : bold 16px Trebuchet MS;
color : #f2f2f2;
background : url(modules/Chatrom/copy.gif) no-repeat 0 0;
text-decoration : none;
}
a.lmenu:hover {
display : block;
width : 135px;
margin : 0 0;
padding : 1px 0 0 1px;
font : bold 16px Trebuchet MS;
color : #f2f2f2;
background : url(modules/Chatrom/copy.gif) no-repeat 0 0;
text-decoration : underline;
}

Both IE and FF now seems to have the same look, with the menu-images stretched to it's full length. I still don't know why my previous style didn't work, but perhaps that isn't very interesting.

What is the display : block; actually doing? I'm not 100% satisfied with the new CSS because it seems to be inserting an extra line-break between the image-elements.

Raven · Posted: Tue Jun 14, 2005 9:09 am

I am glad you posted this. I searched my files yesterday and even contacted a few people. I knew there was an easy fix because I had been down this path before - I just couldn't remember what it was!