3 replies [Last post]
kt_agathos
Offline
newbie
Last seen: 15 years 28 weeks ago
Joined: 2004-06-01
Posts: 2
Points: 0

I have recently started using form elements, esp. submit buttons, that are CSS'ed. I am trying to get the onmouseover working but cant seem to get an image to appear for either style on Safari. Just get shiny plastic looking sheen of normal button.

.button_add_new_call {
border: none;
width: 104px;
background-image: url('../images/addnewcall.gif');
background-repeat: no-repeat;
height: 21px;
}
.buttonover_add_new_call {
border: none;
width: 104px;
background-image: url('../images/addnewcall2.gif');
background-repeat: no-repeat;
height: 21px;
}

called by:

<input name="Submit" type="submit" class="button_add_new_call" onMouseOver="this.className='buttonover_add_new_call '" onMouseOut="this.className='button_add_new_call'" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">

Does anyone have any ideas why my images aren't showing in Safari?

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 35 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Image background on form submit button - Mac Safari

Hi kt_agathos

There's a couple of things stopping you doing what you want in Safari.

Firstly, Apple haven't implemented (any) CSS control over form elements. They're being particularly tight about the control and feel of style for form elements. I guess they truly want you to have that Aqua experience. :roll:

Hopefully they'll change this, but I wouldn't expect it too soon (probably not at least until OS X 10.4 Tiger is out at the end of the year).

Saying this, you can change the Submit button to type="image". This will help resolve your problem. Additionally though, remove the quote marks from the background url in the CSS. These can cause problems with some browsers.

Additional to this, Safari doesn't link Javascript commands in mixed-case. So, onMouseOver has to be onmouseover. This is actually correct though, according the specifications (I think).

Here's an example I used with your code: http://pub.c-o2.net/cssf/safariBg.htm

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 35 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Image background on form submit button - Mac Safari

Should also add that you can achieve the rollover without Javascript: http://pub.c-o2.net/cssf/safariBg02.htm

However, this won't work in IE. Since, IE only allows the psuedo-class :hover on anchors.

The next sentence is true. The previous sentence is false. Discuss...

kt_agathos
Offline
newbie
Last seen: 15 years 28 weeks ago
Joined: 2004-06-01
Posts: 2
Points: 0

Image background on form submit button - Mac Safari

co2

Thanks for the quick response....

tbh the Mac chaps have jsut left the building so there no way I can try this tonight, but the type=image soln sounds the best as the rendering is now function based and can be OS specific.

I'll keep you posted.

Cheers

KT