[CSS] Bekend probleem: IE wel, Mozilla niet.

[Switch]

Ok, ik ben bezig met een layout maken. omdat ik het leuk vidnt en omdat ik me verveel. Maar vooral om CSS te leren, ik heb het nu aardig onder de knie en ben heel wat tutorials afgestruind.

Maar ik/Mozilla/IE ga ergens de fout in. Het gaat om deze site. In IE ziet alles er perfect uit, precies zoals ik wil. Maar in Mozilla mist dat hele witte vlak (#content) gewoon, erg vaag.

Code van #content in css.css:

code:

    #content {
    float:left;
    width:590px;
    padding:10px;
    background-color:#fff;
    border:1px solid #000;
    line-height:17px;
    height:420px;
}

Sorry van de vreselijke rommel die ik ervan gemaakt hebt, maar dit is maar een testje. In de Omage search kon ik niets vinden wat mijn probleem oplosde. Ik zag wel zelfde problemen, maar de oplossingen werkte niet. Ik gebruik btw Mozilla 1.2.1, want 1.3a werkt niet bij mij (als hij wel werkt bij <lezer> kan je dan eventjes zeggen of hi jeht wel doet in 1.3a?).

Dank

[Verwijderd]

> background-color:#fff;
moet dat niet #ffffff zijn?

btw, in Opera doet de pagina het net zo goed als in IE. Scheelt je weer wat checkwerk

[Mafioso]

Ik weet niet of dit het probleem is (niet ff uitgeprobeerd), maar volgensmij klopt er iets niet aan je CSS file :

img { border: 1px solid #000; }
border-bottom: 1px dashed #000;
}

Ook "#eee" vind ik een beetje raar..

Verder zou je het misschien makkelijker kunnen doen door een tabel te gebruiken met 2 collomen

[André]

Misschien moet je position:relative er bij in zetten

[odysseus]

Hier in Mozilla en Konqueror krijg ik gewoon een scherm vol met 'Blashpmy!' en links een menu. Meer zie ik in je source ook niet staan .

[Switch]

Ok. Die #fff veranderen in #ffffff helpt niet, en position:relative ook niet. Bedankt voor jullie tips iig.

Ikzelf vindt het erg raar, want ik zie geen serieuze fouten?

[Verwijderd]

Wat Mafioso zei dat was het probleem.
Haal dit weg:
border-bottom: 1px dashed #000;
}
Of zet het op de goede plaats.
Mozilla struikelt wat sneller over slecht (in de zin van fout) geschreven css. Ik weet er alles van. Heb ook eens uren gezocht naar iets soortgelijks, bleek ik ergens 1 keer een } teveel hebben gebruikt.
Je zou je css door een css checker kunnen halen om dat soort dingen te voorkomen.

[Switch]

Verwijderd schreef op 04 januari 2003 @ 16:07:
Wat Mafioso zei dat was het probleem.
Haal dit weg:
border-bottom: 1px dashed #000;
}
Of zet het op de goede plaats.
Mozilla struikelt wat sneller over slecht (in de zin van fout) geschreven css. Ik weet er alles van. Heb ook eens uren gezocht naar iets soortgelijks, bleek ik ergens 1 keer een } teveel hebben gebruikt.
Je zou je css door een css checker kunnen halen om dat soort dingen te voorkomen.

Dat heb ik dus weggehaald, werkt jammer genoeg ook niet. Ik ga eventjes opzoek naar een CSS Checker

[ Voor 4% gewijzigd door Switch op 04-01-2003 16:09 ]

[André]

Verwijderd schreef op 04 januari 2003 @ 16:07:
Je zou je css door een css checker kunnen halen om dat soort dingen te voorkomen.

Gebruik de w3c css validator. Weet je direct waar het aan ligt.

[Switch]

Ik heb de CSS Validator van W3C gebruikt, maar die herkent (blijkbaar) mijn #content ook niet. klik

[Apache]

idd haal het eens door de w3 validator, voor de rest is de korte notatie voor kleuren perfect, bespaart ook weer eens 24 tot 48 bits afhankelijk van je encoding

Misschien dat je een "text-indent: 10px;" zou kunnen proberen, padding werkt nl enkel in tabel, hoewel ik ernaast zou kunnen zitten

edit:
Vaag, misschien is content een gereserveerd woord, net zoals je in de meeste programmeertalen ook geen int int; kan declareren, probeer eens een andere naamgeving voor content.

[ Voor 26% gewijzigd door Apache op 04-01-2003 16:18 ]

[NH298]

padding werkt prima in div, verder zitten er inderdaad wat fouten in de css

[Switch]

@ Apache
Nee, heb het geprobeerd. Maar anders zou ik het raar vinden, want IE werkt wel gewoon.

[NH298]

bijvoorbeeld die " } " boven #txt die wordt nergens geopend

[ Voor 40% gewijzigd door NH298 op 04-01-2003 16:21 ]

[Switch]

