Help with CSS

**devilson** · 08-22-2007, 05:14 PM

Hey, I'm making a website and am trying to generate the hover effect on a button in CSS, I have the code for it but what happens when i hover my mouse over it is that the normal button stays as it is, then the hover button is shown but behind the normal button, here is my code:

<html><style type="text/css"> .layer_main {display: none;} </style>

<style type="text/css">
.button:normal {
/* normal button style */
background:url('http://cysoftware.cy.funpic.de/button1.png');
}

.button:hover {
background:url('http://cysoftware.cy.funpic.de/button3.png');
}

</style>

<head>
<body bgcolor="#000000"><noscript><div style="display:none"> </div></noscript><script type="text/javascript" src="http://media.funpic.de/layer.php?bid=40113058"></script></body>
<title> cysoftware.org </title>
<meta name="Generator" content="EditPlus">
<link rel="shortcut icon" href="http://cysoftware.cy.funpic.de/cico.gif">
<meta name="Author" content="Devilson">
<meta name="Keywords" content="">
<meta name="Description" content="">

</head>

<body>
<div id="LOGO">

<img src="http://cysoftware.cy.funpic.de/logo.png" />
</div>

<TABLE BORDER="0">
<TR>
<TD>
<a href="http://www.google.co.uk">
<img border="0" class="button" src="http://cysoftware.cy.funpic.de/button1.png" >
</a>
</TD>

<TD>
<a href="http://www.google.co.uk">
<img border="0" src="http://cysoftware.cy.funpic.de/button.png">
</a>
</TD>

<TD>
<a href="http://www.google.co.uk">
<img border="0" src="http://cysoftware.cy.funpic.de/button.png">
</a>
</TD>

</TR>
</TABLE>

</body>
</html>

thansk a lot for your help.

**naiani** · 08-22-2007, 06:45 PM

I'm not sure if this is the actual cause of the problem, but you're putting the STYLE tag in the wrong place. It should be between the tags <head></head>:

HTML Code:

<html>

<head>
    <title>title</title>
    <style>...</style>
    whatever else you have here, like scripts
</head>

<body>
    ....
</body>

</html>

-----

EDIT 1: Also, I don't think you can have more than one tag <style> with the same type in one page. If they have the same type, as it is in your case, you can put everything in one tag.

EDIT 2: Another thing that is actually the cause of the problem - You're including the image through the tag <img> and then using backgrounds to change it. Instead, if you don't want to use JavaScript, just use backgrounds and NOT the tag <img>. Images that you include using <img> don't change with hover. And I don't think there's another way of achieving what you want by using just CSS if not the way I explained.

Thread: Help with CSS

Thread Tools

Search Thread

Help with CSS

Bookmarks

Bookmarks

Posting Permissions