[CSS]Werkt WEL in Mozilla, NIET in IE

[Glashelder]

Ik ben bezig met m'n eigen forum in PHP. Dat laatste, is imo niet zo belangerijk. Ik heb een probleem met m'n stylesheet. Net als op GoT wil ik bij het posten de regel boven iedere post waarin staat wie het gepost heeft en wanneer, onderlijnd hebben. Dit wil ik doen via m'n stylesheet.

Het probleem hierbij is dat de lijn (en lettertype trouwens ook) in Mozilla wel goed wordt weergegeven, maar in IE niet

Het gaat om dit stukje CSS:

Cascading Stylesheet:

z   {
    margin-left: 6px;
    color: black;
    font-family: "verdana";
    font-size: 10pt;
    font-style: normal;
    border-style: solid;
    border-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
}

Logischerwijs staat er natuurlijk voor de regel in de PHP code een <z> Deze wordt ook afgesloten met </z>.

De code komt probleemloos door de W3C CSS Validator op http://jigsaw.w3.org/css-validator/.

Wat doe ik fout (of wat doet IE fout ) ?

[crisp]

In HTML noch in XHTML bestaat er een <z> tag voor zover ik weet. Je zou kunnen overwegen er een class van te maken, of als het om 1 element gaat die een id="z" te geven, en er in je css dan #z van te maken...

[Verwijderd]

Met een span, div of pre werken met class ="naam" , ie herkent die z niet blijkbaar.

eerst ff refreshen in het vervolg.

[ Voor 25% gewijzigd door Verwijderd op 17-09-2003 21:47 ]

[Glashelder]

Thx, weer wat geleerd. Dit wist ik helemaal niet. Ik dacht dat je alle letters kon gebruiken. Heb er maar i.top van gemaakt

mijn welgemeende excuses voor het 'effe snel antwoord halen topic', Hoewel ik het echt niet wist, met name omdat ie door die WC3 Validator kwam

[ Voor 37% gewijzigd door Glashelder op 17-09-2003 21:56 ]

[Blauw]

dual-zip schreef op 17 september 2003 @ 21:53:
Thx, weer wat geleerd. Dit wist ik helemaal niet. Ik dacht dat je alle letters kon gebruiken. Heb er maar i.top van gemaakt

In principe kan je ook alle letters gebruiken, je moet er alleen een . of een # voor zetten. Dan kan ik best een class maken die #noline heet. Om maar een voorbeeldje te noemen. Het gaat om de manier waarop je hem aanroept, die klopte bij jou niet

[wicher|IA]

dual-zip schreef op 17 September 2003 @ 21:53:
Thx, weer wat geleerd. Dit wist ik helemaal niet. Ik dacht dat je alle letters kon gebruiken. Heb er maar i.top van gemaakt

i.top lijkt me ook niet helemaal fantastisch.
De z-tag bestond helemáál niet, maar de i-tag is men ook aan het afschaffen. (Wordt 'vervangen' door em.)

Daarbij is i normaal cursief, en nu juist niet.

Als je het toch netjes en logisch wil doen zou ik er toch maar div.top oid van maken.
(Hoewel dit eigenlijk totaal niet belangrijk is.)

En, waarom doe je dit:

Cascading Stylesheet:

border-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;

Terwijl dit exact hetzelfde is, maar dan 2 x korter:

Cascading Stylesheet:

border-width: 0px;
border-bottom-width: 1px;

[ Voor 8% gewijzigd door wicher|IA op 18-09-2003 00:42 ]

[tomato]

wicher schreef op 18 September 2003 @ 00:39:
de i-tag is men ook aan het afschaffen. (Wordt 'vervangen' door em.)

Fout!

<em> gebruik je wanneer je iets wilt benadrukken, <i> wanneer iets schuin hoort te staan volgens taalconventies. En ze zullen waarschijnlijk beiden blijven bestaan, ook in XHTML 2.

Net als bijvoorbeeld <b>, <sub> en <sup> lijkt het bij <i> alsof het element geen semantische waarde heeft (geen betekenis toevoegt aan het document), maar alleen iets zegt over presentatie. Maar dat is niet helemaal waar.

Er zijn typografische conventies met betrekking tot vette en schuine tekst. Schuin schrijf je bijvoorbeeld woorden in een andere taal, dier- en plantensoorten, namen van schepen, technische termen, ..., en woorden die je wilt benadrukken. Nou is er voor dat laatste voorbeeld een heel mooie tag <em>, dus daar gebruik je geen <i> meer voor. Voor de rest wel.

Op dezelfde manier gebruik je voor een sterke benadrukking <strong>, maar voor bijvoorbeeld een wiskundige vector gebruik je vaak een vetgedrukte letter, dat doe je dus met <b>.

(De voorbeelde die ik hier noem gelden in de Engelse taal, misschien dat enkele conventies in het Nederlands anders zijn, dat moet na te zoeken zijn.)

Natuurlijk kun je al deze conventies gaan omzetten in aparte regels en het op deze manier oplossen:

code:

<p>
Toen ik voor de vijfde keer de richting van de vector
<span class="vector">v</span> ging uitrekenen,
kreeg ik een <span class="leenword">deja vu</span>.
</p>

Maar dat is op de eerste plaats een hel van een werk en op de tweede plaats verlies je naar mijn mening alleen maar betekenis. Merk overigens op dat het wrappen die 'deja vu' in een <span xml:lang="fr"> ook een erg slechte keuze is, aangezien de tekst gewoon Nederlands is.

Voor de duidelijkheid, dit stukje tekst maak je dus op deze manier op in HTML:

code:

<p>
Toen ik voor de vijfde keer de richting van de vector
<b>v</b> uit ging rekenen, kreeg ik een <i>deja vu</i>.
</p>

[ Voor 8% gewijzigd door tomato op 18-09-2003 11:00 . Reden: layout gespaard ]

[IschaGast]

Volgens mij kan je ook zeggen

Cascading Stylesheet:

border: 0;
border-bottom: 1px solid #000;

Is net ff iets korter allemaal.

[ Voor 9% gewijzigd door IschaGast op 18-09-2003 11:05 . Reden: code tag toegevoegd ]

[Johnny]

font-family: "verdana"; moet toch ook zonder aanhalingstekens?

Verder is het de bedoeling <span> te gebruiken voor tags met een eigen opmaak (daarvoor is hij ook bedoeld). <i> maakt tekst cursief, <span> doet niets. <div> is voor block achtige elementen, <span> voor in een tekst.

[tomato]

Inderdaad is hier uiteraard het gebruik van <i> niet op zijn plaats

[Glashelder]

Ik begin net met CSS, vandaar nogal wat fouten. Ben al trotst dat ie door de W3C CSS Validator komt

[Grijze Vos]

[b][message=18773881,noline]wicher schreef op 18 september 2003 @
En, waarom doe je dit:

Cascading Stylesheet:

border-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;

Terwijl dit exact hetzelfde is, maar dan 2 x korter:

Cascading Stylesheet:

border-width: 0px;
border-bottom-width: 1px;

code:

border-width: 0px 0px 1px 0px;

is nog korter