CSS Forum

**pealo86** · 12-18-2009, 07:56 AM

I have my button styled like so:

Code:

form .submit {
    color:#FFFFFF;
    display:block;
    margin-left:10px;
    padding:0.5em;
    text-decoration:none;
}

#content form .submit {
    border:solid #979797;
    border-width:0 10px 0 0;
    background:#545454;
    width:auto;
    min-width:90px;
    color:#FFF;
    padding:5px;
}

#content form .submit:hover {
    background:#00A2F5;
    border-right-color:#3EBAFA;
}

It's only supposed to have a border on the right (I've tried various combinations of border css but none of which seem to solve my problem)

In IE7 the grey border on the right appears 'taller' than the button itself. And even more strange, if I click inside one of the labels or input fields I get a black line to the right of the border! Originally I was getting a black line around the whole button, until I had a bit of a play about with the css. But I just can't seem to shift it!

Any ideas would be great

Below is a link to the troublesome page.

http://bit.ly/8eNWnM