CSS tabel/border probleem in Firefox - Softwareontwikkeling

zaterdag 21 april 2007 12:55

Acties:

Verwijderd

Topicstarter

Hallo,

Dit probleem heb ik enkele weken geleden al in forums voor webdesign gedaan, maar nog steeds geen oplossing. Dus maar naar de 'professionals'

Ik heb een tabel-opmaak in css gedaan. Vandaag ben ik er weer mee gaan werken, maar ik heb een probleem. Bij firefox zie je een achtergrondafbeelding niet goed; achtergrondafbeelding is pixel naar rechts verschoven.

Als ik geen TR-tag gebruik heb ik het probleem niet. Het ligt dus volgens mij aan een border.

Zie probleem: http://img133.imageshack.us/img133/1514/csstabellendj0.jpg

Cascading Stylesheet:

.artt {
 border-collapse: collapse;
}

.artk {
 background-image: url('http://mijnwebsite.nl/achtergrondafbeelding.jpg');
 color: #FFFFFF;
 font-weight: bold;
 height: 25px;
 text-align: center;
}

.artt td {
 padding: 1px 3px;
}

.artt th {
 font-size: 11px;
 font-weight: bold;
 line-height: 150%;
 padding: 1px 3px;
 text-align: left;
 vertical-align: top;
}

.artt tr.rkop td {
 background: #96C7DE;
 border: 1px solid #003366;
 font-weight: bold;
 text-align: center;
 vertical-align: top;
}

.artt tr.even td {
 background: #BBDFFF;
 border: 1px solid #003366;
 vertical-align: top;
}

.artt tr.onev td {
 background: #D0E1FD;
 border-bottom: 1px solid #003366;
 border-left: 1px solid #003366;
 border-right: 1px solid #003366;
 border-top: 1px solid #003366;
 vertical-align: top;
}

zaterdag 21 april 2007 12:58

Acties:

Sappie

De Parasitaire Capaciteit!

Kun je ook eens de gehele code (incl html) plaatsen of een voorbeeld online zetten, zodat het voor ons makkelijker wordt ermee te klooien

[ Voor 4% gewijzigd door Sappie op 21-04-2007 12:58 ]

Specs | Audioscrobbler

zaterdag 21 april 2007 13:31

Acties:

Verwijderd

Topicstarter

Sappie schreef op zaterdag 21 april 2007 @ 12:58:
Kun je ook eens de gehele code (incl html) plaatsen of een voorbeeld online zetten, zodat het voor ons makkelijker wordt ermee te klooien

Op deze pagina staan een paar tabellen

http://www.astroversum.nl...rschijnselen_benelux.html

zaterdag 21 april 2007 13:34

Acties:

Sappie

De Parasitaire Capaciteit!

Het zou het voor ons een stuk eenvoudiger zijn als je een directe testcase beschikbaar hebt, de tabellen uit de layout plukken zit ik nou niet echt op te wachten

edit:
Sterker nog.. de tabellen in je voorbeeld voldoen niet eens aan al je css zooi en de inspringing ga ik echt niet zelf regelen.

[ Voor 32% gewijzigd door Sappie op 21-04-2007 13:42 ]

Specs | Audioscrobbler

zaterdag 21 april 2007 13:53

Acties:

Verwijderd

Topicstarter

Sappie schreef op zaterdag 21 april 2007 @ 13:34:
Het zou het voor ons een stuk eenvoudiger zijn als je een directe testcase beschikbaar hebt, de tabellen uit de layout plukken zit ik nou niet echt op te wachten

edit:
Sterker nog.. de tabellen in je voorbeeld voldoen niet eens aan al je css zooi en de inspringing ga ik echt niet zelf regelen.

HTML:

<div align="center">
    <table width="100%" class="artt">
        <tr>
            <td colspan="4" class="artk">
            Mercuriusovergangen</td>
        </tr>
        <tr class="rkop">
            <td>Dag</td>
            <td>Maand</td>
            <td>Jaar</td>
            <td>Begin</td>
        </tr>
        <tr class="even">
            <td>9</td>
            <td>Mei</td>
            <td>2016</td>
            <td>13.11 uur</td>
        </tr>
        <tr class="onev">
            <td>11</td>
            <td>November</td>
            <td>2019</td>
            <td>13.35 uur</td>
        </tr>
        </table>
