S silfver Medlem sedan apr. 2003 12 679 inlägg Frågan 18 sep. 2007 10:19 #1 Jag behöver experthjälp med en css-meny jag håller på med. Menyn måste se likadan ut i både Firefox och Internet Explorer - är det möjligt?
Sidan hittar ni här (och det ser bra ut i Firefox men inte i IE):http://silfver.se/temp/css-meny/
Och bilderna finns här:http://silfver.se/temp/css-meny/header-bg.png http://silfver.se/temp/css-meny/menu-hover.png
Jag vill att det ska se ut som i den bifogade filen men jag lyckas fan inte alltså! Inte i båda samtidigt i alla fall.
Nuvarande css:
body {margin: 0; padding: 0; background: url(header-bg.png) repeat-x; font-family: verdana;}
#menu ul {border-left: 1px solid #5c89a9;}
#menu ul li {display: inline; float: left; line-height: 162px; font-size: .7em;}
#menu a {text-decoration: none; padding: 90px 10px 8px 10px; color: #fff; border-right: 1px solid #5c89a9;}
#menu a:hover {background: url(menu-hover.png);}
Hjälp? :birp
D dea Medlem sedan dec. 2002 387 inlägg prova detta, ett ie-hack, ska fungera i ie6
<!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="sv">
<head>
<title>PF Concept</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {margin: 0; padding: 0; background: url(header-bg.png) repeat-x; font-family: verdana;}
#menu ul {border-left: 1px solid #5c89a9;}
#menu ul li {display: inline; float: left; line-height: 162px; font-size: .7em;}
[B]* html ul li { padding-top:15px; }[/B]
#menu a {text-decoration: none; padding: 90px 10px 8px 10px; color: #fff; border-right: 1px solid #5c89a9;}
#menu a:hover {background: url(menu-hover.png);}
#menu a#active {background: url(menu-hover.png);}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" id="active">startsida</a></li>
<li><a href="#">produkter</a></li>
<li><a href="#">information</a></li>
</ul>
</div>
</body>
</html>
D dea Medlem sedan dec. 2002 387 inlägg prova
}
<!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="sv">
<head>
<title>PF Concept</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {margin: 0; padding: 0; background: url(header-bg.png) repeat-x; font-family: verdana;}
#menu ul {border-left: 1px solid #5c89a9;}
#menu ul li {display: inline; float: left; line-height: 162px; font-size: .7em;}
[B]*:first-child+html ul li { padding-top:15px; }
* html ul li { padding-top:15px; }[/B]
#menu a {text-decoration: none; padding: 90px 10px 8px 10px; color: #fff; border-right: 1px solid #5c89a9;}
#menu a:hover {background: url(menu-hover.png);}
#menu a#active {background: url(menu-hover.png);}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" id="active">startsida</a></li>
<li><a href="#">produkter</a></li>
<li><a href="#">information</a></li>
</ul>
</div>
</body>
</html>
}
*:first-child+ är ett ie7 hack som jag tror inte läses av ff
C colione Medlem sedan juni 2001 4 421 inlägg Lägg det hela i en Conditional Comment?
<!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="sv">
<head>
<title>PF Concept</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {margin: 0; padding: 0; background:pink; font-family: verdana;}
#menu ul {border-left: 1px solid #5c89a9;}
#menu ul li {display: inline; float: left; line-height: 162px; font-size: .7em;}
#menu a {text-decoration: none; padding: 90px 10px 8px 10px; color: #fff; border-right: 1px solid #5c89a9;}
#menu a:hover {background: yellow;}
#menu a#active {background:yellow;}
</style>
<!--[if IE]>
<style type="text/css">
#menu ul li { padding-top:15px; }
</style>
<![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" id="active">startsida</a></li>
<li><a href="#">produkter</a></li>
<li><a href="#">information</a></li>
</ul>
</div>
</body>
</html>
S silfver Medlem sedan apr. 2003 12 679 inlägg Kungligt, dea! Tack för hjälpen. :bire
C colione Medlem sedan juni 2001 4 421 inlägg Varför välja css-hack framför en contidional comment? När nästa version av ie kommer och den inte tolkar hacket längre, måste du komma upp med ett nytt hack men med conditional commenten behöver du max lägga till 4 tecken.
frippz Medlem sedan okt. 2005 18 inlägg colione har rätt. Lägg alla IE-hacks i en ie.css som importeras via CC och filtrera ut hack som riktar sig mot IE6 med * html inuti ie.css. Håll det enkelt. ;)
C colione Medlem sedan juni 2001 4 421 inlägg Eller så använder du fler conditional comments och en css-fil för ie6 och en för ie7. ;) Annars kan du få liknande problem igen senare.
