CSS Button IE Size Problem - Help Needed

Hello,

I have an issue: my CSS buttons are a bit larger in height and width in IE. Until now these codes worked with other sites, but this one doesn't want to work with this new site I am coding:

Here is the CSS button code:

.button {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #01d1d5), color-stop(1, #0bbac6) );
    background:-moz-linear-gradient( center top, #01d1d5 5%, #0bbac6 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01d1d5', endColorstr='#0bbac6');
    background-color:#01d1d5;
    display:inline-block;
    border-left: 1px solid;
    border-color: #FFFFFF;
    color:#ffffff;
    font-family:Arial;
    font-size:13px;
    font-weight:normal;
    padding:4px 8px;
    text-decoration:none;
    text-shadow:1px 1px 0px #777777;
}.button-01:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0bbac6), color-stop(1, #01d1d5) );
    background:-moz-linear-gradient( center top, #0bbac6 5%, #01d1d5 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0bbac6', endColorstr='#01d1d5');
    background-color:#0bbac6;
}.button-01:active {
    position:relative;
    top:1px;
}

Code (markup):

The problem is that only in IE, the buttons are 1 px less high and the width also changes. It works perfectly in Chrome, FF, Safari.
I have a feeling it has something to do with the text shadow. The shadow works in all browsers, except IE (because IE is incompatible with this effect <<< too bad it cannot display shadows), so as the shadow disappears, the difference crashes the button together, making it appear smaller (?).

But I wan to use the shadow for the other browsers, I just don't want the button to crash together in IE...

Normally I put a "filler" on the right site (usually a DIV with a background image), in order to fill the empty space on the right side of the buttons.

Site is not online, so there is no URL. The page is "naked", so I don't see what else could cause this problem.

Basically, I'd require buttons the same size in IE and all browsers. First of all, because I want them to be parallel/in-line with the horizontal filler thing...

Thanks to anyone who can help!

 

Meanwhile I re-coded the entire thing and managed to solve the height problem.

The width problem still persists in IE. My new code is this:

.b {
-moz-box-shadow:inset 0px 0px 0px -50px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px -50px #ffffff;
box-shadow:inset 0px 0px 0px -50px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #01d1d5), color-stop(1, #0ab9c6) );
background:-moz-linear-gradient( center top, #01d1d5 5%, #0ab9c6 100% );
filterrogidXImageTransform.Microsoft.gradient(startColorstr='#01d1d5', endColorstr='#0ab9c6');
background-color:#01d1d5;
border-left: 1px solid #ffffff;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:normal;
padding:4px 8px;
text-decoration:none;
text-shadow:1px 1px 0px #777777;
}.b:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0ab9c6), color-stop(1, #01d1d5) );
background:-moz-linear-gradient( center top, #0ab9c6 5%, #01d1d5 100% );
filterrogidXImageTransform.Microsoft.gradient(startColorstr='#0ab9c6', endColorstr='#01d1d5');
background-color:#0ab9c6;
}.b:active {
position:relative;
top:1px;
}

Sorry about the "smileys" - the "CODE" option didn't appear, so the forum software automatically transformed some parts of the script! Hilarious!

The problem now is that some buttons (only some are 1-2 pixels wider in IE than in other browsers). It's the same text as elsewhere, but appears wider. And strange fact is that some buttons do appear normally. Only some are wider. But it's enough to jumble-mix-up the site design.

I experimented with various texts and it seems like IE is the only one that sees some texts sometimes wider than other banners.

Evidently: I must have the same width buttons in all browsers... How?

 

Your problem is on IE 6? 7or 8?
Can you send a link please?

 

Site is not online, I'm coding off-line... It's IE 9, actually

 

1) odd px sizes are always inconsistent cross browser. NOT that anything smaller than 14px is acceptable, NOT that your layout should 'rely' on px metric fonts.

2) DXImageTransform can cause elements to change size. It's why I'd say "screw it" and just given legacy versions of IE a solid color. NOT that I've found linear-gradient to be desirable from a performance perspective in Firefox or IE9... which is why I'd use a image with background-size instead. (or see what I could do with an INSET box-shadow)

3) You don't state your line-heights, and default line-heights cannot be relied upon cross browser as not only do browsers round off fractions different, they don't even start with the same default. (since the specification SUGGESTS 110% to 130%)

4) Again, what are you applying this to for an element? an actual BUTTON tag? an Anchor? a DIV?

5) You don't include any fallback families on your font.

6) You failed to include the ACTUAL CSS3 versions of your CSS3.

7) Your -webkit versions should only work on 2 year old versions of webkit, which is to say about half a percent of what's actually deployed given Safari and Chrome's auto-update behaviors.

Might also help if you stuffed a few more carriage returns in there... and used the condensed font property which would be less code, easier to maintain, and reminds you to set your line-heights. You change the font-size, you EXPLICITLY declare your line-height!

Something more like this:

.button {
	display:inline-block;
	padding:4px 8px;
	text-decoration:none;
	font:normal 14px/16px arial,helvetica,sans-serif;
	color:#FFF;
	background:#0DD;
	border-left:1px solid #FFF;
	-webkit-box-shadow:inset 0 -12px 12px #1BC;
	-moz-box-shadow:inset 0 -12px 12px #1BC;
	box-shadow:inset 0 -12px 12px #1BC;
	text-shadow:1px 1px 0 #777;
}

Code (markup):

The explicit 16px line-height should always make it 24px tall. Box-shadow is more reliable, performs better on hover (no painful delay in FF) and IMHO usually looks better too.

Also 'button' is a bit vague -- most likely cases where you'd use that you probably would be better off leveraging semantic markup, but that's a wild guess <broken record>without seeing the page in question.</broken record>

Oh, and your second example makes no sense since the fourth parameter cannot be negative -- and if it was positive it would make the button solid white...

 

Will get back to this thread a.s.a.p. ... I tried some "tricks" and some worked. Like: it works fine in IE, FF, Chrome, Safari... but: it's still ugly in IE 7. I guess that only has 1.5 % popularity, so I won't bother with it...

 

Meanwhile I solved the issue. It works in IE9, FF, Chrome, Safari. I still have problems with IE7 - such an obsolete browser that 1.5 % people are still using (why can't they see it's so obsolete?).

OK, so I guess I won't bother with IE7, since the sites work fine in all new version browsers. What do you think?

Would you recommend something else?

I'm all ears and eyes

 

You should fix that to work with IE7 i am sure there is more then 1.5% using that (I am using that).
In the past there where IE6 which was really hard to make the site work with but it more possible on IE7 if that important site you should probably work on that.
It will also help you to not make the same mistakes when you will create new sites.