[//CSS] margin-top afwijking voor i.e.

ik heb de volgende code in o.a. in een div staan: [code:1:feeccd9720]#content-links { margin-top: 67px; }[/code:1:feeccd9720]

nou zit die content onder een fixed top.
en in safari en firefox e.d. rekent hij de margin vanaf de bovenkant van de top.
bij internet explorer doet hij dat vanaf de onderkant van de top.

hoe kan ik mijn css zo aanpassen dat internet explorer die margin-top niet gebruikt?
ik hoop dat iemand het weet.

thx HS-L

gebruik je position: absolute? Dat geeft nog wel eens rare resultaten. Evt. misschien een voorbeeld-paginaatje, ik denk dat ik dan beter e.e.a. kan zien...

IE filter techniek: [code:1:5ca7059ed3] * html body #content-links { margin-top: 0; }[/code:1:5ca7059ed3]

  • html zorgt ervoor dat andere browsers dit negeren, alleen Internet Explorer zet de margin-top op 0;

De vraag is echter waarom dit gebeurt, zoals Tricksel al aangeeft. Kan je de voorbeeldcode ergens op een webpagina zetten? Misschien is filtering in je CSS helemaal niet nodig en kan het vrij simpel worden opgelost.

Of zo doe ik het meestal: [code:1:66181e31b4]#content-links { margin-top:0; } html>body #content-links { margin-top:67px; }[/code:1:66181e31b4]

[quote:eab2b2da1f="GeertDD"]Of zo doe ik het meestal: [code:1:eab2b2da1f]#content-links { margin-top:0; } html>body #content-links { margin-top:67px; }[/code:1:eab2b2da1f][/quote:eab2b2da1f]

Nadeel van deze methode is dat je het filter niet separaat in een @import file kan zetten. Kleine toelichting: ik hou er persoonlijk erg van om een CSS file helemaal op te bouwen zodat het allemaal pico bello werkt in Mozilla, Safari en Opera (Opera heeft en paar vervelende bugs, maar er bestaat geen filter voor Opera). Vervolgens pas ik specifieke filters toe voor verschillende browsers om onvolkomenheden te compenseren en dat doe ik door ze in aparte CSS files te importeren. Dat verbetert de onderhoudbaarheid werkelijk enorm. Een CSS file ziet er dan ook als volgt uit:

[code:1:eab2b2da1f]
– alle styles –

/*Internet Explorer 6 filter */
@import "ie6.css"

/*Internet Explorer 5 Mac filter /
/**//
/
@import "ie5mac.css";
/**/

/* Internet Explorer Win filter /
@media tty {
i{content:"";/
" “/}} @import ‘ie5win.css’; /”;}
}/* */

[/code:1:eab2b2da1f]

In het IE6 filter kan ik via * html 1 declaratie doen. Via een childselector ben ik gedwongen de originele declaratie te herhalen.

Bedenk dat alle aanpassingen in het IE6 filter ook worden meegenomen door IE5, zowel op de Mac als de Windows versie, maar je kan die aanpassen zelf weer herstellen in de specifieke filters.

Het ziet er misschien allemaal een beetje ingewikkeld uit, maar er wordt gebruik gemaakt van bugs in de browsers om specifieke stylesheets te voeden en het werkt erg lekker: een aanpassing voor IE5/Win heeft geen consequenties meer voor je perfect werkende model in Safari of Mozilla.

De site waar ik het over heb staat [url=http://test2.hslmedia.nl]hier[/url].

ik heb de code nog niet aangepast… dat ga ik zo even doen en hem even ergens anders zetten.
dan meld ik mij weer,… ik hoop dat het werkt :slight_smile:

HS-L

Het werkt wel volgens de code die tennapel als eerste zei: zie hier:[url=http://test.hslmedia.nl]site[/url] & [url=http://test.hslmedia.nl/styles/styles.css]CSS[/url] en de originele hier:[url=http://test2.hslmedia.nl]site[/url] & [url=http://test2.hslmedia.nl/styles/styles.css]CSS[/url]

maar in i.e. op de mac pakt hij de aanpassing wel en dat is niet de bedoeling…
ik wil ook hetzelfde voor de rechter kolom doen, maar dat krijg ik niet aan de praat.

misschien dan maar voor i.e. win 6.0 een eigen css maken… :frowning:

[quote:daeac82d8b="HS-L"]Het werkt wel volgens de code die tennapel als eerste zei: zie hier:[url=http://test.hslmedia.nl]site[/url] & [url=http://test.hslmedia.nl/styles/styles.css]CSS[/url] en de originele hier:[url=http://test2.hslmedia.nl]site[/url] & [url=http://test2.hslmedia.nl/styles/styles.css]CSS[/url]

maar in i.e. op de mac pakt hij de aanpassing wel en dat is niet de bedoeling…
ik wil ook hetzelfde voor de rechter kolom doen, maar dat krijg ik niet aan de praat.

misschien dan maar voor i.e. win 6.0 een eigen css maken… :([/quote:daeac82d8b]

Klopt, je moet vervolgens een IE5/Mac filter toepassen om het voor IE5/Mac weer te herstellen, welkom in de wereld van incompatibele browsers.

hoe kan ik dit nu het beste oplossen? een i.e. 5 voor mac filter? of een aparte CSS?

Ik zou voor aparte css-files gaan, HS-L. Gebruik de "IE5 Mac band pass filter" - http://www.stopdesign.com/examples/ie5mac-bpf/ - uit het stukje code van tennapel.

@ tennapel: voor IE-styles gebruik ik “conditional comments” - http://www.quirksmode.org/css/condcom.html - om een apart stylesheet te laden. Misshien kende je die filter al, ik vind het in ieder geval overzichtelijker dan telkens * html voor elke css-declaratie te typen. Nadeel langs de andere kant is dat die filter enkel voor IE windows werkt, en dat je dus nog eens apart een IE mac stylesheet moet laden. In win_ie.css zet je dan filters voor IE 5.0 en 5.5.

Voorbeeld:

[code:1:7f740f47b2]<link rel="stylesheet" type="text/css" href="main.css" />

<!–[if IE]>
<link rel="stylesheet" type="text/css" href="win_ie.css" />
<![endif]–>

<style type="text/css">
///*/
@import "ie5mac.css";
/
/
</style>[/code:1:7f740f47b2]
Nog maar eens een andere manier dus.

[quote:952baeaf46="HS-L"]hoe kan ik dit nu het beste oplossen? een i.e. 5 voor mac filter? of een aparte CSS?[/quote:952baeaf46]

Hoe dacht je een aparte CSS voor IE6 te maken?

[quote:e9008ca108="GeertDD"]@ tennapel: voor IE-styles gebruik ik "conditional comments" - [/quote:e9008ca108]

Het is inderdaad een andere methode. Ik vind er 1 nadeel aan (en dat is meer een gevoelsmatig nadeel overigens): je moet een nieuwe link aanmaken in de header van je document. Als je meer dan 1 stylesheet beschikbaar stelt (alternative styles) dan moet je voor elke nieuwe stijl ook weer een nieuwe link in de header aanmaken.

Persoonlijk geef ik de voorkeer aan het linken van 1 stylsheet waarin ik met de @import rule verschillende stylesheets toevoeg, zodat ik 1 master CSS heb voor iedere stijl en eventueel stylesheets met specifieke code voor een complexe navigatie die in de alternatieven gelijk is kan importeren in verschillende masters.

Dus:

[code:1:e9008ca108]
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" href="groteletters.css" />
</head>
[/code:1:e9008ca108]

en dan de stylesheets:

[code:1:e9008ca108]
default.css

@import "standaard.css";
@import "fontsmall.css";
@import "ie.css";

groteletters.css

@import "standaard.css";
@import "fontsbig.css";
@import "ie.css";
[/code:1:e9008ca108]

Probleem zit een beetje in de plaatsing en afstand van de verschillende onderdelen en de afhankelijkheid van fontgroottes. Doe maar eens een paar keer :apple: en '+' in Firefox en je ziet dat met het vergroten van je fonts de verhoudingen uit elkaar gaan lopen weer.

om het probleem te voorkomen kan je in jouw design ook wat anders doen qua opzet:

[code:1:dcb3545264]
<div id="header">
tekst
</div>

<div id="wrapper">
<div id="content">
tekst
</div>

<div id="sidebar">
tekst
</div>
</div>[/code:1:dcb3545264]

en de CSS:

[code:1:dcb3545264]
#wrapper {
position : relative;
width : 750px;
}

#content {
margin-right : 220px;
}

#sidebar {
position : absolute;
top : 0;
right : 0;
width : 200px;
}
[/code:1:dcb3545264]

#sidebar en #content worden nu op gelijke hoogte uitgelijnd omdat de bovenkant van #wrapper de gezamenlijke bovenkant is geworden; #sidebar is een kind-element van #wrapper geworden en de top is nu gelijk geworden aan de bovenkant van #wrapper. Simpele truc, groot plezier, werkt ook in IE en behoeft dus geen filters o.i.d.

Overigens, als kleine aanvulling: IE 5.0 Win heeft soms wat moeite met margin-right. Ikzelf gebruik om die reden altijd gewoon margin: 0 x 0 0, waarbij x uiteraard je waarde is. Ook bij margin-left, margin-top en margin-bottom is dit uiteraard het geval...

[quote:b02a0d5e6e="tricksel"]Overigens, als kleine aanvulling: IE 5.0 Win heeft soms wat moeite met margin-right. [/quote:b02a0d5e6e]

Thnx; dat wist ik niet. Waarschijnlijk omdat ik altijd de shorthand properties gebruik :slight_smile:

Ik normaal ook, tot ik ging testen op onze testmachine hier; Win 95 met IE 5.0... :-)

aargh,... was heel druk loop er nu mee te klooien. maar zoals je op http://test.hslmedia.nl kunt zien kom ik er niet uit.. hoe zorg ik dat i.e. ook de i.e. css pakt ....

(er staat niks zinnigs in de ie.css maar dat doe ik omdat ik dan het verschil goed kan zien. :))

thx Har

In ie.css moet je schrijven: [code:1:ff4138289c] * html body { background-color : pink; }[/code:1:ff4138289c]

Je ziet het verschil dan snel genoeg :slight_smile:

ok die moet er ook nog bovenop... maar doet die dat dan ook in i.e. mac?

kan ik niet zorgen dat in mijn styles.css gewoon als iemand met een ie win langs komt gelijk naar een normale zonder * html css-code (ie.css) gaat?? dat lijkt me een stuk makkelijker…

in mijn styles.css dit staat:[code:1:1f602c9cea]@import "standaard.css"; @import "ie.css"; [/code:1:1f602c9cea] en in mijn ie..css dit: [code:1:1f602c9cea]* html body { background-color : pink; }[/code:1:1f602c9cea]

hij laadt hem in ie win wel,… maar wordt even roze… en dat is het… daarna gaat hij weer over op normaal.