...

View Full Version : border-collapse + different border (IE)



Krokador
05-25-2007, 08:14 PM
Alright, the title may not explain it all neatly. It's not the most important thing either, but I was trying to design a table (yea, tabular data, yknow) for a client who wanted it to absolutely fit 1 page, but also be divided into 4 different tables. I decided to make a compromise and add a double border to some rows so we can clearly see the divisions.

As usual, looks great in firefox , IE doesnt change the border-type however (probably due to the border-collapse: collapse;).

As I mentionned, due to the speed at which I must be done with this, this'll eb more like general knowledge than anything. Here's the simple html markup.


<?xml version="1.0" encoding="UTF-8"?>
<!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 runat="server">

<style type="text/css">
table.small td
{
font-size: 12px;
font-family: Arial Narrow, Arial, Sans Serif;
border: solid black 1px;
padding: 2px;
vertical-align: top;
}

table.small
{
border-collapse: collapse;
}

ul
{
display: inline;
}
</style>
</head>
<body>
<body>
<table class="small">
<tr>
<td>
<b>Conf&eacute;rence</b>
</td>
<td>
Diff&eacute;rences et chevauchements entre le Dossier Sant&eacute; Qu&eacute;bec, le dossier patient &eacute;lectronique et le dossier m&eacute;dical &eacute;lectronique.
</td>
<td>
<b>Dr Claude Poirier</b>, Ing, M.D., M.Sc.
<b>Dr Mark Dermer</b>, M.D., CCFP, FCFP.
</td>
<td>
<a href=""> PDF </a>
</td>
</tr>
<tr>
<td rowspan="3">
<b>Panel</b>
</td>
<td rowspan="3">
Les suivis syst&eacute;matiques : de quoi parle-t-on ? D&eacute;finitions, approches, contextes et conditions d'utilisation ? Apport aux projets cliniques, &agrave; la gestion des maladies chroniques et &agrave; la mise en oeuvre des r&eacute;seaux int&eacute;gr&eacute;s de services.
</td>
<td>
<b>Dr Jean Rodrigue</b>, M.D.
</td>
<td>
<a href=""> PDF </a>
</td>
</tr>
<tr>
<td>
<b>Dr Marc St-Laurent</b>, M.D.
</td>
<td>
<a href=""> PDF </a>
</td>
</tr>
<tr>
<td>
<b>Mme Louise Cardinal</b>, Inf.
</td>
<td>
<a href=""> PDF </a>
</td>
</tr>
<tr style="border-top: double;">
<td>
<b>Atelier A</b>
</td>
<td>
Optimisation des processus de collaboration &agrave; l'aide des technologies de l'information dans le suivi des client&egrave;les souffrant de maladies chroniques en soins de premi&egrave;re ligne.
</td>
<td>
<b>Mme Solange Boucher</b>, Inf. clinicienne.
<b>Dr Alain Turcotte</b>, M.D.
</td>
<td>
<a href=""> PDF </a>
</td>
</tr>
<!-- rest of the table -->
</table>
</body>
</html>

so which browser's got the normal behavior in this situation? And how could I fix it so it works for IE? Thanks for any answer!

koyama
05-26-2007, 02:19 AM
so which browser's got the normal behavior in this situation? And how could I fix it so it works for IE?
IE6 and IE7 don't support border properties for the table-row elemnent (tr). See browser comparison chart (http://www.webdevout.net/browser-support-css#support-css2propsbasic-border).

In the collapsed border model (contrary to the separate border model), border styles do apply to the tr elements so your technique is correct. It is just an unsupported part of the specification in IE.

Instead, you may have to style the td elements. I don't know if there is an easier solution.

As a side issue, you shouldn't have this:


<?xml version="1.0" encoding="UTF-8"?>

It is causing your page to be rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html) in IE6.

Krokador
05-26-2007, 03:56 AM
haha i thought I had taken that out O.o lol
but thanks for the clarification, I may just set a tr class there and give the borders to the tds inside those tr's... it was also making all the special characters go weirdo in firefox (I think)... that explains a few things ^^

koyama
05-26-2007, 04:05 AM
... it was also making all the special characters go weirdo in firefox (I think)... that explains a few things
The xml declaration does not cause Firefox or IE7 to go into quirks mode. Only IE6 is special at this point.

For more details, check the chart found on this page: Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum