In IE7 I have a problem with the hover effect on the submit buttons.
Sometimes when I move the mouse over the button the hover effect works and
sometimes it doesn't.
I think it has to do with the 'inline-block' attribute value. Does anyone
recognize this problem?
Here's a link to the webpage: http://www.glassbox.nl/test/.
Please have a look at my code:
CSS:
div.submit {
margin-top:10px;
padding:10px;
text-align:right;
background: silver;
width: 700px;}
span.buttonArrowLeft input {
border: 0;
cursor: pointer;
font-size: 12px;
padding: 0 5px 0 25px;
margin: 0;
text-align: center;
height: 21px;
color: #FFF;
background: url(b_arrow_left.gif) left 0 no-repeat;
font: bold 12px Arial;}
span.buttonArrowLeft input:hover,
span.buttonArrowLeft:hover input {
background: url(b_arrow_left_mo.gif);}
span.buttonArrowLeft {
padding: 0 4px 0 0;
height: 21px;
background: url(b_right.gif) right 0 no-repeat;
display: -moz-inline-box; /* Firefox < 3 */
display: inline-block;
margin-left: 10px;}
span.buttonArrowLeft:hover {
background-image: url(b_right_mo.gif);}
part of the XHTML
<form>
<div class="submit">
<span class="buttonArrowLeft" id="action_opslaanNieuweOverschrijving">
<input type="submit" class="inputSubmit" name="action_opslaan1"
value="Opslaan 1" />
</span>
<span class="buttonArrowLeft" id="action_opslaanNaarVerzendlijst">
<input type="submit" class="inputSubmit" name="action_opslaan2"
value="Opslaan 2" />
</span>
<span class="buttonArrowLeft" id="action_directVersturen">
<input type="submit" class="inputSubmit"
name="action_directVersturen" value="Direct versturen" />
</span>
</div>
</form>
Thanks in advance,
Dimpie
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
