[CSS] tabelcell verschilt in hoogte IE/FF - Softwareontwikkeling

vrijdag 25 augustus 2006 15:57

Acties:

Topicstarter

Ik heb hier een tabel (geen zorgen, het is voor tabular data

), maar het lukt me niet om de layout in Firefox en Internet Explorer hetzelfde te krijgen. In IE maakt hij de cellen net iets hoger, en ik snap niet hoe dat komt.

Op dit plaatje zie je wat er verkeerd gaat:
Afbeeldingslocatie: http://tweakers.net/ext/f/9acfff2e9784cf0c6975eb76b1fd4457/full.png

Afbeeldingslocatie: http://tweakers.net/ext/f/9acfff2e9784cf0c6975eb76b1fd4457/full.png

Je kunt het hier zelf proberen.

De code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Tabelprobleem</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>


    <div id="test">
    <table cellspacing="0">
        <tr>
            <th>
                Kopje 1
            </th>
            <th>
                Kopje 2
            </th>
        </tr>
        <tr>
            <td>Tekst 1</td>
            <td>Tekst 2</td>
        </tr>
        <tr>
            <td>Tekst 1</td>
            <td>Tekst 2</td>
        </tr>
        <tr>
            <td>Tekst 1</td>
            <td>Tekst 2</td>
        </tr>
        <tr>
            <td>Tekst 1</td>
            <td>Tekst 2</td>
        </tr>
        <tr>
            <td>Tekst 1</td>
            <td>Tekst 2</td>
        </tr>
        <tr>
            <td>Tekst 1</td>
            <td>Tekst 2</td>
        </tr>
    </table>
    </div>

</body>

</html>

Cascading Stylesheet:

#test
    {
        width: 195px;
        margin-bottom: 10px;
        float: left;
    }

#test table
    {
        width: 100%;
        border: 1px solid #000000;
        border-collapse: collapse;
        font-size: 11px;
        color: #000000;

    }

#test  th, #test td
    {
        vertical-align: top;
        text-align: left;
    }

#test th
    {
        font-size: 14px;
        font-weight: bold;
        color: #33555c;
        background-color: teal;
    }

#test td
    {
        border-bottom: 1px solid #000000;
        line-height: 12px;
        height: 40px;
        padding: 3px;
    }

Ik zie vast iets over het hoofd, maar wat? Ik ben nu al een halve dag aan het zoeken naar verschil in padding tussen IE en FF en naar andere rare tabel-perikelen, maar ik kan de oplossing op mijn probleem niet vinden. Wie helpt mij zodat ik met een goed gevoel het weekend in kan?

[ Voor 4% gewijzigd door posttoast op 25-08-2006 16:26 . Reden: Plaatje toegevoegd voor de duidelijkheid ]

omniscale.nl

vrijdag 25 augustus 2006 19:34

Acties:

Verwijderd

is maar een ideetje hoor; probeer eens bovenin het volgende toe te voegen:

#test table, #test table tr, #test table tr td
{
margin: 0px;
padding: 0px;
}

vrijdag 25 augustus 2006 19:49

Acties:

posttoast

Topicstarter

Dat werkt, heel erg bedankt

Zie dit voorbeeld.

Maar: nu heb ik geen padding meer in mijn tabel, en dat is niet volgens het ontwerp dat ik aan het bouwen ben. Is er een manier om toch die padding weer te krijgen? En kun je het "waarom" van deze oplossing aan me uitleggen?

[ Voor 14% gewijzigd door posttoast op 25-08-2006 19:49 ]

omniscale.nl

vrijdag 25 augustus 2006 19:54

Acties:

Arjan90

Cascading Stylesheet:

* {
  margin: 0px;
  padding: 0px;
}

Hiermee stel je ALLE waardes van Margin en Padding op 0 pixels.

En om voor te borduren op Vieux' vorige reactie:

Cascading Stylesheet:

1
2
3

#test table, #test table tr, #test table tr td {
  padding: 5px;
}

Probeer dat eens?

"Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid."

vrijdag 25 augustus 2006 19:57

Acties:

Verwijderd

Sp!tF!re schreef op vrijdag 25 augustus 2006 @ 19:54:
Cascading Stylesheet:
1
2
3
4
* {
  margin: 0px;
  padding: 0px;
}
Hiermee stel je ALLE waardes van Margin en Padding op 0 pixels.

Dat heb ik dus nog nooit gebruikt, nooit nodig gehad, en zal dat al helemaal nooit aanraden. Verander alléén wat je écht wilt veranderen, en niet eerst veranderen en daarna voor een paar dingen weer lopen terugveranderen.

vrijdag 25 augustus 2006 20:00

Acties:

posttoast

Topicstarter

Sp!tF!re schreef op vrijdag 25 augustus 2006 @ 19:54:
Cascading Stylesheet:
1
2
3
4
* {
  margin: 0px;
  padding: 0px;
}
Hiermee stel je ALLE waardes van Margin en Padding op 0 pixels.

En om voor te borduren op Vieux' vorige reactie:
Cascading Stylesheet:
1
2
3
#test table, #test table tr, #test table tr td {
  padding: 5px;
}
Probeer dat eens?

