Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    76
    Thanks
    0
    Thanked 0 Times in 0 Posts

    border-collapse + different border (IE)

    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.

    Code:
    <?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!
    Last edited by Krokador; 05-25-2007 at 08:28 PM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Krokador View Post
    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.

    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:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    It is causing your page to be rendered in quirks mode in IE6.

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    76
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ^^

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Krokador View Post
    ... 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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •