En mulighed kan være denne her:
- Jeg har taget lidt css child styles med af hensyn til IE 7
... men det er helt utestet i IE 7 da jeg ikke har den - så på
det punkt er det kodet i blinde ... Grunden til at det blev så opstændeligt
skyldes to ting: 1. At IE ikke understøtter border-spacing og 2. At FF koksede
med bredden på tabellen når den fik border-collapse:collapse; (som vi fandt frem
til i den anden tråd) ... Det fik vi så løst, men jeg så ikke at forskellen så
opstod med højden på elementerne IE vs. FF & OP m.v.
Når IE 7 kommer bliver det nemmere og et skud i tågen er at den vil understøtte border-spacing og så vil man kunne slette conditional css delen :)
Her er lige den jeg nåede frem til:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<!--[if IE]>
<style type="text/css">
.maintable {border-collapse: collapse;}
.maintable .tdbanner {height:91px;}
.maintable .tdbannermenu {height:32px;}
tr > .tdbannermenu {height:31px!important;}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css">
<title>Titel</title>
</head>
<body>
<table class="maintable">
<tr>
<td class="tdbanner"></td>
</tr>
<tr>
<td class="tdbannermenu"></td>
</tr>
</table>
</body>
</html>
... Men, som det ses i ovenstående skal IE serveres speciel css fordi den ikke understøtter det med border-spacing ... her er css delen der hører dertil:
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
background-image: url('/images/bodybg.gif');
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maintable {
width: 990px;
padding: 0px;
margin: 0px auto;
border-spacing: 0px;
}
.tdbanner {
width: 988px;
height: 92px;
padding: 0px;
background-color: #a7a7a7;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid black;
}
.tdbannermenu {
width: 988px;
height: 31px;
padding: 0px;
background-color: #b5b5b5;
border-right: 1px solid black;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid black;
}
....
....
....
eller måske samme css fil og noget i denne stil:
(så vi kun rammer IE < 7 ... men test evt. lige 7'eren så du er sikker)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<!--[if lt IE 7]>
<style type="text/css">
.maintable {border-collapse: collapse;}
.maintable .tdbanner {height:91px;}
.maintable .tdbannermenu {height:32px;}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css">
<title>Titel</title>
</head>
<body>
<table class="maintable">
<tr>
<td class="tdbanner"></td>
</tr>
<tr>
<td class="tdbannermenu"></td>
</tr>
</table>
<div style="width:990px;background:red;margin:0px auto;">a</div>
</body>
</html>
... Afhængig af mængden af css til det conditional
css er det nok godt med en ekstern IE <7 css fil ...
- Muligheden er også at tage den med div'sene og integrere tabeller
(det bliver måske også nemmere m.h.t. colspan's og rowspan's ...)
... ser lige om jeg kan komme på en sidste ...
