Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Comments are preventing hover effect 1

Status
Not open for further replies.
FancyPrairie

FancyPrairie

Programmer
Oct 16, 2001
2,917
US
I created an html document that contains a comment block at the beginning. I have a style sheet that displays buttons. If I include the comment block, my buttons look fine, but the hover doesn't work. If I don't include the comment block, my hover works, but my image is cut in half. My code follows. Note that any image should do (mine are 34px in height).

Code: 
  <!-- This comment section causes my button to look ok, but the hover doesn't work.
     Remove this comment section and my button is cut in half but the hover works.
     If I put this comment section any place else on the page (i.e. between <title> and <style> or
     between </head> and <body>, button is cut in half, but the hover works.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en-us" lang="en-us" >

<head>
  <title>Test</title>

 <style type="text/css">

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#fff;
	background-repeat:repeat;
	border-color:#808080;
	border-width:1px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	height:21px;
	float: left;
}
ul.pureCssMenu ul{
	width:0px;
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#FFFFFF;
	border-width:1px;
	border-color:#fff;
	border-style:solid;
	text-align:center;
	text-decoration:none;
	padding:2px 5px 5px 10px;
	_padding-left:0;
	font:normal 11px Tahoma;
	color: #000;
	text-decoration:none;
	cursor:default;

}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a 
{
    
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3px;
	height:100%;
	display:inline-block;
	background-color:#808080;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3px;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#DBF0F9;
	border-color:#45ADE4;
	border-style:solid;
	font:normal 11px Tahoma;
	color: #444;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#DBF0F9;
	border-color:#45ADE4;
	border-style:solid;
	font:normal 11px Tahoma;
	color: #444;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #557D4F !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def{display:none}
ul.pureCssMenu span{
	display:block;
	background-image:url(../images/arrv_white.png);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:9px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.png)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(../images/arr_white.png);}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:30px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(../images/btn3.png);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(../images/BackgroundStrip_MenuShort.png);
font:normal 11px Tahoma;
color:#eee;
}

ul.pureCssMenu li.liFirstRecord         {width:59px; height:34px;  }
ul.pureCssMenu li input.MMCPC_FirstRecord       {cursor: pointer; background-color: transparent; border: 0; background-image:url(../images/img1.png); background-repeat: no-repeat; width: 100%; height: 100%}
ul.pureCssMenu li input.MMCPC_FirstRecord:hover {background-image:url(../images/img2.png);}


 ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
	padding:0px 0px 0px 0px;
}
 ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
 ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
 ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
 ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
 ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
 ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}

 </style>
 
</head>

<body>

    <ul class="pureCssMenu pureCssMenum0">
        <li class="liFirstRecord">  <input id="btnFirst"  class="MMCPC_FirstRecord" type="button" title="GoTo First Record" /></li>
    </ul>

</body>
</html>
 
Sort by date Sort by votes
I believe you're testing this in IE. IE will render a page in non-standards mode, as soon as there is something (even non-rendered) in the code before the doctype. That means that in quirks mode, your hover does not work and in standards mode, your images get cut off. Unless you have to specifically design for IE, I would recommend doing your testing in one of the more standards compliant browsers -- if you get your validated, standards-compliant code to work in one of those browsers, chances are better it will work in most of them.

That said, we can ignore the hover not working -- you don't want to render your page in quirks mode anyway. I believe your images get cut off because of the height: 100% on the input element. Since inputs are not block elements, they don't really have a defined height and browser likely gets confused. I would try to either define them as blocks (display: block) or use line-height to define their height (that won't work if the text of the button is multiline).

I could argue the use of buttons anyway... You could use anchors (<a>) instead and use css to style them in a way to look like buttons. But it is hard to tell, given the short amount of code you provided.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
576
3esolar
3
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
225
waubain
waubain
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
204
jjgupta915
jjgupta915
tyutghf
  • Locked
  • Question
Slight page curl effect
Replies
3
Views
193
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
Elements with same atttributes are differenly positioned on my page
Replies
1
Views
91
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top