</div>

zaterdag 21 april 2007 13:55

Acties:

marty

om te beginnen vergeet je al een DOCTYPE te definieren. IE zal de boel daardoor in quirksmode renderen en houdt zich daarbij niet aan het w3c boxmodel, wat firefox wel doet. En ik denk dan ook dat daar het probleem zit: firefox telt de padding bij de width op en daardoor wordt de tabel te groot. IE doet dat niet

zaterdag 21 april 2007 14:01

Acties:

Sappie

De Parasitaire Capaciteit!

Bovendien moet je je, denk ik, eens wat verdiepen in het collapsing borders table model (http://www.w3.org/TR/REC-CSS2/tables.html#collapsing-borders), want volgens mij is de huidige functionaliteit (in FF that is) volgens de specs helaas..

[ Voor 3% gewijzigd door Sappie op 21-04-2007 14:02 ]

Specs | Audioscrobbler

zaterdag 21 april 2007 14:04

Acties:

Verwijderd

Topicstarter

marty schreef op zaterdag 21 april 2007 @ 13:55:
om te beginnen vergeet je al een DOCTYPE te definieren. IE zal de boel daardoor in quirksmode renderen en houdt zich daarbij niet aan het w3c boxmodel, wat firefox wel doet. En ik denk dan ook dat daar het probleem zit: firefox telt de padding bij de width op en daardoor wordt de tabel te groot. IE doet dat niet

Ik heb nu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
bovenaan gezet, maar het probleem is er nog steeds

zaterdag 21 april 2007 17:34

Acties:

Verwijderd

marty schreef op zaterdag 21 april 2007 @ 13:55:
om te beginnen vergeet je al een DOCTYPE te definieren. IE zal de boel daardoor in quirksmode renderen en houdt zich daarbij niet aan het w3c boxmodel, wat firefox wel doet.

Heb de pagina niet bekeken maar voor zover ik weet schiet geen enkele browser in standards mode zonder DOCTYPE, ook Firefox niet.

edit:
heb de pagina alsnog even bekeken

Het lijkt erop dat de border-collapse:collapse op de tabel de boosdoener is. Als je daar separate van maakt doet 'ie het wel goed. Een verklaring heb ik nog niet, achtergronden beginnen niet in de content-box maar in de border-box voor zover ik weet.

[ Voor 27% gewijzigd door Verwijderd op 21-04-2007 17:44 ]

zaterdag 21 april 2007 21:25

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zaterdag 21 april 2007 @ 17:34:
[...]

Het lijkt erop dat de border-collapse:collapse op de tabel de boosdoener is. Als je daar separate van maakt doet 'ie het wel goed. Een verklaring heb ik nog niet, achtergronden beginnen niet in de content-box maar in de border-box voor zover ik weet.

border-collapse: separate

zorgt erwel voor dat border kant en achtergrondafbeelding kop gelijk lopen, maar tussen elke rij zit enkele pixels wit, ik wil ze aan elkaar hebben

zaterdag 21 april 2007 22:39

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op zaterdag 21 april 2007 @ 17:34:
[...]
Het lijkt erop dat de border-collapse:collapse op de tabel de boosdoener is. Als je daar separate van maakt doet 'ie het wel goed. Een verklaring heb ik nog niet, achtergronden beginnen niet in de content-box maar in de border-box voor zover ik weet.

quote: http://www.w3.org/TR/CSS21/tables.html#collapsing-borders
CSS 2.1 does not define where the edge of a background on a table element lies.

Punt is dat in het collapsing border model de border wordt bepaald door de helft van de border op het huidige table element en de helft van de border van het aanliggende element. De border behoort dus eigenlijk maar 'half' aan het huidige element toe.

Intentionally left blank

zondag 22 april 2007 13:42

Acties:

Verwijderd

Topicstarter

Dus dit probleem is niet te herstellen

zondag 22 april 2007 17:53

Acties:

marty

Verwijderd schreef op zaterdag 21 april 2007 @ 17:34:
[...]

Heb de pagina niet bekeken maar voor zover ik weet schiet geen enkele browser in standards mode zonder DOCTYPE, ook Firefox niet.

Ik wil ook niet zeggen dat firefox dat doet, ik wilde alleen duidelijk maken dat IE het boxmodel anders interpreteert dan FF en dat dit komt doordat ie quirksmode rendert

maandag 23 april 2007 15:19

Acties:

Verwijderd

Topicstarter

Maar weet iemand een alternatief hoe ik nu zo'n achtergrond kan doen?

zondag 29 april 2007 14:32

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op maandag 23 april 2007 @ 15:19:
Maar weet iemand een alternatief hoe ik nu zo'n achtergrond kan doen?

Echt niemand?

zondag 29 april 2007 14:34

Acties:

BasieP

Verwijderd schreef op zaterdag 21 april 2007 @ 14:04:
[...]

Ik heb nu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
bovenaan gezet, maar het probleem is er nog steeds

das ook geen complete doctype. (al werkt het vaak wel)
deze bedoel je denk ik:

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This message was sent on 100% recyclable electrons.

zondag 29 april 2007 16:31

Acties:

Verwijderd

Topicstarter

BasieP schreef op zondag 29 april 2007 @ 14:34:
[...]

das ook geen complete doctype. (al werkt het vaak wel)
deze bedoel je denk ik:
code:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Werkt helaas niet

zondag 29 april 2007 19:38

Acties:

Onbekend

...

Misschien moet je alleen van de bovenste rij (waar het plaatje in staat) de border op 0 zetten.

Als dat niet lukt, kan je met NiftyCorners ook ronde hoeken maken.

Speel ook Balls Connect en Repeat

maandag 30 april 2007 00:25

Acties:

Verwijderd

ik heb ook dat sommige css scipts niet in firefox werken maar ik kan er ook nix tegen vinden hoor..
dus tja ik heb ook al aan meerderemensen gevraagt... niemand weet het

maandag 30 april 2007 21:04

Acties:

daniëlpunt

monkey's gone to heaven

Verwijderd schreef op zaterdag 21 april 2007 @ 13:53:
[...]
HTML:
1
2
3

Ik heb jou code even aangepast:

HTML:

    <table width="100%" class="artt">
        <caption>Mercuriusovergangen</caption>

        <tr>
            <th>Dag</th>
            <th>Maand</th>
            <th>Jaar</th>
            <th>Begin</th>
        </tr>
        <!-- gegevens -->
        </table>

ik heb je code iets aangepast. Denk niet dat het TS zijn probleem oplost, maar het is iig toch wel neter

dinsdag 1 mei 2007 08:35

Acties:

tec

TEC

super-muffin schreef op maandag 30 april 2007 @ 21:04:
[...]

Ik heb jou code even aangepast:

HTML:

    <table width="100%" class="artt">
        <caption>Mercuriusovergangen</caption>

        <tr>
            <th>Dag</th>
            <th>Maand</th>
            <th>Jaar</th>
            <th>Begin</th>
        </tr>
        <!-- gegevens -->
        </table>

ik heb je code iets aangepast. Denk niet dat het TS zijn probleem oplost, maar het is iig toch wel neter

HTML:

    <table width="100%" class="artt">
        <caption>Mercuriusovergangen</caption>
<thead>
        <tr>
            <th>Dag</th>
            <th>Maand</th>
            <th>Jaar</th>
            <th>Begin</th>
        </tr>
</thead>
<tbody>
        <!-- gegevens -->
</tbody>
        </table>

dinsdag 1 mei 2007 09:33

Acties:

Verwijderd

Topicstarter

super-muffin schreef op maandag 30 april 2007 @ 21:04:
[...]

Ik heb jou code even aangepast:

HTML:

    <table width="100%" class="artt">
        <caption>Mercuriusovergangen</caption>

        <tr>
            <th>Dag</th>
            <th>Maand</th>
            <th>Jaar</th>
            <th>Begin</th>
        </tr>
        <!-- gegevens -->
        </table>

ik heb je code iets aangepast. Denk niet dat het TS zijn probleem oplost, maar het is iig toch wel neter

Hoi,

Jouw opbouw zorgt ervoor dat mijn opmaak niet meer wordt gedaan.

dinsdag 1 mei 2007 14:00

Acties:

marty

je zal uiteraard ook je stylesheet moeten aanpassen omdat er nu andere tags gebruikt worden.

woensdag 9 mei 2007 15:54

Acties:

RudyL

Probeer dit eens in de css:

*{padding: 0; margin: 0;}

body {padding: 0;margin: 0;}

html {hetzelfde}

LOETKE

woensdag 9 mei 2007 16:31

Acties:

Verwijderd

Verwijderd schreef op dinsdag 01 mei 2007 @ 09:33:
[...]

Jouw opbouw zorgt ervoor dat mijn opmaak niet meer wordt gedaan.

Maar wel voor betere, betekenisvollere HTML

woensdag 9 mei 2007 20:53

Acties:

Verwijderd

Topicstarter

RudyL schreef op woensdag 09 mei 2007 @ 15:54:
Probeer dit eens in de css:

*{padding: 0; margin: 0;}

body {padding: 0;margin: 0;}

html {hetzelfde}

Werkt helaas ook niet

donderdag 10 mei 2007 15:33

Acties:

goMY

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>

<style rel="stylesheet" type="text/css" />
<!--
/* LAY-OUT (C) ASTROVERSUM - GEMAAKT DOOR: HUY VU */

body {
 background-color: #59B9FF;
 font-family: Tahoma;
 font-size: 10pt;
}

table, td, th {
 border-collapse: collapse;
 margin: 0px;
 padding: 0px;
}

table {
 border-width: 0px;
 font-family: Tahoma;
 font-size: 10pt;
}

td {
 border-style: none;
 border-width: medium;
}

.art3 {
 background-color: #BBDEFF;
 vertical-align: top;
 width: 530px;
}

.art3 img {
 border: 1px solid #003366;
}

.art {
 font-size: 10pt;
 padding-bottom: 3px;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 3px;
 text-align: justify;
}

.artt {
 border-collapse: collapse;
 width: 100%;
}

.artk {
 background-image: url('http://www.astroversum.nl/bestanden/afbeeldingen/astroversum/achtergrond_kop.005.jpg');
 background-repeat: no-repeat;
 color: #FFFFFF;
 font-weight: bold;
 height: 25px;
 text-align: center;
}

.artt td {
 padding: 1px 3px;
}

.artt th {
 font-size: 11px;
 font-weight: bold;
 line-height: 150%;
 padding: 1px 3px;
 text-align: left;
 vertical-align: top;
}

.artt tr.rkop td {
 background: #96C7DE;
// border: 1px solid #003366;
 font-weight: bold;
 text-align: center;
 vertical-align: top;
}

.artt tr.even td {
 background: #BBDFFF;
// border: 1px solid #003366;
 vertical-align: top;
}

.artt tr.onev td {
 background: #D0E1FD;
// border-bottom: 1px solid #003366;
// border-left: 1px solid #003366;
// border-right: 1px solid #003366;
// border-top: 1px solid #003366;
 vertical-align: top;
}

.artt tr.rand td {
 border: 1px solid #003366;
 vertical-align: top;
}


}
//-->
</style>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<body>
    <table>
    <td class="art3">
        <table width="100%">
            <tr>
                <div align="center">
                    <table width="530" class="artt">
                        <tr>
                            <td colspan="6" class="artk"><p>Zonsverduisteringen</p></td>
                        </tr>
                        <tr class="rkop">
                            <td>Dag</td>
                            <td>Maand</td>
                            <td>Jaar</td>
                            <td>Begin</td>
                            <td>Maximum</td>
                            <td>% afgedekt</td>
                        </tr>
                        <tr class="even">
                            <td>29</td>
                            <td>Maart</td>
                            <td>2006</td>
                            <td>09.47 uur</td>
                            <td>10.40 uur</td>
                            <td>33,1 %</td>
                        </tr>
                        <tr class="onev">
                            <td>1</td>
                            <td>Augustus</td>
                            <td>2008</td>
                            <td>08.37 uur</td>
                            <td>09.26 uur</td>
                            <td>14,5 %</td>
                        </tr>
                    </table>
                </div>
            </tr>
        </table>
    </td>
    </table>
