[HTMLl/CSS] border-collapse render fout in firefox

[Verwijderd]

Ik heb een tabel met rounded corners, deze wil ik zo simpel mogelijk in CSS en HTML hebben. Hier voor had ik het volgende bedacht, een simpele tabel en dan in de eerste cel van de eerste rij een achtergrond plaatje van een ronde hoek, rest van de tabel achtergrond zwart, en laatste rij laatste cel ook weer een ronde hoek, en hele rij zwart. En dan alle andere rijen een border van 1px in zwart en dit in CSS gedefinieerd. Nu gaat dit bij IE helemaal goed maar in Firefox dus niet, daar schuiven de rijen zonder border 1px naar rechts. Iemand die dit ook al eens heeft gehad en hier een oplossing voor heeft?

Ik heb al gezocht op google, got en firefox bug sites, maar geen oplossingen kunnen vinden.

De tabel in Firefox (zie hier de render fout)


De tabel in Internet Explorer

HTML:

<table  class='linestable' width='600'>
  <tr class='headtable'>
    <td width='100' class='headtable'>Col 1</td>
    <td width='250'>Col 2</td>
    <td width='250'>Col 3</td>
  </tr>
  <tr>
    <td class='TableDark'>text</td>
    <td class='TableLight'>text</td>
    <td class='TableDark'>text</td>
  </tr>
  <tr>
    <td class='TableDark'>text</td>
    <td class='TableLight'>text</td>
    <td class='TableDark'>text</td>
  </tr>
  <tr>
    <td class='TableDark'>text</td>
    <td class='TableLight'>text</td>
    <td class='TableDark'>text</td>
  </tr>
  <tr>
    <td class='TableDark'>text</td>
    <td class='TableLight'>text</td>
    <td class='TableDark'>text</td>
  </tr>
  <tr>  
    <td class='foottable' colspan=3></td>
  </tr>
</table>

Cascading Stylesheet:

.linestable { border-collapse: collapse; } 

.TableLight { background-color: #efefef; padding: 2px; border: 1px solid black;} 
.TableDark { background-color: #d3d3d3; padding: 2px; border: 1px solid black;} 

TD.headtable{  
  background: black url('../images/bla_rgt_top.gif') black 0% 0% no-repeat;
  padding: 2px; 
}

TR.headtable{
  background-color: black; 
  color: #3fbbef;     
  font-weight: bold;
  border: hidden;
}

TD.foottable { 
  background: black url('../images/bla_lt_btm.gif') black 100% 100% no-repeat;  
  border: hidden;
  height: 6px;
}

[skabouter]

Heb je een linkje naar een voorbeeld? (is wat makkelijker om te debuggen) en welke versie van IE / Firefox heb je getest?

[Verwijderd]

Hier is een linkje naar het voorbeeld

Versies:
Firefox 2.0
IE 6.0

[skabouter]

Die ene pixel komt doordat je de border van de header hide, op google is wel het een en ander te vinden over firefox render problemen met "border-collapse: collapse;"

[disjfa]

Een opmaak tip voor je tabellen. Je hebt voor de eerste regel een classe genaamd tablehead. Is hier niet gewoon een html entity <th> voor gemaakt?

En op elke regel zet je een classe neer per <td> Mischien kan je een keer kijken naar het <col> element.

[Verwijderd]

disjfa schreef op woensdag 22 november 2006 @ 10:27:
Een opmaak tip voor je tabellen. Je hebt voor de eerste regel een classe genaamd tablehead. Is hier niet gewoon een html entity <th> voor gemaakt?

Ja dat klopt, en weet ik ook wel, maar dit is een voorbeeld, en het fine tunen zeg maar dat komt wel.

[Cavorka]

Border op 1 zetten voor je TR (in je CSS dan) en zelfde kleur geven als de achtergrond van de header.

Had precies hetzelfde een paar weken geleden met een website die ik opnieuw maakte.

[ Voor 4% gewijzigd door Cavorka op 22-11-2006 17:41 ]

[Verwijderd]

skabouter schreef op woensdag 22 november 2006 @ 10:20:
Die ene pixel komt doordat je de border van de header hide, op google is wel het een en ander te vinden over firefox render problemen met "border-collapse: collapse;"

Is het dan wel een bug of doet ie het dan gewoon fout eigenlijk? Wel vreemd dan dat hij alleen aan de linker kant 1px verspringt en aan de rechter niet.

Cavorka schreef op woensdag 22 november 2006 @ 13:51:
Border op 1 zetten voor je TR (in je CSS dan) en zelfde kleur geven als de achtergrond van de header.

Had precies hetzelfde een paar weken geleden met een website die ik opnieuw maakte.

Dit werkt ook niet, dan krijg ik een rand om mijn ronde hoek.

[Verwijderd]

Hmm even terug opgraven die handel.

Heb ongeveer hetzelfde probleem; enkel dat het bij mij de rechterkant van de table beïnvloedt...






Bij mij zit het wel wat ingewikkelder in elkaar. Ik werk namelijk aan een webapplicatie en wij hebben een zogenaamde "DataBox". Hiermee kan je een miljoen dingen doen en om de boel zo flexibel mogelijk te houden ziet de structuur er iets anders uit :-)

HTML:

<div>
    <ul>
        <li>
            <div>
                <table>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </li>
        <li>
            <div>
                <table>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </li>
    </ul>
</div>

Begin aub niet te neuten over overbodige code enz. Hebben dit meermaals bekeken en het is de enige oplossing... Ik ben allesbehalve onervaren op gebied van CSS en XHTML en weet wat voor een opoffering dit is!

Table collapse uit de styling halen haalde niets uit, dus richt ik me tot jullie.

[ Voor 17% gewijzigd door Verwijderd op 09-07-2007 16:42 ]