Hej, jag har sprungit in i ett problem! När jag kör understående kod verkar det som att IE ignorerar line-heighten i #icons diven. Om man ersätter bilderna i hyperlänkarna mot text träder plötsligt line-heigten in.
Har testkört mot PC IE 6.0, PC FF 2.0.0.6, MAC FF 2.0.0.6, MAC Safari 3.0.3, MAC Camino 1.0.4. Det är bara i IE det blir fel.
Hoppas någon har någon bra svar/idé att lösa det på.
p.s. har plockat bort lite html, men inget som är viktigt. och ja css koden är skitig har inte snyggat till den än... d.s.
<!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=iso-8859-1" />
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="index">
<div id="wrapper">
<div id="main-body">
<div id="sidebar">
<p><img src="images/test.png" width="280" height="517" /></p>
</div> <!-- end #sidebar -->
<div id="content">
<h2>Lorem ipsum dolor sit amet</h2>
<div id="supplement">
<p>Du är här:</p>
<ul id="breadcrumb">
<li><a href="#">Första</a>
<ul>
<li>> <a href="#">Andra</a>
<ul>
<li>> <a href="#">Tredje</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="icons">
<a href="#"><img src="images/icon-pdf.png" alt="Ladda ner PDF" /></a>
<a href="#"><img src="images/icon-print.png" alt="Skriv ut" /></a>
<a href="#"><img src="images/icon-email.png" alt="Maila artikeln" /></a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<ul>
<li>Duis aute irure dolor in reprehenderit</li>
<li>in voluptate velit esse cillum dolore eu fugiat nulla pariatur</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
<li>sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
<h3>Consectetur adipisicing elit</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam.</p>
<h4>Sed do eiusmod tempor incididunt</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> <!-- end #content -->
</div> <!-- end #mainbody -->
</div> <!-- end #wrapper -->
</body>
</html>
body {
margin: 0px;
padding: 0px;
background: url(images/bodybg.png) repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
line-height: 18px;
}
div, p, ul, li, h1, h2, h3, h4, img, form, label, a {
padding: 0;
margin: 0;
text-decoration: none;
}
img, a img {
border: none;
}
ul, ol {
list-style-type: none;
}
p {
margin-bottom: 18px;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #CC0000;
font-size: 3em;
line-height: 36px;
margin-bottom: 18px;
}
h3 {
font-size: 18px;
line-height: 18px;
margin-bottom: 18px;
}
h4 {
font-size: 12px;
line-height: 18px;
}
/************************************************
* Hyperlinks *
************************************************/
a,
a:visited {
color: #BE0C0C;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/************************************************
* Wrapper *
************************************************/
#wrapper {
float: none;
margin: 0 auto;
padding-top: 4px;
width: 840px;
/*background: url(images/gridbg.gif) 0 6px;*/
}
/************************************************
* Header *
************************************************/
#header {
background: url(images/headerbg.png) no-repeat;
height: 166px;
margin-bottom: 18px;
padding-top: 34px;
}
#header h1 {
height: 65px;
margin: 0 18px 0 210px;
width: 127px;
}
#header span { display: none; }
/************************************************
* Main Navigation *
************************************************/
#main-nav {
font: 11px/1.5em Tahoma;
}
#main-nav {
background: url(images/menu-subbg.png) no-repeat bottom left;
float: left;
height: 73px;
line-height: normal;
margin-top: 28px;
position: relative;
width: 840px;
}
#main-nav ul {
margin: 0;
padding: 8px 10px 0 0;
}
#main-nav li {
display: inline;
margin: 0;
padding: 0;
}
#main-nav a {
background: url("images/menu-tableft.png") no-repeat left top;
float: left;
margin: 0;
padding: 0 0 0 11px;
text-decoration: none;
outline: none;
}
#main-nav a span {
background: url("images/menu-tabright.png") no-repeat right top;
color: #999;
display: block;
float: left;
padding: 8px 16px 8px 6px;
}
#main-nav a span { float: none; }
#main-nav a:hover { background-position: 0% -29px; }
#main-nav a:hover span {
background-position: 100% -29px;
color: #cc6666;
}
#main-nav li.on a { background-position: 0% -29px; }
#main-nav li.on a span {
background-position: 100% -29px;
color: #c66;
}
#main-nav ul ul {
background: url(bg-menu2.png) repeat-x bottom left;
display: none;
height: 26px;
left: 9px;
padding-left: 8px;
padding-top: 10px;
position: absolute;
top: 37px;
width: 808px;
}
#main-nav ul ul a {
background: none;
color: #365b77;
height: 25px;
margin-right: 20px;
padding: 0;
width: auto;
}
#main-nav li.on ul { display: block; }
#main-nav li.off:hover ul,
#main-nav li.over ul {
display: block;
z-index: 6000;
}
#main-nav ul ul a:hover,
#main-nav ul ul li.active a{
background: url(images/menu-arrow.png) no-repeat bottom;
color: #cc3333;
}
/************************************************
* Main Body Wrapper *
************************************************/
#main-body {
/*background: url(images/mainbg.png) no-repeat; */
background: url(images/gridbg.gif);
float: left;
}
/************************************************
* Left sidebar *
************************************************/
#sidebar {
float: left;
padding-left: 0px;
width: 280px;
}
/************************************************
* Content *
************************************************/
#content {
float: right;
padding-left: 20px;
padding-right: 20px;
width: 520px;
}
#content ul, ol {
margin-bottom: 18px;
margin-left: 2em;
list-style-type: square;
}
/************************************************
* Supplements *
************************************************/
#supplement {
line-height: 100px;
}
#supplement #breadcrumb {
}
#supplement #breadcrumb * {
}
/************************************************
* Content Icon-field *
************************************************/
#icons {
background-color: #FF0000;
}
#icons img {
}
#supplement p {
}