[css] ie5 wel goed, ie6 niet!

[Spooksel]

Ik ben bezig met een site die gebruikt maakt van CSS om de kleur/vorm van een aantal tabellen te bepalen. Niks mis met de stylesheets dacht ik aanvangkelijk, maar toen keek mijn pa er op een XPsysteem met IE6 naar en was alles screwed up. Zelf ontwikkel ik op een W98se systeem met IE5.0

Heeft er iemand enig idee waar dit aan ligt? Moet ik een extra tag ergens plaatsen? moet ik de commando's anders geven?

Zie hier de vergelijking, links IE5, rechts IE6.


De stylesheet:

Cascading Stylesheet:

<!-- HTML TAGS --->
A {
    text-decoration: none;
    color: #000000;
}
A:hover {
    text-decoration: overline underline;
}

<!-- MENUBLOKKEN --->
<!-- Tussenruimte --->
.space {
    font-size: 3px;
}

<!-- Gegevens, geel. --->
.gegevens {
    font-family:verdana;
    width: 125px;
    border: 1px SOLID;
    border-color: #FFF200;
}
.gegkleur {
    background-color: #FFF200;
    font-weight: bold;
}
.gegnorm {
    background-color: #FFF2AF;
}

<!-- Mutaties, blauw. --->
.mutaties {
    font-family:verdana;
    width: 125px;
    border: 1px SOLID;
    border-color: #0099CC;
}
.mutkleur {
    background-color: #0099CC;
    font-weight: bold;
}
.mutnorm {
    background-color: #73DCFF;
}

<!-- Lijsten, oranje. --->
.lijsten {
    font-family:verdana;
    width: 125px;
    border: 1px SOLID;
    border-color: #FF9900;
}
.lijstkleur {
    background-color: #FF9900;
    font-weight: bold;
}
.lijstnorm {
    background-color: #FFCB97;
}

Ik zou graag zien dat de pagina op de verschillende IE versies er hetzelfde uit komt te zien, zijn er hier mensen die dit probleem ook gehad hebben/nu meemaken? Iemand die hier zijn ervaring in kan delen? Bij voorbaat dank.

[Thijsmans]

Heb je ook een link naar de htm-versie? M'n glazen bol is nl. stuk, dus ik kan de pagina niet bezoeken

_{gequote van iemand anders, waarschijnlijk whoami}

/edit: zo op het eerste gezicht ziet de css er wel ok uit

[ Voor 17% gewijzigd door Thijsmans op 30-07-2003 13:33 ]

[Spooksel]

Ik zal het online zetten voor je... brb met een edit

[Bosmonster]

<!-- -->


is geen css-comment... daar heb je /* */ voor

[crisp]

Gebruik een font-size in pixels als je wilt dat het altijd even groot is, en gebruik ook geen width voor inline elementen (zoals een span) - gebruik dan een div of een ander blocklevel element.

[Verwijderd]

en gebruik voor lijsten het ul element, daar is ie voor

en die tussenruimte oplossen met margins en geen 3px text.

Je bent goed op weg met css, maar er mag nog wat bijgeschaafd worden. Overal een aparte class voor maken is ook niet het idee van content en layout scheiden. D'r is daar een tijdje terug een topic over geweest, maar die kan ik effe niet vinden, weet iemand die?

[ Voor 74% gewijzigd door Verwijderd op 30-07-2003 13:49 ]

[Spooksel]

<hij is niet meer online>

hier staat ie ff temp. (nee dat plaatje is idd niet geupload)

Maargoed, dan weer even terug naar de basis. Kan iemand mij uitleggen waarom het nou niet goed werkt onder IE6? Ik kan moeilijk iedereen die het straks gaat bekijken gaan forceren om een oudere browser te nemen

edit:
nee ok, niet echt netjes die tussenruimte =P alle tabellen vallen nu binnen een Span die dat als class heeft

[ Voor 76% gewijzigd door Spooksel op 30-07-2003 14:15 ]

[Clay]

[zeur]
En voor de volledigheid, IE5 doet het niet "goed"; IE5 doet wat jij wil dat er gebeurt, maar dat maakt het nog niet goed.
[/zeur]

Een span is een inline element, en mag geen block level (table, div etc.) elementen bevatten. cellspacing en padding op 0 kan overigens ook met css, je source is nu een beetje een mix van "oude" en "nieuwe" html aanpak:

Cascading Stylesheet:

table {
   border-collapse:collapse;
}

table td {
   padding:0px;
}

[ Voor 16% gewijzigd door Clay op 30-07-2003 13:52 ]

[Thijsmans]

