PDA

View Full Version : hover and botton



Maurizio1230
Apr 22nd, 2010, 12:44 PM
I insert a div in a botton as you can see:

<button name="Submit" type="submit">
<div class="buttonSubmit"><em><b>Log In</b></em></div>
</button>
and I add this to css:

button {
background-color:#FFFFFF;
border:0 none;
}
.buttonSubmit {
background:url("../images/link3-bgd.gif") repeat-x scroll center top transparent;
color:#FFFFFF;
display:block;
float:right;
font-family:Arial,Helvetica,sans-serif;
font-size:1.09em;
line-height:1.08em;
text-decoration:none;
}
.buttonSubmit em {
background:url("../images/link3-left.gif") no-repeat scroll left top transparent;
display:block;
}
.buttonSubmit b {
background:url("../images/link3-right.gif") no-repeat scroll right top transparent;
display:block;
font-style:normal;
font-weight:normal;
padding:10px 16px;
}
.buttonSubmit:hover {
background:url("../images/link2-bgd.gif") repeat-x scroll center top transparent;
color:#FFFFFF;
display:block;
float:right;
font-family:Arial,Helvetica,sans-serif;
font-size:1.09em;
line-height:1.08em;
text-decoration:none;
}
.buttonSubmit em:hover {
background:url("../images/link2-left.gif") no-repeat scroll left top transparent;
display:block;
}
.buttonSubmit b:hover {
background:url("../images/link2-right.gif") no-repeat scroll right top transparent;
display:block;
font-style:normal;
font-weight:normal;
padding:10px 16px;
}

:hover works When I delete the botton in html code like here:

<div class="buttonSubmit"><em><b>Log In</b></em></div>
but it doens't work with the botton in the html code.

I don't understand. Why???

Thank you very much

abduraooft
Apr 22nd, 2010, 01:26 PM
I insert a div in a botton as you can see: You shouldn't do that since you can't have a block level element like <div> inside an inline element.

I don't understand. Why???
You can't expect a standard behavior from an invalid markup. You may make us of w3-validator (http://validator.w3.org).

Maurizio1230
Apr 22nd, 2010, 07:38 PM
This document was successfully checked as XHTML 1.0 Transitional!
w3-validator doesn't see it.

Maurizio1230
Apr 25th, 2010, 04:19 PM
Now I use span, inline element, instead of div, block element: it didn't work with div and it still doesn't work with span.

And my page is valid in both cases (div/span):
This document was successfully checked as XHTML 1.0 Transitional!

The document located at <http://****.com> was successfully checked as XHTML 1.0 Transitional. This means that the resource in question identified itself as "XHTML 1.0 Transitional" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used).

Span HTML and CSS:

<button name="Submit" type="submit">
<span class="buttonSubmit"><em><b>Log In</b></em></span>
</button>


button { background-color:#FFFFFF; border:0; }
span.buttonSubmit { display:block; background:url(../images/link3-bgd.gif) repeat-x top; font-size:1.09em; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:none; line-height:1.08em; }
span.buttonSubmit em { display:block; background:url(../images/link3-left.gif) no-repeat left top; }
span.buttonSubmit b { display:block; background:url(../images/link3-right.gif) no-repeat right top; padding:10px 16px 10px 16px; font-weight:normal; font-style:normal; }
span.buttonSubmit:hover { display:block; background:url(../images/link2-bgd.gif) repeat-x top; font-size:1.09em; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:none; line-height:1.08em; }
span.buttonSubmit em:hover { display:block; background:url(../images/link2-left.gif) no-repeat left top; }
span.buttonSubmit b:hover { display:block; background:url(../images/link2-right.gif) no-repeat right top; padding:10px 16px 10px 16px; font-weight:normal; font-style:normal; }

Thank you very much

abduraooft
Apr 25th, 2010, 04:39 PM
span.buttonSubmit:hover { display:block; background:url(../images/link2-bgd.gif) repeat-x top; font-size:1.09em; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:none; line-height:1.08em; }
span.buttonSubmit em:hover { display:block; background:url(../images/link2-left.gif) no-repeat left top; }
span.buttonSubmit b:hover { display:block; background:url(../images/link2-right.gif) no-repeat right top; padding:10px 16px 10px 16px; font-weight:normal; font-style:normal; } Try changing the above to

span.buttonSubmit:hover { display:block; background:url(../images/link2-bgd.gif) repeat-x top; font-size:1.09em; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:none; line-height:1.08em; }
span.buttonSubmit:hover em { display:block; background:url(../images/link2-left.gif) no-repeat left top; }
span.buttonSubmit:hover b { display:block; background:url(../images/link2-right.gif) no-repeat right top; padding:10px 16px 10px 16px; font-weight:normal; font-style:normal; }

PS: You should give alternative background-colors, along with all background-images, to display something for those who have no way to see the images in their browser.

Maurizio1230
Apr 27th, 2010, 09:23 PM
it still doesn't work on my firefox 3.6.3. Maybe it's not supported by it.
Do you advice me to use Javascript?

VIPStephan
Apr 27th, 2010, 10:53 PM
You should post your entire code because issues are often caused in a totally different place than where they appear. The code below works (in Firefox and Safari, at least) so there must be something else in your code that’s overriding it or whatever.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
.submit {border: 1px solid red;background: yellow;}
.submit em {border: 1px solid lime;}
.submit b {color: blue;}
.submit:hover {background: blue;border: 3px dashed red;}
.submit:hover em {background: lime;}
.submit:hover b {color: white;}
</style>
</head>
<body>
<div>
<button class="submit" type="submit"><em><b>Submit</b></em></button>
</div>
</body>
</html>

Maurizio1230
Apr 28th, 2010, 11:14 AM
The html code is:

<button type="submit" name="Submit"><span class="buttonSubmit"><em><b>LogIn</b></em></span></button>
but it doesn't work.
If I delete the button tag:

<span class="buttonSubmit"><em><b>LogIn</b></em></span>
it works.

This is the page https://test:[email protected]/aLogIn.php

Thank you very much

abduraooft
Apr 28th, 2010, 11:29 AM
The following should work!

button { background-color:#FFFFFF; border:0; }
span.buttonSubmit { display:block; background:url(../images/link3-bgd.gif) repeat-x top; font-size:1.09em; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:none; line-height:1.08em; }
span.buttonSubmit em { display:block; background:url(../images/link3-left.gif) no-repeat left top; }
span.buttonSubmit b { display:block; background:url(../images/link3-right.gif) no-repeat right top; padding:10px 16px 10px 16px; font-weight:normal; font-style:normal; }
button:hover span.buttonSubmit { display:block; background:url(../images/link2-bgd.gif) repeat-x top; font-size:1.09em; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:none; line-height:1.08em; }
button:hover span.buttonSubmit em { display:block; background:url(../images/link2-left.gif) no-repeat left top; }
button:hover span.buttonSubmit b { display:block; background:url(../images/link2-right.gif) no-repeat right top; padding:10px 16px 10px 16px; font-weight:normal; font-style:normal; }

Maurizio1230
Apr 28th, 2010, 12:28 PM
It works!!! But I don't understand why I should put :hover on button.

Thank you very much.