Met je tweede oplossing gaat het weer mis. Begrijpelijk, want het is ongeveer hetzelfde als de code waar ik mee begon.

Ik denk dat de conclusie is dat IE de padding van een cel bij de totale hoogte optelt en Firefox niet. Zit er hier een CSS guru die dat kan bevestigen en die misschien een oplossing heeft voor dit probleem?

Overigens is het terugzetten van alle margins en paddings (met *) geen optie, omdat deze tabel onderdeel uitmaakt van een uitgebreide site waar met margins gewerkt wordt. (wat cheatah zegt dus

)

omniscale.nl

vrijdag 25 augustus 2006 22:47

Acties:

MBV

Dat is een bekende bug in IE. kijk maar eens op www.positioniseverything.net en vele andere sites. nette oplossing:

HTML:

<!--[if gte IE 5]>
<style type="text/css>
#test table tr td {
  height: 36px;
}
</style>
<![endif]-->

. Dit kan je instellen voor welke IE-versie, is makkelijk als IE7 het fixt.
Minder netjes: IE5/6 ondersteunt geen min-height, of important.

Cascading Stylesheet:

#test td {
  height: 40px !important;
  height: 36px;
}
#test td {
  height: 36px;
  min-height: 40px;
}

Zou alletwee moeten werken.

edit:
hmm, zo te zien gebruik je IE6 in strict mode. Dat zou normaal het probleem moeten oplossen. Neemt niet weg dat de hacks vaak prima werken

[ Voor 12% gewijzigd door MBV op 25-08-2006 22:48 ]

vrijdag 25 augustus 2006 23:40

Acties:

DerKleinePunkt

Es gibt keine kleinen Punkte!

Weet niet of je er wat aan hebt:

Kijk voor het gemak even naar line-height en hoe je lettertypes definieert. Font-size: 12px; verschilt per browser, terwijl font-size: 12em ; overal gelijk is.

Ein kleiner Punkt in einer grossen Welt

zaterdag 26 augustus 2006 12:55

Acties:

posttoast

Topicstarter

@ MBV: bedankt, je "truc" werkt

. Zie dit. Ik heb dus gebruik gemaakt van de !important. De minder nette oplossing dus, maar dit zorgt wel voor een overzichtelijkere stylesheet vind ik. Ondanks mijn strict doctype is er dus toch nog zo'n oplossing nodig inderdaad

@DerKleinePunkt: hoe bedoel je "kijk even naar line-height"? En wat betreft pixels vs em: pixels zien er toch juist overal hetzelfde uit? Ik had begrepen dat em relatief is (en dat de gebruiker de fonts dus zelf groter kan maken). Zie ook dit artikel. Als ik het mis heb hoor ik het graag

omniscale.nl

zaterdag 26 augustus 2006 15:19

Acties:

DerKleinePunkt

Es gibt keine kleinen Punkte!

posttoast schreef op zaterdag 26 augustus 2006 @ 12:55:
@DerKleinePunkt: hoe bedoel je "kijk even naar line-height"? En wat betreft pixels vs em: pixels zien er toch juist overal hetzelfde uit? Ik had begrepen dat em relatief is (en dat de gebruiker de fonts dus zelf groter kan maken). Zie ook dit artikel. Als ik het mis heb hoor ik het graag

De browsers lijken hier en daar verschillende regelhoogten per fonts te hanteren (of is dit afhankelijk van het OS?). Een paragraaf kan hierdoor in een browser ietsjes groter zijn dan een andere.

Betreffende font-size heb je gelijk, dit moest pixel zijn i.p.v. em. Tip voor mezelf niet met een half gare kop reacties plaatsen

.

Een algemene tip, wanneer em in een alle door de klant gewenste browsers het zelfde resultaat oplevert zou ik deze gebruiken. Want dan kunnen de slechtzienden onder ons de grootte van het lettertype wel wijzigen.

Ein kleiner Punkt in einer grossen Welt

zaterdag 26 augustus 2006 15:47

Acties:

MBV

In firefox kan je het toch altijd wijzigen? Font-size instellen werkt met IE inderdaad nooit, omdat iedereen al in px opgeeft.

@posttoast: ik snap hem ook niet, hij zou het moeten doen. Maareh, het is IE

Nadeel van die CSS hack is dat je weer voor IE7 moet kijken of die toevallig al een bugfix heeft gehad waardoor je truc het verkeerde effect heeft. Conditional comment geeft wat dat betreft een voorspelbaarder resultaat

zaterdag 26 augustus 2006 16:08

Acties:

posttoast

Topicstarter

Ik heb het al getest in IE7, en het probleem is daar hetzelfde. Maar goed, wie weet is het dan in IE8 opgelost (ik heb het idee dat ze de goede kant opgaan bij Microsoft). Dus dan toch maar met die conditional comments inderdaad.

Opera en Firefox kunnen resizen als een font in px is gedefinieerd. IE kan het alleen als het em is. Misschien ook iets voor een volgende versie?

omniscale.nl