Mozilla/Opera Only CSS

[Tommetje]

Even een snel en kort vraagje. Ik weet dat je als je een underscore (_) voor een css property zet, je deze property alleen in IE laat werken. Nu is mijn vraag... Is er ook zoiets voor Non-IE? (Moz/Opera ed.). Bedankt

[ Voor 1% gewijzigd door Tommetje op 19-12-2004 18:46 . Reden: typo ]

[Verwijderd]

in het algemeen is IE moeilijk aan het doen

maak gewoon je css zodat het volgens w3c zou werken, dan werkt het ook wel in moz, opera, ff
als het niet werkt in IE, kan je het oplossen door IE hacks, maar netter is door met een conditional comment een extra IE only stylesheet op te nemen en daar alls recht te zetten:

<!--[if IE]><link rel="stylesheet" href="/IEFix.css" media="screen" /><![endif]-->

dan ben je ook niet allerlei dingen aan het doen die eigenlijk niet mogen

[Tommetje]

Het probleem is dat zodra ik een height-property meegeef aan een bepaald element, IE het element een aantal pixels korter maakt. Dus ik dacht, ik zet voor IE de font-size op het aantal pixels van de hoogte en voor de echte browsers stel ik wel die hoogte in.

Op die manier van jou gaat dat dus niet, volgens mij...

[sjaakaq]

Je hebt iig bepaalde zaken als

moz-lalalawhatever { nog iets;}

[Verwijderd]

Tommetje schreef op zondag 19 december 2004 @ 18:53:
Het probleem is dat zodra ik een height-property meegeef aan een bepaald element, IE het element een aantal pixels korter maakt. Dus ik dacht, ik zet voor IE de font-size op het aantal pixels van de hoogte en voor de echte browsers stel ik wel die hoogte in.

Op die manier van jou gaat dat dus niet, volgens mij...

Dan is het vast een boxmodel probleempje. Zoek maar eens bij google op boxmodel en je vindt deze site

[ Voor 11% gewijzigd door Verwijderd op 19-12-2004 18:58 ]

[Tommetje]

Verwijderd schreef op zondag 19 december 2004 @ 18:57:
[...]


Dan is het vast een boxmodel probleempje. Zoek maar eens bij google op boxmodel en je vindt deze site

Hmmz, ik heb die site bekeken, maar ik kom er toch niet helemaal uit. Het rare is ook dat ik de div die te kort wordt, helemaal geen width meegeef.

Klik hier voor een voorbeeldje en hier voor de css. Het gaat dus fout bij die ronde randjes, bekijk de site maar eens in IE en zie dan het hoekje rechtsboven. (Die staat dus te ver naar links, de div is een paar pixels te kort..)

Hier is de css van de divs die voor de hoekjes zorgen:

Cascading Stylesheet:

div#contentTop
{
    background-image: url(images/left_top.gif);
    background-repeat: no-repeat;
    background-position: top left;
    background-color: #f93;
    height: 11px;
}
div#contentTopRight
{
    background-image: url(images/right_top.gif);
    background-repeat: no-repeat;
    background-position: top right;
    height: 11px;
}

[ Voor 34% gewijzigd door Tommetje op 19-12-2004 19:14 ]

[Koeniepoenie]

Je wilt dus CSS kunnen toepassen op browsers die niet IE heten ()

Je kunt dan gebruik maken van CSS3 selectors.

Cascading Stylesheet:

body > #contentTopRight {
  /* css hier */
}
div[class=contentTopRight] {
  /* css hier */
}

Of iets in deze geest

[Blaise]

Met een scherm van 800:600 heb je ook nog een foutje.

[Tommetje]

KoenieMan schreef op zondag 19 december 2004 @ 19:29:
Je wilt dus CSS kunnen toepassen op browsers die niet IE heten ()

Je kunt dan gebruik maken van CSS3 selectors.
[knip]

Dat heb ik even getest, maar dat werkt ook niet in Firefox 1.0 en Opera 7.5.4..

Blaise schreef op zondag 19 december 2004 @ 19:29:
Met een scherm van 800:600 heb je ook nog een foutje.

Thnx. Ga ik fixen

[Verwijderd]

KoenieMan schreef op zondag 19 december 2004 @ 19:29:
Je wilt dus CSS kunnen toepassen op browsers die niet IE heten ()

Je kunt dan gebruik maken van CSS3 selectors.

Cascading Stylesheet:

body > #contentTopRight {
  /* css hier */
}
div[class=contentTopRight] {
  /* css hier */
}

