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 Mike Lewis 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
0
0
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

waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
127
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
81
jjgupta915
jjgupta915
tyutghf
  • Locked
  • Question
Slight page curl effect
Replies
3
Views
71
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
Elements with same atttributes are differenly positioned on my page
Replies
1
Views
41
ChrisHirst
ChrisHirst
datamasher
  • Locked
  • Question
Preventing Browser Cache 1
Replies
2
Views
29
datamasher
datamasher

Part and Inventory Search

Sponsor

Back
Top