Har löst det, verkar som om man _måste_ ange en fast höjd på li element för att det ska tolkas rätt i IE.
Källa: http://archivist.incutio.com/viewlist/css-discuss/86828
Ska bli spännande att se hur det ser ut ie IE6 / IE8...
Frågan#1
Hej,
Har följande kod:
<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#deposit {
width: 750px;
}
.paymentMethodTabArea {
float: left;
border-color: #cc0000;
}
ul.paymentMethods {
list-style: none;
width: 200px;
height: 400px;
border-right: 1px #333 solid;
background-color: #f3f3f3;
}
li.tab {
background-color: #eee;
border-top: 1px #ddd solid;
border-bottom: 1px #ddd solid;
border-left: 1px #ddd solid;
}
li.tab a,
li.activeTab a {
display: block;
padding: 4px 8px 4px 8px;
margin: 0px;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #333;
}
li.tab a:hover {
color: #333;
background-color: #ddd;
}
li.activeTab {
width: 200px;
border-color: #333;
background-color: #fff;
}
li.activeTab a:link,
li.activeTab a:active,
li.activeTab a:visited {
color: #000;
}
li.activeTab a:hover {
cursor: default;
background-color: #fff;
}
.selectedMethod {
padding: 5px;
width: 534px;
height: 388px;
float: right;
color: #000000;
background-color: #fff;
}
</style>
</head>
<body>
<div id="deposit">
<div class="paymentMethodTabArea">
<ul class="paymentMethods">
<li class="tab"><a href="#">Button one</a></li>
<li class="tab"><a href="#">Button two</a></li>
<li class="tab"><a href="#">Button tree</a></li>
<li class="tab"><a href="#">Button four</a></li>
<li class="tab activeTab"><a href="#">Button five</a></li>
<li class="tab"><a href="#">Button six</a></li>
<li class="tab"><a href="#">Button seven</a></li>
<li class="tab"><a href="#">Button eight</a></li>
</ul>
</div>
<div class="selectedMethod">
<p>Some content</p>
</div>
</div>
</body>
</html>
Problemet är att i IE7 får jag en marginal under elementet som är satt som "ActiveTab". Samma marginal finns inte i Firefox t.ex.
Jag har _inte_ möjlighet att läsa in ett eget stylesheet för det här, och kan heller inte ändra HTML koden, som genereras från en extern källa. Har bara CSS'en att "leka" med.
Det ska vara en margin-bottom: 2px; på alla <li>, men det blir alltid 4 i IE7 efter det som för tillfället har klassen activeTab.
Tack på förhand