Hi,
I'm trying to apply the sliding doors technique to the
<button type="submit"> tag, with only 1 image.
It nearly works, the only problem remaining is that we can see the
underlying image through the image which is above, as the background of
the image is transparent.
I want the image background to be transparent, as the background color
of the element containing the button can be different throughout the site.
Does anyone know how not to see the underlying image through the image
on top?
Here is the code, and the image is attached.
Thanks in advance.
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" title="neuf"
href="/styles/test.css" />
</head>
<body>
<br />
<br />
<form>
<span class="button_submit"><button type="submit" name="submit">submit
1a</button></span>
<span class="button_submit"><button type="submit" name="submit">submit
1b</button></span>
</form>
</body>
</html>
* {
padding: 0;
margin: 0;
background-color: #ccc;
}
.button_submit {
display: -moz-inline-box;
display: inline-block;
background: transparent url(/images/button_submit.png) no-repeat left
top;
height: 28px;
padding-left: 9px;
}
.button_submit button {
background: transparent url(/images/button_submit.png) no-repeat right
top;
overflow: visible;
border: 0;
height: 28px;
padding: 6px 16px 6px 6px;
font-weight: bold;
color: #296194;
cursor: pointer;
}
.button_submit button:hover {
color: #fff;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
