Solved

CSS: why is Mozilla bleeding borders with border-collapse in my code?

Posted on 2004-08-02
6
455 Views
Last Modified: 2010-08-05
Hi, here's some code that works great in IE, but not Mozilla.

border collapse seems to cause the problem but I need border-collapse (although it may not be apparent why in this example... but I do need it in IE. In mozilla I don't need it but I can't figure out a way to set border-collapse only for IE except via DHTML which I don't want to use)

Any ideas?


<STYLE TYPE="text/css">
<!--
TABLE.sheet {border-collapse: collapse}
TD.f0 { border-left: solid 2pt black; border-right: solid 2pt black; border-top: solid 2pt black; border-bottom: solid 2pt black; font-family: "Arial"; font-size: 10pt; background-color: #ffff00; vertical-align: top;}
TD.f1 { font-family: "Arial"; font-size: 10pt; vertical-align: bottom;}
TD.f2 { border-left: solid 2pt #3366ff; border-right: solid 2pt #3366ff; border-top: solid 2pt #3366ff; border-bottom: solid 2pt #3366ff; font-family: "Arial"; font-size: 10pt; font-weight: bold; font-style: italic; background-color: #99ccff; vertical-align: top;}

-->
</STYLE>
<TABLE class=sheet>
  <TR class=sheet height=18 style='height:13.5pt'>
    <TH class=row> 1</TH>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
  <TR class=sheet height=18 style='height:13.5pt'>
    <TH class=row> 2</TH>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD class=f0 ROWSPAN=2 COLSPAN=2> Merged Cells</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=f1 align=right> 1</TD>
  <TR class=sheet height=18 style='height:13.5pt'>
    <TH class=row> 3</TH>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
  <TR class=sheet height=19 style='height:14.25pt'>
    <TH class=row> 4</TH>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
  <TR class=sheet height=18 style='height:13.5pt'>
    <TH class=row> 5</TH>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD class=f2 ROWSPAN=2 COLSPAN=2>Merged Cells</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
  <TR class=sheet height=18 style='height:13.5pt'>
    <TH class=row> 6</TH>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
    <TD width=64 style='width:48pt' class=sheet>&nbsp;</TD>
</TABLE>
0
Comment
Question by:ycomp
6 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 250 total points
ID: 11697179
Sure, set it like this:

TABLE.sheet {_border-collapse: collapse}

This would be IE-only
0
 
LVL 14

Assisted Solution

by:dfu23
dfu23 earned 250 total points
ID: 11697184
<!--[if gte ie 5.5000]>
<style type="text/css">
TABLE.sheet {border-collapse: collapse}
</style>
<![endif]-->
0
 

Author Comment

by:ycomp
ID: 11697318
wow guys thanks.. I wish I'd known about these things the other day. Would have saved me much time.
0
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 

Author Comment

by:ycomp
ID: 11697322
Zyloch, what is the logic behind the underscore ?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11697345
http://wellstyled.com/css-underscore-hack.html

I wish I was sure you needed to do it this way though :-)

And watch your table code there...
0
 

Author Comment

by:ycomp
ID: 11697481
thanks sean.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question