[CSS] Chromeinkompatibilität mit transition und box-shadow? [erledigt]

**Bonzenkind** · 27. 01. 2012, 23:21

Hallo Webdesigner!

Ich bin zur Zeit dabei, ein Websitenmenü zu gestalten. Die jeweiligen Boxen versehe ich mit transition und box-shadow, der Effekt eignet sich imho sehr gut um Aufmerksamkeit zu erregen aber gleichzeitig nicht zu viel Spielerei zu verwenden.

Dazu nutze ich folgende (Beispiel-)HTML:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo fuers gb</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="maincontentbox">
<ul id="MenuBar1" class="MenuBarHorizontal"> 
 <li><a href="foo">Test</a></li>
</ul>
</div></div>
</body>
</html>

...und die dazugehörige CSS:

Code:

/* Menue */
ul.MenuBarHorizontal {
	margin: 0em 0 0.6em 1em;
	padding: 0;
	list-style-type: none;
	cursor: default;
	width: auto;
	font-size: 165%;
}
ul.MenuBarActive {
	z-index: 1000;
}
ul.MenuBarHorizontal li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: auto;
	float: left;
}
ul.MenuBarHorizontal ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
	left: auto;
}
ul.MenuBarHorizontal ul li{
	width: 8.2em;
}
ul.MenuBarHorizontal ul ul {
	position: absolute;
	margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
	left: auto;
	top: 0;
}
ul.MenuBarHorizontal ul {
	border: 1px solid #CCC;
	width: auto;
	background-image: url(546546546456444.png);
	background-repeat: repeat-x;
}
ul.MenuBarHorizontal ul li ul {
	width: 5.5em !important;
}
ul.MenuBarHorizontal ul li ul * {
	width: 5.4em !important;
}
ul.MenuBarHorizontal ul *{
	width: 10.7em;
	font-size: 90%;
}
.lastsubmenuitem {
	border-top: 1px solid;
}
ul.MenuBarHorizontal a {
	display: block;
	cursor: pointer;
	background-color: transparent;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
	outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
	-khtml-transition all 0.25s ease-in-out;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
    box-shadow: 0 0 5px;
    -webkit-box-shadow: 0 0 5px; 
    -moz-box-shadow: 0 0 5px; 
	-khtml-box-shadow: 0 0 5px;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
	box-shadow: 0 0 1px;
    -webkit-box-shadow: 0 0 1px; 
    -moz-box-shadow: 0 0 5px; 
}
@media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
display: inline;
f\loat: left;
background: #FFF;
}}

Im Internetexplorer und Firefox funktioniert der Hovereffekt - in GoogleChrome leider nicht. Woran liegt das? Was muss ich ändern? Danke für jede Hilfe. Bonzenkind.

**sars** · 28. 01. 2012, 03:17

Du hast bei deinen box-shadow-Anweisungen keine Angaben zur Farbe gemacht. Das angeben einer Farbe ist zwar optional, allerdings nicht weiter spezifiziert und somit abhängig von der Implementierung des jeweiligen Browsers.

Siehe auch: https://developer.mozilla.org/en/CSS/box-shadow#Values

<color> (optional): If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the color property is used. On the other hand, WebKit's shadow is transparent and therefore useless if <color> is omitted.

**Bonzenkind** · 28. 01. 2012, 13:05

Vielen Dank für diese prompte Antwort. Danke, das hat mir sehr geholfen!

Interessant auch das dazu: http://kyuumeitai.posterous.com/the-...tion-hover-bug