silfverMedlem sedan apr. 200312 679 inlägg 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
deaMedlem sedan dec. 2002387 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>
deaMedlem sedan dec. 2002387 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
colioneMedlem sedan juni 20014 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>
silfverMedlem sedan apr. 200312 679 inlägg Kungligt, dea! Tack för hjälpen. :bire
colioneMedlem sedan juni 20014 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.
frippzMedlem sedan okt. 200518 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. ;)
colioneMedlem sedan juni 20014 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.
