Cyb3rMann Cyb3rMann - 3 months ago 11
CSS Question

CSS Input not working correctly in IE

I have been looking at checkboxes and inputs, specifically the submit type, and i found that ALL the browsers that i have display them slightly differently. I always knew there were slight differences, but i thought that the size would be standard at least.

I have taken images of the normal, hover and active states of an input submit button from 5 major browsers and am displaying them at 300% so as to see the differences clearer. Beneath this, i have a REAL browser default input button.

It works in all browser but IE. The hover style seems to interfere with the real button's hover effect. It hasn't got a class and isn't even within a div, so i don't understand why my div.class style is affecting the input. This happens all the way down to IE7, at which point the button behaves normally, but the css:active state no longer works, and at IE5 both hover and active no longer work. Guess they didn't support them? Here is my code...thank you.

<!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" lang="en">

<head>
<title>Button Test</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

<style>
.ie11 {
width: 215px;
height: 70px;
background: url('images/buttonIE11.png') no-repeat;
}
.ie11:hover {
background: url('images/buttonIE11Hover.png') no-repeat;
}
.ie11:active {
background: url('images/buttonIE11Active.png') no-repeat;
}
</style>
</head>

<body>

<span>IE 11</span>
<div class="ie11"></div>
<br />
<span>Browser Default</span>
<form>
<input type="submit" value="Register" />
</form>

</body>
</html>


I couldn't figure out how to format code in the comments :/

I have got it right down to this...

<!DOCTYPE html>
<head>
<style>.ie11:hover {}</style>
</head>
<body>
<form>
<input type="submit" value="Register" />
</form>





That style, and it can be any class, is somehow interfering with IE's Input button, and i can't figure out why. The hover function of the input button no longer works. It doesn't do anything on hover. Incidentally, if you activate it, keep the mouse pressed and move off the button, you can then see the hover state until you let go of the mouse.

Answer

After further experimenting i think i have found my answer. I tried an ID instead of class, div, span, img etc. It would seem that IE doesn't like you to use :hover on anything other than a link tag. Not sure of the reason why, but the button now works as it should.
In case anyone is interested to see what the Input element looks like in different browsers, i made a snippet, i think. Hope it works...

a {
	display: block;
}

a.chrome {
	width: 197px;
	height: 63px;
	background: url('http://s31.postimg.org/gspnlvlaz/button_Chrome.png') no-repeat;
}
a.chrome:hover {
	background: url('http://s31.postimg.org/ywso6iizf/button_Chrome_Hover.png') no-repeat;	
}
a.chrome:active {
	background: url('http://s31.postimg.org/7bzuf91gb/button_Chrome_Active.png') no-repeat;	
}

a.ie11 {
	width: 215px;
	height: 70px;
	background: url('http://s31.postimg.org/jph9zwgij/button_IE11.png') no-repeat;
}
a.ie11:hover {
	background: url('http://s31.postimg.org/wd1mq5kt7/button_IE11_Hover.png') no-repeat;	
}
a.ie11:active {
	background: url('http://s31.postimg.org/xa81z0wbf/button_IE11_Active.png') no-repeat;	
}

a.opera {
	width: 195px;
	height: 61px;
	background: url('http://s31.postimg.org/5ghnhu1zv/button_Opera.png') no-repeat;
}
a.opera:hover {
	background: url('http://s31.postimg.org/m5j3dqyl7/button_Opera_Hover.png') no-repeat;	
}
a.opera:active {
	background: url('http://s31.postimg.org/gwo2fvg63/button_Opera_Active.png') no-repeat;	
}

a.safari {
	width: 193px;
	height: 60px;
	background: url('http://s31.postimg.org/k7cffr63f/button_Safari.png') no-repeat;
}
a.safari:hover {
	background: url('http://s31.postimg.org/ttb1t63kr/button_Safari_Hover.png') no-repeat;	
}
a.safari:active {
	background: url('http://s31.postimg.org/gnvjn29p7/button_Safari_Active.png') no-repeat;	
}

a.ff {
	width: 202px;
	height: 60px;
	background: url('http://s31.postimg.org/5zi5dd40r/button_FF.png') no-repeat;
}
a.ff:hover {
	background: url('http://s31.postimg.org/xj11b7jq3/button_FFHover.png') no-repeat;	
}
a.ff:active {
	background: url('http://s31.postimg.org/z0mhmrogr/button_FFActive.png') no-repeat;	
}
<!DOCTYPE html>
<head>
	<title>Button Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<span>Chrome. Size = 300%</span>
	<a class="chrome" href="#"></a>
	<br />
	<span>IE 11. Size = 300%</span>		
	<a class="ie11" href="#"></a>
	<br />
	<span>Opera. Size = 300%</span>		
	<a class="opera" href="#"></a>
	<br />
	<span>Safari. Size = 300%</span>		
	<a class="safari" href="#"></a>
	<br />
	<span>FireFox. Size = 300%</span>		
	<a class="ff" href="#"></a>
	<br />
	<span>Browser Default. Size = 100%</span>
	<form>
		<input type="submit" value="Register" />
	</form>
</body>
</html>