/    Sign up×
Community /Pin to ProfileBookmark

Problem with table-collapse in FF and IE

Copy linkTweet thisAlerts:
Sep 20.2006

I’m quite new to CSS, but I was working on CSS for a table and came across a problem: if I set table-collapse to seperate it looks great in FF but terrible in IE, and if I put it to collapse it looks good in IE but terrible in FF. This is the code concerned:

[CODE]
table {
border-width: 3px 3px 3px 3px;
border-spacing: 0px;
border-style: outset;
border-color: #CC0000;
border-collapse: seperate;
background-color: transparent;
}
[/CODE]

Is there a way to make it look alright in both browsers, or is making two seperate pages the only option?

EDIT: And yes, the page does validate.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLASep 20.2006 — What are wanting it to look like? I tested your code in both Fx and IE, and found the results to be identical. Could it be that some other setting, that you've not included here, is interfering with this?

Code I tested:
...<style type="text/css">
table {
border-width: 3px 3px 3px 3px;
border-spacing: 0px;
border-style: outset;
border-color: #CC0000;
border-collapse: seperate;
background-color: transparent;
}
</style>
</head>

<body>
<table width="500">
<tr>
<td>text</td>
<td>text</td>
<td> </td>
<td> </td>
<td>text</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>text</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>text</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>...
Copy linkTweet thisAlerts:
@ralphiekaboauthorSep 20.2006 — Here's the whole coding, then.

CSS:
[CODE]
<style type="text/css">
A:link {color: #FF3300}
A:visited {color: #FF3300}
A:hover {color: #FFFF66}

A.butl:link {color: #990000; text-decoration: none;}
A.butl:visited {color: #990000; text-decoration: none;}
A.butl:hover {color: #FFFFCC; text-decoration: none;}

body
{
background-image:
url('back1.jpg')
}
table {
border-width: 3px 3px 3px 3px;
border-spacing: 0px;
border-style: outset;
border-color: #CC0000;
border-collapse: seperate;
background-color: transparent;
}
table th {
border-width: 2px 2px 2px 2px;
padding: 0px;
border-style: solid;
border-color: #CC0000;
background-color: transparent;
}
table td {
border-width: 2px 2px 2px 2px;
padding: 0px;
border-style: solid;
border-color: #CC0000;
background-color: transparent;
}
table.button {
background-color: #FFCC66;
}
table.buttonover {
background-color: #663300
}
.bar {
background-color: #CC6600;
}
.darkbar {
background-color: #663300;
}
table.intro {
border-width: 1px;
padding: 5px;
border-collapse: collapse;
background-color: #996633;
border-color: black;
}
</style>
[/CODE]

And the table HTML:
[CODE]
<body>
<table>
<tr>
<td width="16%" style="background-image: url('texture.png')">
<p align="center">
<font face="Georgia" size="2">Filler Filler Filler Filler Filler</font></td>
<td width="84%" style="background-image: url('texture.png')">
<p align="center" style="margin-top: 0; margin-bottom: 0">
&nbsp;</td>
</tr>
<tr>
<td class=bar width="16%" valign="top">
<div align="center">
<center>
<table class=button onmouseover="this.className='buttonover'" onmouseout="this.className='button'" width="90%">
<tr>
<td width="100%">
<p align="center" style="margin-top: 0; margin-bottom: 0"><b><font face="Georgia">
<a class=butl href="index.htm">Home</a></font></b></td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table class=button onmouseover="this.className='buttonover'" onmouseout="this.className='button'" width="90%">
<tr>
<td width="100%">
<p align="center" style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table class=button width="90%">
<tr>
<td width="100%">
<p style="margin-top: 0; margin-bottom: 0" align="center">&nbsp;</td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table class=button width="90%">
<tr>
<td width="100%">
<p style="margin-top: 0; margin-bottom: 0" align="center">&nbsp;</td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table class=button width="90%">
<tr>
<td width="100%">
<p style="margin-top: 0; margin-bottom: 0" align="center">&nbsp;</td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table class=button width="90%">
<tr>
<td width="100%">
<p style="margin-top: 0; margin-bottom: 0" align="center">&nbsp;</td>
</tr>
</table>
</center>
</div>
<p align="center">&nbsp;</td>
<td width="84%" style="background-color: #663300" valign="top">
<p align="center">&nbsp;</p>
<div align="center">
<center>
<table class=intro width="40%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td>
<p align="center">&nbsp;</td>
</tr>
</table>
</center>
</div>
<p align="center">&nbsp;<p align="center">&nbsp;<p align="center">&nbsp;</td>
</tr>
<tr>
<td class=darkbar width="100%" colspan="2">
<p align="center" style="margin-top: 0; margin-bottom: 0">&nbsp;<center>

<p></p>

</td>
</tr>
</table>
[/CODE]

Sorry it's so big. Spend all the time you like, I can see I would have any number of problems in all that code.
Copy linkTweet thisAlerts:
@KDLASep 20.2006 — You need to change the table setting to:
<i>
</i>table {
border-width: 3px 3px 3px 3px;
border-spacing: 0px;
border-style: outset;
border-color: #CC0000;
border-collapse: collapse;
background-color: transparent;
margin: 0;
}


You have several HTML formatting styles which are conflicting with your CSS.

I suggest you go through, and strip all the styling within the HTML tags, and apply these to your classes, so you can have better control over the appearance of the final product.
Copy linkTweet thisAlerts:
@ralphiekaboauthorSep 20.2006 — Yeah, I'll do that pronto. That CSS seems to work but it looks ugly in FF, the borders are thin and grooved. What amuses me is that when table-collapse is seperate it looks nice in FF, and not, actually, seperate, while in IE it is. Why does it do that?
Copy linkTweet thisAlerts:
@KDLASep 20.2006 — IE and Fx interpret styling differently. There are many things that IE is unable to interpret, due to their being CSS2. (http://www.w3schools.com/css/css_reference.asp)


In this case, it could be due to the DOCTYPE you are using. Some of your settings may not be compliant to the DOCTYPE.

Try validating your HTML and CSS -- that will show you, for sure:

http://validator.w3.org

http://jigsaw.w3.org/css-validator/

Also, you might look at this: http://www.cleancss.com/

This looks for styles that may override each other.

KDLA

KDLA
×

Success!

Help @ralphiekabo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...