CSS: Firefox 2 versus Firefox 3

Jack Michaelson posted this at 09:47 — 3rd December 2009.

Joined: Dec 1999

So, I've got this concept almost working except for one minor detail, so I thought I turn to my old friends of TWF

The goal of the concept is to create a button in CSS 2 with a png image and support transparent backgrounds, so that you can place the button anywhere on the page, no matter what the background looks like.

Here's an example. It works fine in IE7+, FF3, Opera, Safari and Chrome. No IE6 (yet?)
The trick for this concept is the combination of a fixed width and overflow:visible, making the actual appearance of the button wider than the given width.

It's made of the following two images:

This is the html:

<div class="grayBg">
<a href="#" class="button"><span>this is a test</span></a>
</div>

<div class="blueBg">
<a href="#" class="button"><span>this is also a test</span></a>
</div>

<div class="treeBg">
<a href="#" class="button"><span>this is another a test</span></a>
</div>

And this is the css for the button

a.button {
text-decoration:none;
background:transparent url(images/button-left.png) 0px 0px no-repeat;	
width:11px;
height:27px;
display:block;
overflow:visible;
white-space:nowrap;
}

a.button span {
color:white;
background:transparent url(images/button-right.png) top right no-repeat;	
float:left;
display:inline;
height:22px;
padding: 4px 14px 7px 0px;
margin-left:11px;
cursor:pointer;
}

There's a little problem with FF2 and since quite a number of people use this version of Firefox, my goal is to solve it, but I can't seem to find a way.
Here are the differences between FF3 and FF2:

You see on the right in FF2 is missing something. I found out that if I double the span's margin, it all works well in FF2, but then the buttons are too wide in all other browsers. And there seems to be no way to differentiate css for FF3 and FF3.

Anyone got a clue to put me in the right direction?

Thanx a lot

Shakespeare: onclick || !(onclick)

webwiz posted this at 22:05 — 3rd December 2009.

He has: 629 posts

Joined: May 2007

Hmm. That's an odd one! It seems that the 11px margin-left on the span pushes the text to the right, but not the containing box. (?) I tried adding margin-right: -11px; to the rule for a.button span {} which seemed to fix FF 2 without disturbing my other browsers. I have not checked on a Windows box, though-- don't know what the problem child will make of it.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

mrksem454 posted this at 05:42 — 13th April 2010.

They have: 3 posts

Joined: Apr 2010

There is new feature in the CSS 3 Specification in the form of -moz-max-content, -moz-min-content, -moz-fit-content, and -moz-available values to width, min-width, and max-width. And also Wrapped whitespace (white-space: pre-wrap), This allows you to have a < pre/> whose contents are wrapped nicely, while still maintaining its rigid structure.

8gb sd card

webwiz posted this at 06:21 — 4th December 2009.

He has: 629 posts

Joined: May 2007

P.S. You are using an incomplete DOCTYPE, which puts browsers in "quirks mode." This explanation of quirks mode gives the gory details. In brief, while the only consequential effect of quirks on real browsers is to make box sizes include borders and padding, compared to the standard of content only, all versions of the problem child work like the totally bizarre Internet Explorer 5.5. This includes IE 8.

Oh - and as if Microsoft had not given us enough problems, you'll need to know about IE8 "compatibility view" and add the new META tag. But get your DOCTYPE right first...

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Jack Michaelson posted this at 08:43 — 4th December 2009.

He has: 1,733 posts

Joined: Dec 1999

Thanx webwiz, that seems to be the trick. Tested in IE7+, Opera, Safari, FF2, FF3.5 and Chrome. This is all Win, but I will test it on OSX tonight.

Yeah I know about the doctype, but thanx anyway These buttons are extracted from a bigger project and I just made a quick example to post here at TWF. I used an old editor that automaticly generates this incomplete doctype. Should have replaced it though...

thanks again
Jack

Shakespeare: onclick || !(onclick)