Of iets in deze geest

da's gewoon css 2(.1) hoor, alleen IE doet er idd niks mee

Tommetje schreef op zondag 19 december 2004 @ 19:11:
[...]

Hmmz, ik heb die site bekeken, maar ik kom er toch niet helemaal uit. Het rare is ook dat ik de div die te kort wordt, helemaal geen width meegeef.

je zet IE dus in quirks mode zo, dus een ander box model

je geeft een xml prefix mee, da's klets, want het is geen xml, je serveert namelijk als html en het zet dus IE in quirks mode

[ Voor 36% gewijzigd door Verwijderd op 19-12-2004 19:44 ]

[Clay]

Tommetje schreef op zondag 19 december 2004 @ 19:35:
[...]

Dat heb ik even getest, maar dat werkt ook niet in Firefox 1.0 en Opera 7.5.4..
[...]

Dan doe je toch echt iets fout de child ( > ) en attribute selectors werken namelijk wel degelijk in die 2 browsers. (en zo'n beetje alle andere behalve IE)

code:

<style type="text/css">

body > #test[id="test"] {
    color:blue;
}

</style>

.. met ...

<body>  
    <div id="test"> hoi </div>
</body>

[ Voor 11% gewijzigd door Clay op 19-12-2004 19:40 ]

[Tommetje]

Clay schreef op zondag 19 december 2004 @ 19:39:
[...]


Dan doe je toch echt iets fout de child ( > ) en attribute selectors werken namelijk wel degelijk in die 2 browsers. (en zo'n beetje alle andere behalve IE)

[...]

Misschien ligt het aan mij, maar als ik

Cascading Stylesheet:

body > #contentTop
{
    height: 11px;
    border: 1px solid #000;
} 

toevoeg aan mijn stylesheet, zie ik in Firefox en Opera toch echt geen randje... (Zie ook nieuwe online versie.)

[ Voor 6% gewijzigd door Tommetje op 19-12-2004 19:45 ]

[Clay]

klopt. de > selector selecteert namelijk alleen de directe child in het opgegeven element. en #contentTop zit niet direct in de body, maar ergens genest in een div.

[ Voor 3% gewijzigd door Clay op 19-12-2004 19:48 ]

[crisp]

haal die spatie voor en achter de > eens weg... (hoewel, whitespace daar volgens mij wel mag)

edit: * crisp moet eerst code kijken - zie Clay dus

[ Voor 57% gewijzigd door crisp op 19-12-2004 19:49 ]

[Superdeboer]

Dat komt omdat #contentTop niet direct een child is van de body; div#main zit er nog tussen. Dit werkt wel:

Cascading Stylesheet:

#main>div#contentTop
{
    height: 11px;
    border: 1px solid #000;
} 

edit:
En spuitelf alweer natuurlijk...

[ Voor 15% gewijzigd door Superdeboer op 19-12-2004 19:53 . Reden: spuit13... 8)7 ]

[Tommetje]

Oké, ik heb nu van body div#main gemaakt, nu werkt het wel. Bedankt!

Blaise schreef op zondag 19 december 2004 @ 19:29:
Met een scherm van 800:600 heb je ook nog een foutje.

Nu zit ik dus nog met dit probleem. Als ik de z-index van de header op 3 en die van het rechtermenu op 2 zet, zou het toch moeten werken? Maar dat is dus niet zo, het rechtermenu valt nog over de header heen. Iemand een ideetje? (Zie ook weer de online versie..)

[Blaise]

Tommetje schreef op zondag 19 december 2004 @ 19:56:
Oké, ik heb nu van body div#main gemaakt, nu werkt het wel. Bedankt!

[...]

Nu zit ik dus nog met dit probleem. Als ik de z-index van de header op 3 en die van het rechtermenu op 2 zet, zou het toch moeten werken? Maar dat is dus niet zo, het rechtermenu valt nog over de header heen. Iemand een ideetje? (Zie ook weer de online versie..)

Geef nog een position:relative aam de header. Z-index mag je alleen doneren aan absolute en relative gepositioneerde elementen.

Je kan ook de achtergrond van layout_r_03.gif doorzichtig doen IPV blauw.

[faabman]

ik gebruik zelf vaak de volgende methode

Cascading Stylesheet:

div{
  height:auto !important;
  min-height:100px;
  height:100px;
}

aangezien i.e. nog niet goed met !important omgaat en opera en mozilla dit wel weten werkt dit perfect om bijvoorbeeld de min-height van een element te zetten

http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules