2 replies [Last post]
yaourt
Offline
newbie
Last seen: 11 years 35 weeks ago
Joined: 2003-03-28
Posts: 2
Points: 0

Hi everybody,

I have a CSS problem.
I am developping a GUI. And I have decided to develop the graphical component in CSS as button
And You will say what is the bug. My image appears and When I go over. Another image appears but with a move of some pixels.
I have tried to play width padding option but the result is worst :? .

If anyone got the answer ?
Thanks,

-----------------------------------------------------------------------------------
So there are my CSS Classes :

.bouton {
display:block;
width:89px;
height:20px;
text-decoration:none;
text-align:center;
background-image:url('button-enable.png');
padding:5px
}

.boutonHover {
display:block;
width:89px;
height:20px;
text-align:center;
background-image:url('button-over.png');
padding:5px
}

.boutonClick {
display:block;
width:89px;
height:20px;
text-align:center;
background-image:url('button-click.png');
padding:5px
}

And this is the code of the button :

<table>
<tr>
<td width='99' height='30' onmouseover="this.className='boutonHover';" onmouseout="this.className='bouton';" onclick="this.className='boutonClick';">
<a href='' class='bouton'>
Annuler
</a>
</td>
</tr>
</table>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

buttons

Hi Yaourt,
You have set the style for the td when the events onmouseover, onclick and onmouseout occur.
One thing you have overlooked is the td has no style assigned to it when the page first loads.
Not until the mouse moves over the area will it get the style.
All you need to do is say class="bouton" in the td tag.
Smile

yaourt
Offline
newbie
Last seen: 11 years 35 weeks ago
Joined: 2003-03-28
Posts: 2
Points: 0

buttons.

thanks a lot tony,

That's work!