NH298 schreef op 04 January 2003 @ 16:21:
bijvoorbeeld die " } " boven #txt die wordt nergens geopend

Ja, dat was de oplossing! Hij werrekt!! Raar Mozilla

Hmm, ziet er wel raar uit nu, want text gaat over de div heen Laat maar, lag aan line-height. Raar IE

[ Voor 11% gewijzigd door Switch op 04-01-2003 16:25 ]

[NH298]

niet raar mozilla maar klote IE, mozilla is wat strikter

Het valideren van je css helpt echt

[NH298]

die tekst over je div komt dooor je height die je opgegeven hebt

[Verwijderd]

je css is een redelijke puinhoop kink naar het voorbeeld van Mafioso en zo zijn er nog wel meer dingen die rammelen

HTML:

margin:5; /* 5 wat? koeien? auto's, stenen..... */
padding:5;

en....

border:1px solid #000;
border-right:0px; /*??? */

die laatste kan je in een shorthand rule combineren.

HTML:

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

[crisp]

Hier de css zoals ik het zou doen:

HTML:

body {
    background-color: #eeeeee;
    margin: 5px;
    padding: 5px;
    height: 100%;
    font-size: 10px;
    font-family: verdana;
    text-decoration: none;
}
a, a:link, a:visited {
    color: #ff9900;
    font-weight:bold;
    text-decoration:none;
}
a:active, a:hover {
    color: #99cc33;
}
img {
    border: 1px solid #000000;
}
#content {
    float: left;
    width: 590px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    line-height: 17px;
    height: 420px;
    overflow: hidden;
    -moz-box-sizing: border-box;
}
#menu {
    float: left;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 250px;
    padding: 10px;
    line-height: 15px;
    background-color: #cccc99;
    border: 1px solid #000000;
    border-right-width: 0px;
    -moz-box-sizing: border-box;
}

kijk en vergelijk

[NH298]

kleuren mogen gewoon zo geschreven worden #000

in principe mag bijvoorbeeld #RR88CC ook geschreven worden als #R8C

en volgens mij validate die css vanm crisp ook niet

[Switch]

Bedankt. Ik heb m'n CSS wat opgeschoond

_{dus niet; die css van crisp voldeed niet echt. De div's verdwenen.}

[ Voor 51% gewijzigd door Switch op 04-01-2003 16:35 ]

[crisp]

NH298 schreef op 04 januari 2003 @ 16:33:
kleuren mogen gewoon zo geschreven worden #000

in principe mag bijvoorbeeld #RR88CC ook geschreven worden als #R8C

en volgens mij validate die css vanm crisp ook niet

Op -moz-box-sizing: border-box; na valideert hij prima; ik heb dit erin gezet omdat anders je divjes in Mozilla anders qua maat worden weergegeven (verschil in boxmodels tussen IE en Mozilla).
Verder doet deze css het prima bij mij onder Moz1.3...

[NH298]

crisp schreef op 04 January 2003 @ 16:50:
[...]

Op -moz-box-sizing: border-box; na valideert hij prima; ik heb dit erin gezet omdat anders je divjes in Mozilla anders qua maat worden weergegeven (verschil in boxmodels tussen IE en Mozilla).
Verder doet deze css het prima bij mij onder Moz1.3...

Okidoki voor rest moet die inderdaad prima werken

[Verwijderd]

Het valideren van css is naar mijn mening een triviale bedoening, omdat (voor zover ik het gelezen heb) in de css specs staat dat browsers onbekende (voor die browser dan) css eigenschappen of waarden gewoon moet negeren.

Daar was al eens een discussie over geweest hier. Naar aanleiding daarvan heb ik ook maar eens gekeken of het belangrijk is of je css valideert, naar mijn mening niet dus. Het is wel belangrijk dat je de {,} en ; overal goed neerzet en op de goede plaats en zo. Maar dat staat ook vast en zeker in de specs.

[Mafioso]

Verwijderd schreef op 04 januari 2003 @ 16:58:
Het valideren van css is naar mijn mening een triviale bedoening, omdat (voor zover ik het gelezen heb) in de css specs staat dat browsers onbekende (voor die browser dan) css eigenschappen of waarden gewoon moet negeren.

Daar was al eens een discussie over geweest hier. Naar aanleiding daarvan heb ik ook maar eens gekeken of het belangrijk is of je css valideert, naar mijn mening niet dus. Het is wel belangrijk dat je de {,} en ; overal goed neerzet en op de goede plaats en zo. Maar dat staat ook vast en zeker in de specs.

Het klopt dat de ene browser niet precies het zelfde met css code omgaat als een andere browser. Ook zijn er wat dingen die volgens de W3C niet bestaan, maar toch wel werken onder IE (*zelfde geldt natuurlijk ook voor HTML).

Maar door te valideren kom je er wel achter er zoals nu bv het geval was, dat er dingen zijn die voor geen meter kloppen , zoals dat stukje wat ik al eerder postte, en het weglaten van een eenheid zoals Shadow3333 opmerkte.