</body>
</html>

Dit werkt wel, alleen dan zonder de borders. (gecommentarieerd in css).
Die borders geven dan ook het probleem. Je zet namelijk een border in de td zelf, vandaar ook die pixel verschil met die achtergrondafbeelding die geen border in de td heeft.

donderdag 10 mei 2007 21:57

Acties:

Verwijderd

Binnen een table een tr, met daarbinnen een div en daarbinnen weer een table? Spannend

vrijdag 11 mei 2007 16:37

Acties:

goMY

Misschien is dit de oplossing

http://agachi.name/weblog...rows-and-css-question.htm

vrijdag 18 mei 2007 17:59

Acties:

Verwijderd

Topicstarter

goMY schreef op vrijdag 11 mei 2007 @ 16:37:
Misschien is dit de oplossing
http://agachi.name/weblog...rows-and-css-question.htm

Mijn hele code opnieuw gebouwd, nee werkt nog steeds niet

zondag 20 mei 2007 18:09

Acties:

goMY

Verwijderd schreef op vrijdag 18 mei 2007 @ 17:59:
[...]

Mijn hele code opnieuw gebouwd, nee werkt nog steeds niet

Ik snap niet precies waarom het dan niet werkt...
Maar ik heb het zelf ook even getest, en dit werkt in elk geval in Internet Explorer 6+, Mozilla 2.0.0.3 en Opera 9.20

