Internet Explorer pixel probleem

[Robdeprop]

Hallo,

Ik ben een website aan het maken, en ik heb een navigatiebalk gemaakt. In Firefox werkt deze perfect, alleen heb ik in internet explorer een probleem. Er zitten een aantal pixels tussen de knoppen en plaatjes.

Ik heb in de CSS overal al padding: 0px; margin: 0px; border: none; gezet, zonder succes...

De link is http://3dsplaza.com/essas

Hoe los ik dit op?

 

[ErikBooy007]

Wil je je post nog eens nalezen en controleren wat er staat? Zoals het er nu staat is je bericht een tikkeltje tegenstrijdig, aangezien je aangeeft dat deze in Internet Explorer perfect werkt, maar je in Internet Explorer een probleem hebt...

 

[Robdeprop]

Wil je je post nog eens nalezen en controleren wat er staat? Zoals het er nu staat is je bericht een tikkeltje tegenstrijdig, aangezien je aangeeft dat deze in Internet Explorer perfect werkt, maar je in Internet Explorer een probleem hebt...

Sorry, heb het nu aangepast. Ik bedoelde dus dat het in Firefox goed werkt, maar in Internet Explorer niet.

Weet jij misschien de oplossing?

 

[ErikBooy007]

Nou, ik weet het zo niet precies, maar als ik in je code kijk, is het een behoorlijke bende. Ik zie <center> tags, heeeeeel veel floats, hover states die je door javascript laat uitvoeren, in plaats van (zoals het hoort) door CSS en nog wel meer dingen.

Bottom line is, door dit probleem nu te gaan verhelpen doe je aan (zoals CSShunter ook al eens heel mooi sprak) symptoombestrijding. Het echt probleem is niet die paar pixels, maar het feit dat je code rommelig, inefficiënt en "on-standaard" is...

 

[Robdeprop]

Nou, ik weet het zo niet precies, maar als ik in je code kijk, is het een behoorlijke bende. Ik zie <center> tags, heeeeeel veel floats, hover states die je door javascript laat uitvoeren, in plaats van (zoals het hoort) door CSS en nog wel meer dingen.

Bottom line is, door dit probleem nu te gaan verhelpen doe je aan (zoals CSShunter ook al eens heel mooi sprak) symptoombestrijding. Het echt probleem is niet die paar pixels, maar het feit dat je code rommelig, inefficiënt en "on-standaard" is...

Hmm... Niet veel positiefs.

Ik moet toegeven, ik ben een stuk beter in server side ipv client side, dus ik wil daarom graag wat vragen over je comment stellen...

1: Wat is er zo erg aan <center>? En wat zou ik in plaats daarvan moeten gebruiken?
2: Hoe moet ik zonder floats divs naast elkaar plaatsen zonder absoluut te positioneren? (met absoluut positioneren kan je geen percentages opgeven)
3: Wat zijn hover states? En wat doe ik er verkeerd mee?

 

[csshunter]

Hi Robdeprop,
Ja, met de eerste keer Internet Explorer zal bedoeld zijn: in alle fatsoenlijke browsers (Firefox, Chrome, Opera en Safari bv.).

In de eerste plaats zou ik de html beginnen met een goed Doctype (zie m'n handtekening hieronder), en ook de andere opmerkingen van de html-validator ter harte nemen.

Als Doctype is overigens de Strict-variant aan te bevelen voor nieuwere sites dan van 1999 (toen de Transitional-variant nodig was om de toen oude sites nog goed te tonen). Maar dan mogen tags als <center> niet meer gebruikt worden: dat kan beter geregeld worden met css.

De css-validator wijst er op, dat "grey" geen kleurnaam is volgens de officiële standaard. Het moet op z'n Amerikaans "gray" zijn, anders pikt Internet Explorer (IE7 in elk geval) het niet op: die blijft een witte achtergrond geven (de rest is tweetalig Engels).

Dan zou ik de horizontale #navbar opbouwen uit een ongeordende lijst:

<ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ul>

Hetzelfde voor het verticale menu in de linkerkolom. Dat geeft een betere html-structuur, en is met css goed op te maken.

Tenslotte zou ik in overweging geven, om de "liquid layout" (alles in % van de breedte) nog even te laten zitten als je niet precies weet wat je doet. Ik denk dat een vaste breedte (van bv. 990px) met een gecentreerde pagina net zo mooi kan zijn. Voor de vervolgbladzijden, als de <div class='content'> gevuld wordt met andere dingen dan een image, voorzie ik anders problemen.

• Voordeel van een vaste breedte is ook, dat je de horizontale menubalk kunt opbouwen uit een strookje images, met een hover-stand die uitsluitend geregeld wordt met css. Dan is alle onmouseover- en onmouseout-javascript en ook het preloaden van de images niet nodig.
• Zie hiervoor bv. deze post in het forum: "CSS hovers i.p.v. javascript rollovers".

Met vriendelijke groet,
CSShunter
_____
PS: o lala, daar had ik een pauzetje genomen terwijl deze beantwoording nog openstond: nu zit er een kruispost van ErikBooy007 tussen.
Gelukkig niet tegenstrijdig (dat verwachtte ik ook niet)!

 

[csshunter]

Nu even naar de 1, 2, 3 van nummertje #5.

Ad 1
Het foute van <center> in de html is, dat het een opmaak-eigenschap is. De laatste 10 jaar is het goed gebruik (of hoort het dat in elk geval te zijn) om de structuur met de inhoud van de pagina (de html) strak te scheiden van de opmaak (de css) en de functionaliteit (javascripts of server-side scripts).
Waarom?

• Dit maakt het mogelijk om uiterst beknopte html te maken (snellere downloads, minder datagebruik, minder kosten, minder CO2, enz.), en om met één stylesheet voor alle pagina's te volstaan. Moet ergens iets in de opmaak veranderen, dan is een kleine ingreep in het ene stylesheet genoeg om de nieuwe opmaak meteen door te voeren in alle pagina's van de site.
• Om dezelfde reden zijn ook tabellen voor de opmaak uit de gratie.
• En kunnen zogenaamde "inline styles" (bv. <img style="position: relative; top: 2px; border: none;" ... enz.>) beter vervangen worden door algemene css in het stylesheet.
• Je kunt op deze manier ook verschillende stylesheets aan verschillende types gebruikers toedienen (bv. mensen met scherm-browsers, mensen met voorlees-browsers, enz.).
• En het is heel makkelijk om een print-stylesheet toe te voegen, dat automatisch gebruikt wordt als iemand een pagina gaat uitprinten.
  Veel te vaak wordt dat helaas niet gedaan, en lopen pagina's van het A4'tje af; of zit er in de print een scrollbalk die je niet kan bedienen, enz.

Ad 2
Ik vermoed dat Erik met de overmaat aan floats bedoelde, dat ze voor een groot deel als inline-styles in de html zitten, wat steeds een herhaling van zetten oplevert.
Voor een rijtje zaken in een horizontaal menu kan het bijvoorbeeld heel goed met één instructie voor alle list-items tegelijkertijd:

#nav li {
   ...
   float: left;
   }

Ad 3
De "hover states" zijn de opmaak-instructies voor als met de muis over een link gemuisd wordt: zie hierboven.

Met vriendelijke groet,
CSShunter

 

[Robdeprop]

Wow dank je zeer, CSShunter!

Dat noem ik nou eens echte hulp! Zeer attent van je.

Uiteindelijk bleek het hele probleem oplosbaar te zijn met een simpele doctype

Ik heb al je advies ter harte genomen, en ik zal de gecentreerde pagina voorleggen aan mijn cliënt (haha, mijn eerste, ben beginnend programmeur), en als deze het een goed idee vindt, kan ik de navigatie balk met een CSS sprite doen.

Die HTML validator was handig. Pfft, het blijkt zeer lastig te zijn om een pagina totaal fout-vrij te maken

Nogmaals bedankt!