2012
02-28

table strange border color in firefox

Problem:

You can find your self wondering why if you put border to table let say color #F00 it have different colors at different borwsers.
Funny 🙂
Example:
  1.  
  2. <table border="1" style="border-width:10px;border-color:#F00" >
  3. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  4. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  5. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  6. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  7. <tr><td>some data</td><td>some data</td><td>some data</td></tr>
  8. </table>
  9.  

some datasome datasome data
some datasome datasome data
some datasome datasome data
some datasome datasome data
some datasome datasome data

You can check that post in different browsers and see for your self.

Solution Beta:

One solution to correct that is to add border-style:solid; and your color for table and every tr and td.
  1.  
  2. <table border="1" style="border-style:solid; border-width:10px;border-color:#F00" >
  3. <tr style="border-style:solid; border-width:10px;border-color:#F00" ><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
  4. <tr style="border-style:solid; border-width:10px;border-color:#F00" ><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
  5. <tr style="border-style:solid; border-width:10px;border-color:#F00" ><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
  6. <tr style="border-style:solid; border-width:10px;border-color:#F00" ><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
  7. <tr style="border-style:solid; border-width:10px;border-color:#F00"><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td><td style="border-style:solid; border-width:10px;border-color:#F00" >some data</td></tr>
  8. </table>
  9.  

some datasome datasome data
some datasome datasome data
some datasome datasome data
some datasome datasome data
some datasome datasome data

But it is quit hard work.

Solution:

add that few lines to begin of css file included as first css on every page:
  1.  
  2. table, tbody, tr, th, td{
  3. border-style: solid;
  4. border-width: 0px;
  5. }
  6.  
  7. tbody, tr, th, td{
  8. border-color: inherit;
  9. }
  10.  
No Coments jet.

Leave a Reply

  ( Ctrl+Enter )