January 17th, 2006
It's good when, after struggling over something for hours, you come across someone who has also been struggling for hours over the same problem and knows what the cause is (especially when this helps you work out the solution).
The problem - with Firefox's refusal to allow you to specify the dimensions of an image you want to use as a background image - is described here:
http://forums.zuggsoft.com/phpbb/weblog_entry.php?e=22044#86779
You know, I get really annoyed at standards pay more attention to themselves, rather than to what people *want* to do with them.
CSS is my current example. We all know that Firefox (and Opera, etc) are more "compliant" with the standards than Internet Explorer. But you know, in many cases, Internet Explorer does what you'd WANT the standard to do.
My current gripe is the fact that the HEIGHT style in CSS is ignored for inline entities (SPANs). Internet Explorer allows you to use HEIGHT in a SPAN, but it's not "standard" and Firefox ignores this property.
...
The problem with this is when you try to assign the background images. If you do the obvious and define the Button_Middle class like this:
Code:
.Button_Middle {
background-image: url("button_left.gif");
}
then you will find that Firefox shrinks the size of the box down to the height of the text, so you don't see the entire background image. If you attempt to use the HEIGHT property in the style sheet to increase the height of the button, it gets ignored because these are INLINE elements.
My HTML looks like this:
<div class="pagestyle">
<a href="#"
class="smallTextButton"
onclick="fChangeTextSize('small');
return false;"
title="small text"> </a>
<a href="#"
class="mediumTextButton"
onclick="fChangeTextSize('medium');
return false;"
title="medium text"> </a>
<a href="#"
class="bigTextButton"
onclick="fChangeTextSize('large');
return false;"
title="large text"> </a>
</div>
With the following CSS:
/***************** div button container *******************/
div.pagestyle {
text-align: right;
}
/***************** text size buttons *******************/
a.smallTextButton {background: bottom left no-repeat;}
a.smallTextButton:visited {background-image: url(small-text-cold.PNG); text-decoration:none;}
a.smallTextButton:hover {background-image: url(small-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.smallTextButton:active {background-image: url(small-text-hot.PNG); text-decoration:none;}
a.mediumTextButton {background: bottom center no-repeat; width: 15px}
a.mediumTextButton:visited {background-image: url(medium-text-cold.PNG); text-decoration:none;}
a.mediumTextButton:hover {background-image: url(medium-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.mediumTextButton:active {background-image: url(medium-text-hot.PNG); text-decoration:none;}
a.bigTextButton {background: bottom right no-repeat; height: 20px; width: 15px}
a.bigTextButton:visited {background-image: url(big-text-cold.PNG); text-decoration:none;}
a.bigTextButton:hover {background-image: url(big-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.bigTextButton:active {background-image: url(big-text-hot.PNG); text-decoration:none;}
the result looks fine in IE6:
(Ignore the image on the right, it's a style-switcher button for toggling the page from a fixed width column to full width.)
However, in Firefox 1.5 it looks like this:
To avoid the largest "A" getting cropped I have to specify a big enough font-size for the div element:
/***************** div button container *******************/
div.pagestyle {
text-align: right;
font-size: 13px;
}
/***************** text size buttons *******************/
a.smallTextButton {background: bottom left no-repeat;}
a.smallTextButton:visited {background-image: url(small-text-cold.PNG); text-decoration:none;}
a.smallTextButton:hover {background-image: url(small-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.smallTextButton:active {background-image: url(small-text-hot.PNG); text-decoration:none;}
a.mediumTextButton {background: bottom center no-repeat;}
a.mediumTextButton:visited {background-image: url(medium-text-cold.PNG); text-decoration:none;}
a.mediumTextButton:hover {background-image: url(medium-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.mediumTextButton:active {background-image: url(medium-text-hot.PNG); text-decoration:none;}
a.bigTextButton {background: bottom right no-repeat; padding-left: 4px;}
a.bigTextButton:visited {background-image: url(big-text-cold.PNG); text-decoration:none;}
a.bigTextButton:hover {background-image: url(big-text-hot.PNG); cursor: pointer; text-decoration:none;}
a.bigTextButton:active {background-image: url(big-text-hot.PNG); text-decoration:none;}
The result in Firefox is:
Potentially similar posts