Zoals Bosmonster al aangeeft, haal die <!-- --> weg en het werkt

[RM-rf]

het komt over alsof de elementen inline; zijn, spans, breedte en hoogte mag niet gerenderd worden, msie6 doet dit meen ik ook niet in non-quirky-mode; dat verklaart echter niet het negeren van font-family (mogelijk speelt hier de html-notulatie tags die daar niet mogen)

als je wel inline elementen nodig hebt, zouden het inline-block moeten zijn, echter mozilla doet deze niet goed meen ik.

veel van dit soort dingen kun je oplossen door gebruik te maken van een bug die msie6 in quirky-mode laat springen, terwijl het wel officiele xhtml is, dmv van een xml doc-definitie voor de DOCTYPE:

code:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

zorgt ervoor dat msie6 rendert als msie5

verder is het een tip om binnen een font-family altijd een generieke family aan te geven als alternatief:

code:

font-family: verdana, sans-serif;

(maar dat is niet gerelateerd aan jouw probleem)

Clay schreef op 30 July 2003 @ 13:51:
[zeur]
En voor de volledigheid, IE5 doet het niet "goed"; IE5 doet wat jij wil dat er gebeurt, maar dat maakt het nog niet goed.
[/zeur]

how true

[ Voor 15% gewijzigd door RM-rf op 30-07-2003 13:53 ]

[Spooksel]

toch bedankt voor de tip

[Spooksel]

Bosmonster schreef op 30 juli 2003 @ 13:36:

<!-- -->


is geen css-comment... daar heb je /* */ voor

tnx. in ie 6 ziet ie er weer goed uit zo.

Ik ga iig ook alle overige tips/trucks nog toepassen, bedankt voor de hulp allemaal!

[Spooksel]

Toch nog stiekum een vraagje: hoe zorg ik ervoor dat de ruimte tussen de tables 2 pixels kan zijn? een SPAN op een font-size van 2 zetten was niet netjes, dus ja

wat ik nu probeer:

HTML:

[img]"images/leeg.gif"[/img]
<table class="gegevens">
    <tr>
    <td class="gegkleur">Gegevens</td>
    </tr>
    <tr>
    <td class="gegnorm"><a href="zoek_cursist.php">Cursisten</a></td>
    </tr>
    <tr>
    <td class="gegnorm">Cursussen</td>
    </tr>
    <tr>
    <td class="gegnorm">Docenten</td>
    </tr>
    <tr>
    <td class="gegnorm">Locaties</td>
    </tr>
    <tr>
    <td class="gegnorm">Donateurs</td>
    </tr>
</table>
[img]"images/leeg.gif"[/img]
<table class="mutaties">
    <tr>
    <td class="mutkleur">Mutaties</td>
    </tr>
    <tr>
    <td class="mutnorm">Inschrijvingen</td>
    </tr>
    <tr>
    <td class="mutnorm">Cursisten</td>
    </tr>
    <tr>
    <td class="mutnorm">Cursussen</td>
    </tr>
    <tr>
    <td class="mutnorm">Docenten</td>
    </tr>
    <tr>
    <td class="mutnorm">Lokaties</td>
    </tr>
    <tr>
    <td class="mutnorm">Donateurs</td>
    </tr>
    <tr>
    <td class="mutnorm">Lessen</td>
    </tr>
</table>

werkt dus niet... hspace/vspace reageert ie ook niet op!

[Rickets]

Margin

[Spooksel]

HTML:

[img]"images/leeg.gif"[/img]

zo dan?

[Rickets]

Neen
Ik bedoelde margin in de zin van css-property, niet als html-attribuut.
Dus wat je moet doen is een margin-bottom of margin-top toevoegen aan je css-class.
En dan kan je dat vieze transparante plaatje weglaten

Cascading Stylesheet:

.gegevens {
    font-family:verdana;
    width: 125px;
    border: 1px SOLID;
    border-color: #FFF200;
    margin-bottom : 2px;
}

[Bosmonster]

[quote]Spooksel schreef op 30 July 2003 @ 14:28:
Toch nog stiekum een vraagje: hoe zorg ik ervoor dat de ruimte tussen de tables 2 pixels kan zijn? een SPAN op een font-size van 2 zetten was niet netjes, dus ja

Als ik zo naar je table kijk kun je dat ook een stuk handiger met een enkele table-class en definities daarin van TH en TD elementen.. scheelt je al die classes toewijzen aan iedere TD

[ Voor 54% gewijzigd door Bosmonster op 30-07-2003 15:37 ]

[Verwijderd]

lees anders effe de css tut op www.w3schools.com, want dit is allemaal wel heel erg basic hoor.