Borders and Padding for 'fake' button

Colin Young

unread,

Jul 27, 2001, 4:39:49 PM7/27/01

to

I'm trying to make a style to cause <a class="button" ...> to look like a
button (I can't use a real submit button because I'm trying to do a straight
replace of an interface that uses images for buttons -- as in <a
href="..."><img src="..."></a>).

I've come up with a style that works in IE5.5 and Netscape 6 but the borders
and padding do not appear in IE5.0. To add insult to injury, Netscape 4 is
able to display the padding and a border (although the wrong amount of
padding and the border is the wrong colour). If I apply my style to div or p
it shows as a "button" but the full width of the page, which isn't going to
work. span has the same problem as the a tag.

Any suggestions where I've gone wrong (assuming it is me and not just IE5),
and how to get it working in IE5, IE5.5 and Netscape 6 (I don't need to
support NN4)?

Thanks

Colin

A.button {text-decoration: none;
border-color: #cccccc #666666 #666666 #cccccc;
border-style: solid;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
background-color: #9c9c9c;
padding-top: 2pt;
padding-right: 4pt;
padding-bottom: 2pt;
padding-left: 4pt;}
A.button:link {color: white}
A.button:visited {color: white}
A.button:active {color: yellow}
A.button:hover {color: red}

Colin Young

unread,

Jul 27, 2001, 4:40:10 PM7/27/01

to

Steve Fulton

unread,

Jul 28, 2001, 7:33:58 AM7/28/01

to

If you don't need to support NS4, why not just put the image in a button
element?

--
The spirit of resistance to government is so valuable on certain occasions
that I wish it to be always kept alive. It will often be exercised when
wrong, but better so than not to be exercised at all. -Thomas Jefferson

=-=-=
Steve
-=-=-

"Colin Young" <x...@nospam.com> wrote in message
news:#ZU5ExtFBHA.1392@tkmsftngp05...

Rowland Shaw

unread,

Jul 30, 2001, 6:20:07 AM7/30/01

to

Try this:
A.button {
text-decoration: none;
border-color: ButtonHighlight;
border-style: outset;
border-width: 2px;
background-color: ButtonFace;
padding: 2pt 4pt;
line-height: 2em;
}

"Colin Young" <x...@nospam.com> wrote...

Colin Young

unread,

Jul 30, 2001, 10:03:34 AM7/30/01

to

That's not working for IE5 either. Both the padding and the border are
failing to appear. But thanks for pointing out the 'outset' style. I knew it
existed but for some reason my brain refused to make the connection there...

Colin

"Rowland Shaw" <spamf...@anotherpointless.org> wrote in message
news:e7hS3EOGBHA.1344@tkmsftngp03...

Rowland Shaw

unread,

Jul 30, 2001, 10:49:05 AM7/30/01

to

I tested with IE6 in compatability mode, as it was all I had to hand at the
time -- you might be missing the borders because of line height?

From the testing I did, I was getting left and right borders before I added
line hieght -- have you tried border-color: lime; border-width: 50px; to
make it a littel easier to see what is being drawn?

"Colin Young" <x...@nospam.com> wrote...

> That's not working for IE5 either. Both the padding and the border are
> failing to appear. But thanks for pointing out the 'outset' style. I knew
it
> existed but for some reason my brain refused to make the connection
there...
>
>

> "Rowland Shaw" <spamf...@anotherpointless.org> wrote...