[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>AstroVersum - Toekomstige hemelverschijnselen Benelux - De plek waar jij je universele reis begint!</title>
<style>

body {
background-color: #59B9FF;
font-family: Tahoma;
font-size: 10pt;
}

.t {
width: 530px;
}

.t tr.header th.f {
background: url('http://www.astroversum.nl/bestanden/afbeeldingen/astroversum/achtergrond_kop.005.jpg') no-repeat 100% 0%;
color: #FFFFFF;
font-weight: bold;
height: 25px;
text-align: center;
padding:0px;
border-bottom: solid 1px #003366;
}

.t tr.even td {
background: #BBDFFF;
}

/* toegevoegd */
.t tr td.first {
border-left: solid 1px #003366;
}

.t tr.onev td {
background: #D0E1FD;
}

.t td {
border-right: solid 1px #003366;
border-bottom: solid 1px #003366;
padding: 1px 3px;
vertical-align: top;
}

.t tr.rkop td {
background: #96C7DE;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<table cellspacing="0" class="t">
<tr class="header">
<th colspan="6" class="f">Zonsverduisteringen</th>
</tr>
<tr class="rkop">
<td class="first">Dag</td>
<td>Maand</td>
<td>Jaar</td>
<td>Begin</td>
<td>Maximum</td>
<td>% afgedekt</td>
</tr>
<tr class="even">
<td class="first">29</td>
<td>Maart</td>
<td>2006</td>
<td>09.47 uur</td>
<td>10.40 uur</td>
<td>33,1 %</td>
</tr>
<tr class="onev">
<td class="first">1</td>
<td>Augustus</td>
<td>2008</td>
<td>08.37 uur</td>
<td>09.26 uur</td>
<td>14,5 %</td>
</tr>
</table>
</body>
</html>
[/code=html]

[ Voor 7% gewijzigd door goMY op 21-05-2007 15:51 . Reden: Wat dubbele dingen weggegooid :) ]

maandag 21 mei 2007 16:30

Acties:

Verwijderd

Topicstarter

goMY schreef op zondag 20 mei 2007 @ 18:09:
[...]

Ik snap niet precies waarom het dan niet werkt...
Maar ik heb het zelf ook even getest, en dit werkt in elk geval in Internet Explorer 6+, Mozilla 2.0.0.3 en Opera 9.20

[code=html]
//code//
[/code=html]

1) Het werkt $_/-\o_$
2) Ik zal nu code is bestuderen hoe het komt

(voor nieuwe layout)

Tanx:)

[ Voor 68% gewijzigd door Verwijderd op 22-05-2007 15:15 ]