[Wylug-help] Mozilla vs IE CSS differences

Fri Dec 15 00:50:56 GMT 2006

Hi Gary,

I think you are falling foul of IE's lack of support for the 
"border-spacing" CSS property, and this is making your tables render 
differently.

http://www.stylegala.com/features/css-reference/border-spacing.htm

Only Gecko (NN6+/Firefox) and Opera support this border-spacing feature.

There are some generic problems with the CSS too I think. You have a 
missing semi-colon on the font line (but I'm not sure whether this would 
have affected things or not). You need a comma between the CSS 
selectors, and the `#dman` bit needs repeating too. i.e. "#dman tr, 
#dman td" rather than just "#dman tr td".  See here for further information:

http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm

An easy fix might be to use the "border-collapse" property instead, then 
set the border thickness manually. You loose that "3D" feel to the 
tables, but it will at least render identically in both browsers. Also, 
ensure you are not specifying a `border="1"` attribute on your HTML 
table tag, since that may conflict with the CSS styling.

Here is a test HTML and CSS file which works for me (change the 
'#CCCCCC', light grey, colour to whatever you like).

test.css:-
---------------8<---------------
table#dman
{
	font-size: 10pt;
	font-family: Arial, "New Century Schoolbook", sans-serif;
	border: 2px solid #CCCCCC;
	text-align: center;
	border-collapse: collapse;
}

#dman th, #dman td
{
	border: 2px solid #CCCCCC;
	padding: 5px;
}
---------------8<---------------

test.html:-
---------------8<---------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
   <title>Table Test</title>
   <link rel="stylesheet" type="text/css" href="test.css" />
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>
  <body>
   <table id="dman">
    <tr><th>one</th><th>two</th></tr>
    <tr><td>three</td><td>four</td></tr>
    <tr><td>five</td><td>six</td></tr>
   </table>
   <br/>
   <table id="unstyled">
    <tr><th>one</th><th>two</th></tr>
    <tr><td>three</td><td>four</td></tr>
    <tr><td>five</td><td>six</td></tr>
   </table>
  </body>
</html>
---------------8<---------------

I hope this helps.

Many thanks,

Dave Hassett

Gary Stainburn wrote:
> Hi folks.
> 
> If you look at http://www1.ringways.co.uk/images/moz_ie_diffs.png you'll see a 
> screen grab of a web page I'm working on. The Mozilla view (left one) is how 
> I want it, but the I.E. view (right one via VNC) is what I'm getting.
> 
> Anyone know what I need to change in the css below to get it to work.
> 
> I've tried adding
> 
> border: 1px;
> 
> and 
> 
> border-spacing: 1px;
> 
> to the 'TD' and 'TH' definitions, but that just loses the internal borders. At 
> least it then looks the same in both browsers. Wrong, but the same.
> 
> Gary
> 
> table#dman
> 	{
> 	font-size: 10pt;
> 	font-family: arial, "sans serif", "new century schoolbook"
> 	border: 1px;
> 	border-spacing: 0px;
> 	padding: 0px;
> 	margin-left: 0px;
> 	margin-right: 0px;
> 	margin-bottom: 10px;
> 	background-color: #fff; 
> 	empty-cells: show;
> }
> 
> #dman tr td
> 	{
> 	text-align: center;
> }
> 
> #dman tr th
> 	{
> 	text-align: center;
> }