Entries for month: June 2010

IE CSS Border Property Issue

Browser Compatability , CSS , Gotchas No Comments »

We had this issue at work last week and only getting round to blogging this now, but it might save some time if you're aware of this glitch with Internet Explorer.

There was a simple form that had an element of type "submit" that also had a background-image specified to give a roll-over effect like so (this was also tested with type="button"):

<input type="submit" id="submit" name="submit" value="Yes" />

The CSS to accomplish this was:

 
input#submit {
        width:235px;
        height:180px;
        border: none;
        text-indent:-9999px;
        background-image:url(submit-button.gif);
        background-position:top right;
}

input#submit:hover {
        background-position:right -212px;
}

OK, so the button worked on everything except for IE. 

The PROBLEM:

The border was still visible but so was the button.  The image wasn't appearing at all.

Apparently Internet Explorer does not render CSS border properties with a value "none" (highlighted above). 

The SOLUTION:

You must specify valid shorthand or individual properties for the CSS rules.  So to overcome this problem, the CSS was changed to the below.

input#submit {
        width:235px;
        height:180px;
        border:0px solid white;
        text-indent:-9999px;
        background-image:url(submit-button.gif);
        background-position:top right;
}

This seems to have solved the problem.

NOTE: This issue was tested with IE 7.

 

Bookmark and Share
Powered by Mango Blog. Design and Icons by N.Design Studio
RSS Feeds