Dit is mijn website in Firefox op de Mac:http://img511.imageshack.us/img511/6113/macfirefoxym9.pngEn dit is 'm in MS Explorer onder Windhoos:http://img119.imageshack.us/img119/4154/winexplorerwb1.png
Dit is de code van de linker navigatie (incl. mijn eigen commentaar om het geheel een beetje te snappen):
#leftnav /*NAVIGATIE-DIV LINKERKANT*/{float: left;width: 150px;margin-left: 0;padding: 0;font: 16px LucidaGrande, Lucida, Arial, sans-serif;text-decoration: none;color: #003366;text-align: left;padding-top: 10px;}/*OVER DE NAVIGATIE TEKST LINKS, OPMAAK, ACHTERGRONDPLAATJES VOOR DE 'KNOPPEN':*/#leftnav ul{ /*HEEFT IETS MET DE LINKS TE MAKEN*/list-style: none;margin: 0;padding: 0;}#leftnav li { /*HEEFT IETS MET DE LINKS TE MAKEN*/}#leftnav a { width: 150px;height: 30px;display: block; /*LAAT ALLES BLIJKBAAR NETJES OP EEN RIJTJE ONDER ELKAAR STAAN*/font: 14px LucidaGrande, Lucida, Arial, sans-serif;font-weight: bold; line-height: 32px;text-decoration: none;color: #003366;text-indent: 20px; /*INSPRINGEN VAN DE NAV. TEKST*/padding-top: 12px;}html > body #leftnav a { /*REGELAFSTAND IN NAVIGATIE KADER*/height: 20px;}#leftnav a:hover {text-decoration: none; color: #000000;}#leftnav a:active {}#leftnav #current {text-decoration: none;color: #ffffff;}#leftnav .currentAncestor {}
font: 16px LucidaGrande, Lucida, Arial, sans-serif;
text-decoration: none;color: #003366;text-align: left;padding-top: 10px;}
/*OVER DE NAVIGATIE TEKST LINKS, OPMAAK, ACHTERGRONDPLAATJES VOOR DE 'KNOPPEN':*/
#leftnav ul{ /*HEEFT IETS MET DE LINKS TE MAKEN*/list-style: none;margin: 0;padding: 0;}
#leftnav li { /*HEEFT IETS MET DE LINKS TE MAKEN*/}
#leftnav a { width: 150px;height: 30px;
display: block; /*LAAT ALLES BLIJKBAAR NETJES OP EEN RIJTJE ONDER ELKAAR STAAN*/font: 14px LucidaGrande, Lucida, Arial, sans-serif;font-weight: bold; line-height: 32px;text-decoration: none;color: #003366;text-indent: 20px; /*INSPRINGEN VAN DE NAV. TEKST*/padding-top: 12px;
}
html > body #leftnav a { /*REGELAFSTAND IN NAVIGATIE KADER*/height: 20px;}
#leftnav a:hover {text-decoration: none; color: #000000;
#leftnav a:active {}
#leftnav #current {text-decoration: none;color: #ffffff;}
#leftnav .currentAncestor {
Hoe krijg ik de interlinie gelijk in alle browsers?
grtz, MM
(Bewerkt door MacMiep om 20:09, 5-03-2007)
In IE rekent hij de padding aan de buitenkant van het "blokje", in andere browsersrekent hij het aan de binnenkant. Dus als je zegt 'hoogte 30, padding-top 12' dan wordtie in IE in totaal 30 + 12 = 42 en in andere browsers gewoon 30...Haal 1 van beide weg dan zal het al een stuk beter lijken!
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
hier staat hoe je het het beste kan werken hiermee. Komt er op neer dat je hoogte en breedte in IE voor het gehele boxmodel zijn en in FF alleen voor je content. Bij FF moet je dus paddings en marges aftrekken.
Dus in plaats van [div]tekst[/div] doe je [div][div]tekst[/div][/div] en danzet je de paddings op de buitenste en de hoogte/breedte op de binnenstedan weet je zeker dat het goed gaat in elke browser.
Alternatief is om in je css bestand 'hacks' te gebruiken zodat de afmetingin IE anders uitpakt dan in andere browsers.
Het gaat erom dat als je dingen 2 keer in je css zet dat de onderste altijd toegepast zal worden. Daarbij is et zo dat alleen IE6 een _ kan lezen, andere brow-sers negeren het volkomen.
#id hier{width:200px;_width:220px;padding:10px;}
De beste oplossing, en een mooie oplossing door de boys van Microsoft, is het gebruik maken van conditional comments. Dit werkt ook veel beter omdat je precies per Windows IE versie kunt aangeven welke 'ander' stylesheet 'erbij' gelinked moet worden in je HTML. Hier nog meer voorbeelden. Zowel de Css en de HTML valideren dan wel.
Wij gebruiken het standaard bij het bouwen van een website. Want ook als Windows Internet Explorer 7 er eindelijk na 6 (of langer) jaren, de Css en W3C specs. en webstandaarden zijn opgekrikt maar echt goed doet IE7 het nog steeds niet, net als IE6.
Wij bouwen (qua css en layout) de website voor standaard compliant browsers: Firefox, Opera en Safari en bekijken dan de onvolkomenheden na op Windows Internet Explorer 6 en 7. Dat scheelt een hoop tijd. Met deze conditional comments is het alleen een kwestie van een paar waardes veranderen en het werkt in alle browsers zoals het hoort.
Gewoon underscore hacks in 1 css bestand, dat lijkt mij het makkelijkste. Enige minpunt is dat browsers zo wel alles dubbel laden... Maar als het maar een paar kbtjes is is dat goed te doen.
Underscore hack gebruikt. Ziet er een stuk beter uit. Dank!
padding-top: 10px;_padding-top: 0px;
_padding-top: 0px;
Maar nu weet ik weer waarom MS Exploder een waardeloze browser is...
(Bewerkt door MacMiep om 11:19, 7-03-2007)
Deze methode werkt perfect, omdat je precies kan aangeven welke versie IE je wilt aansturen. Hier wordt geen gebruik gemaak van browser sniffing technologie wat op Javascript leunt bv en buggy kan worden na een nieuwe versie browser bv, maar een duidelijke manier, die gegarandeerd werkt ... ook in toekomstige versies van IE.
Bovendien valideren de HTML en Css op deze manier wel. Met zo'n underscore hack valideerd de Css niet. Webdesigners (net als ik) worden elke nog steeds gek van die Microsoft Internet Explorer browser die gewoon niet helemaal zich aan de regels houdt. En dat anno 2007 met IE 7! Deze methode werkt perfect en is forward compatible met toekomstige websites en browsers. Een underscore IE6 only hack is een snelle dirty-monkey-trick.
Nou, wat is MS Winddoos en bijbehorende software anders dan?
een dirty-money-trick!
(Bewerkt door MacMiep om 11:22, 7-03-2007)
Ik geef daarom nog steeds de voorkeur aan een oplossing die echt alleen van de standaarden gebruik maakt. Zoals ik eerder al omschreef, in dit specifieke geval (box model probleem): maak losse elementen aan waarop je de hoogte en padding/margin zet. Dan maak je gebruik van geen enkele uitzondering. Dat lijkt me (qua standaarden gezien) de meest universele oplossing..
Op praktisch niveau, als je dan toch een niet-helemaal standaard oplossing kiest dan vind ik inderdaad die van denn88 de beste!
Het internet is een open medium voor het delen van informatie. Eigenlijk is het jammer dat er zoveel verchillende browsers zijn. Maar we moeten er mee leven, en ergens doet het er ook niet toe. Webdesigners en programmeurs moeten gewoon hun werk goed doen en hun websites testen in verschillende browsers en op platformen. Dat is hun taak!! Met webstandaarden is het echt niet moeilijk om een website goed te maken voor standaard compliant browsers.
Microsoft heeft toen de oorlog tegen Netscape gewonnen met de browser wars: Netscape vs. Internet Explorer. Veel webdesigners rond die tijd waren al bezig met het programmeren (javascript) en het bouwen van website voor Netscape en IE. Die strijd 'leek' toen over te zijn. Daarom zijn veel webdesigners gaan programmeren en bouwen voor IE tijdens de internet explosie. Veel van de websites die al een tijdje draaien zijn voor IE gebouwd, omdat IE een markt aandeel heeft 95%. Daarom kwam ook Safari niet echt uit de bus als zijnde goede gebruikers ervaring van de gemiddelde websurfer.
De browserwars laaien sinds een tijdje weer zachtjes aan maar nu tussen Firefox en IE. Firefox heeft dezelfde render-engine (Gecko) als Netscape!!
Ik ben van mening dat een website goed moed werken in alle soort browsers. Zelf hou ik me aan Windows IE, Apple's Safari, Firefox en probeer ook Opera te ondersteunen. Ergens hoop ik dat het aandeel van Firefox alleen maar groter wordt. Dat is goede competitie voor Microsoft om standaarden te ondersteunen.
Wat ik jammer vindt is dat bijvoorbeeld grote website's dan toch maar weer voor Microsoft kiezen als het gaat om bijvoorbeeld filmpjes laten zien op het web: Windows Media Player only achtige praktijken, .asf en .wmv formaat enzo. Mac gebruikers delven altijd het onderspit op dit soort Microsoft only technologie. Ik vind dat je altijd een alternatief moet bieden.
Het web is van iedereen en moet toegankelijk zijn voor iedereen.
maar zo werkt de realiteit allang niet meer. Nog steeds heeft IE een enorm marktaandeel van ik meen rond de 80%. Het is aantrekke-lijker er voor te zorgen dat je dat ondersteund, klaar uit. Zo worden dit soort dingen wel door marketeers aangeprezen en zo moeten ontwikkelaars aan de gang gaan.
Sterker nog, als ik echt heel eerlijk moet zijn dan vind ik het CSS box model van IE vele malen logischer in elkaar steken dan dat W3C ooit heeft opgesteld.
Maar lack aan open standaarden, het gebrek aan ondersteuning voor een hoop andere dingen, dat ellendige wmv formaat (wat overigens hier altijd goed werkt hoor op mac) en dan vooral nog dat belachelijke Active X waar ze gelukkig ook wel van af stappen spannen de kroon.Daarbij komt nog de slechte ondersteuning van alpha transparancy voor PNG24 bestanden, slechte implementatie van veel css onderdelen waaronder bijvoorbeeld het gemis van de :hover class.
IE is en blijft een ramp maar ook ik ben op school afgeschoten voor mijn project door de keuze te maken png24 te gebruiken en zelf genoegen te nemen met de witte randen in IE en een betere look in FF.
Voor veel onvolkomenheden is zelfs voor de eigenwijze IE iets aan te doen. Wij werken hier liever met het PNG formaat als we sommige dingen niet kunnen oplossen met .gif (men kent de voordelen maar al te goed) en hebben zo al wat technieken gevonden waarmee je ook in IE6 volledig gebruik kan maken an PNG transparatie, zowel als achtergrond in Css als hardcoded in de HTML source.
Ook het :hover element wat in IE6 alleen op de 'a' tag gebruikt kan worden, is op te lossen. Ook de Css bugs vor IE6 en 7 zijn goede oplossingen te vinden en niet gebruik te maken van vieze Css hacks of Javascript browser sniffers / snotneuzen. Voor Microsoft moet je jammer genoeg, maar zoals gewoonlijk met veel dingen op Windows, gewoon meer moeite doen en vooral geduldig zijn.
Het staat er los van dat je je dan maar moet aansluiten, met een gebogen hoofd, bij die slapende kudde dieren die van hun website nog steeds die eenzijdige rotzooi maken. Omdat zij de marktleider zijn. Je kunt nu al beginnen om je aan de standaarden te houden en er als 1 van dé webdesigners die het internet rijk is, er voor zorgen dat het web 'gezonder' wordt. Haha ik wil er geen preek van maken maar: Er zijn meer mensen die deze gedachte delen ...
Je kunt de hoofdmoot: IE met z'n imposante marktaandeel niet ontkennen, maar men kan er wel voor zorgen dat die marktleider niet indut en bepaalt hoe de toekomst er zachtjes aan uit gaat zien qua standaarden en wat men verwacht. Daar zijn de mensen van WASP jaaaaaren mee bezig geweest!!
Haha iemand moet IE (en Microsoft) wakker houden en dat kunnen webdesigners, alternatieve platformen en webbrowers doen als Firefox. Hoop ook dat Safari natuurlijk veel meer gebruikt gaat worden.
(Bewerkt door denn88 om 20:51, 8-03-2007)
Hacks zijn nog steeds een noodzaak, net zoals het ooit was met tabellen-opmaak.Maar 't is beter om dankzij XHTML/CSS steeds minder hacks te hoeven gebruiken(naarmate minder oude browsers nog significant bij je doelgroep in gebruik zijn),dan dat je blijft hangen in pre-CSS technieken en steeds méér hacks nodig hebt...
En over 5 jaar gaan we wel weer zeuren over de problemen (en hacks) vanwegeal die niet correct ondersteunde 3D- en hologram-technieken in CSS4, of zo...
Sniffers hebben nooit mijn voorkeur gehad vanwege hun samenhang met scripts.
Maarreh, 't gaat goed hè Miep ? Gelijk in 't diepe gegooid met die IE-hacks en zo !Je hebt 't in ieder geval goed voor elkaar om de stijl cross-browser te houden Die kleine verschillen qua maten (wellicht door typografisch verschil) zijn niet erg,tenzij je er een sport van maakt om een pixelnauwkeurige website te krijgen.
Op de een of andere manier wilde bij mij het kwartje van tabellen naar div's maar niet vallen. Maar ik raak er steeds meer vertrouwd mee merk ik. De basis heb ik nu wel zo'n beetje door. Behalve die hacks voor Exploder.
En ja, ik wil alles graag lijnend hebben enzo. Echter dat gaat niet lukken. Tussen Safari en Firefox voor de Mac zitten al grote verschillen. En daar erger ik me eigenlijk aan: geef mij maar een strak stukje drukwerk maken. Illustrator is niet voor niets mijn favoriete programma geloof ik...haha..
Maar ik moet wel op Exploder letten. 60 tot 70 % van mijn bezoekers is Windozer... JAWEL! Ik verspreid het woord van den Heer met Explorer hacks!
PS: trouwens: alleen de kleurweergaven al tussen de browsers. Let maar eens op de Google Zoekbox die ik nu op iedere pagina heb gezet. In de ene browser zie geen verschil in achtergronkleur, in de andere wel. Het is een custom kleur, dus geen websafe kleur, dat wel...
(Bewerkt door MacMiep om 23:23, 8-03-2007)
Illustrator, Photoshop etc. werken op 32 bits diepte, derendering engines van browsers 24 bit. Een kleur met dezelfdergb hexidecimale waarde zal in een browser toch lichter ofdonkerder uitvallen... Heel irritant maar weinig aan te doen.
Als je echt hinder hebt van kleurverschillen (omdat je een logooid gebruikt en een <div> gewoon een achtergrond kleur ookmeegeeft) dan kan je het beste gewoon een complete achter-grond maken. De kleur tint zal afwijken maar niet echt meermerkbaar zijn omdat het referentie kader weg is hiermee...
Gast
