IE6 button borders

[jazzslider]

Hello!

I need some help with styling the <button> element for IE6. I'm trying to create a button with a background color/image, thick right border, and no other borders. It seems like it ought to work like this:

button {
    border:none;
    background-color:#0066FF;
    border-right:10px solid blue;
}

Unfortunately, IE6 does not render this correctly; the content area of the button (with the lighter blue background) appears to be just a touch too small on the top and the bottom when compared with the thicker right-hand border.

Has anyone here experienced and/or fixed this problem?

Thanks for your help!

[Rob_D]

This is normal.
Try the following demonstration:

.button {
	width:50px; /* added */
	height:100px; /* added */
    border:none;
    background-color:#0066FF;
    border-right:30px solid blue;
	border-top:5px solid red; /* added */
}

You will see that the corners are actually mitred. This is why your code makes the border on the right slightly taller than the rest of the button.

I don't know a quick solution to this other than messy CSS so I will leave to the experts.

[Rob_D]

Although with 0px border you would think that this effect shouldn't happen...

[Rob_D]

Try making the borders -1px. You will need to check with other browsers.

Like this:

.button {
width:50px;
height:100px;
border:-1px;
background-color:#0066FF;
border-right:30px solid blue;
}

[Dan Schulz]

Remove the border: none; declaration and just zero out the sides you don't want. If this doesn't work, then set the display to inline-block (IIRC that's what it is anyway, but I could be wrong - I hardly ever use buttons for this purpose since it appears that some major mobile device vendors aren't supporting it).

[Rob_D]

Dan's got the correct solution...

[jazzslider]

Remove the border: none; declaration and just zero out the sides you don't want. If this doesn't work, then set the display to inline-block (IIRC that's what it is anyway, but I could be wrong - I hardly ever use buttons for this purpose since it appears that some major mobile device vendors aren't supporting it).

I'm not sure I understand. I tried the following, but to no avail:

button {
    border-left:0;
    border-top:0;
    border-bottom:0;
    background-color:#0066FF;
    border-right:10px solid blue;
}

I also tried adding a display:inline-block property to the above code, and also adding an explicit width and/or height. None of these combinations seemed to affect the mitre effect IE is adding.

[Rob_D]

What about border:-1px;? Remember to test in all browsers

[Dan Schulz]

I'd have to see the code for your entire page then. Something tells me you've got code that could be conflicting with the proper (as IE sees it) behavior of the button element.

[Rob_D]

Yes, I can't see anything wrong in IE6 using your code.

[Paul O'B]

easy Peasy

button {
    border:none;
    background-color:#0066ff;
    border:1px solid #0066ff;
    border-right:10px solid blue;
}

[Paul O'B]

What about border:-1px;? Remember to test in all browsers

Negative values aren't allowed for borders

[Dan Schulz]

easy Peasy

button {
    border:none;
    background-color:#0066ff;
    border:1px solid #0066ff;
    border-right:10px solid blue;
}

Paul, you've re-declared the border property in your example. Note that the original poster has border: none; declared at the very top of the style rule.

[Rob_D]

Best to see the code in context...

[Rob_D]

Negative values aren't allowed for borders

Naughty me...

[Paul O'B]

Paul, you've re-declared the border property in your example. Note that the original poster has border: none; declared at the very top of the style rule.

Yes I left it in place to show what I was doing

The code I gave works perfectly and of course border:none can be removed.

The problem is simply that IE does mitred borders and unless you join the borders up you get a mitred effect. I simply filled in the gaps with a border in the background color of the element.

Some times the easiest solution is often overlooked

[jazzslider]

easy Peasy

button {
    border:none;
    background-color:#0066ff;
    border:1px solid #0066ff;
    border-right:10px solid blue;
}

Thanks; that works perfectly. I feel kind of silly for not having tried it in the first place