[CSS]Ruzie met Mozilla

[Noedels]

Heren CSS experts,

Ik heb vandaag accoord gekregen van mijn manager om verder te gaan met het nieuwe design voor onze webshop en dus wil ik nu eerst de IE / Mozilla verschillen eruit gaan halen. Maar ik krijg het maar niet voor elkaar....... Ik al geprobeerd om allerlij getalletjes enzo te wijzigen maar zonder het gewenste effect.....

De pagina is te vinden op: http://ecommerce.triple-p.nl/temp/
Ik zal mijn problemen wel even doorlopen met jullie.

1: Mozilla houdt zich niet aan de aangegeven hoogte voor #top. Ik geef hier aan dat hij 50px hoog moet zijn, wat hij in IE goed doet, alleen mozilla doet dit niet goed (dit is te zien doordat de bg.gif van die container niet overeenkomt met die op IE.

2: In Mozilla krijg ik bij de Tab menu structuur een dubbel mouseover effect. De tekst veranderd van kleur en de background van de tab veranderd van kleur. In IE krijg ik enkel een kleurwijziging in de tekst. De tabkleur blijft hier hetzelfde.

3: Mozilla vergeet de #subheader weer te geven, welke direct onder de tabstructuur hoort te staan. IE geeft deze wel weer zoals dit gewenst is.


Alvast bedankt voor de hulp / advies.

[Noork]

De pagina ziet er in beide browsers wel redelijk uit moet ik zeggen. Niet echt iets om je grote zorgen over te maken lijkt mij. Er is wel een soort van css hack om verschillen te maken tussen IE en Mozilla. Je kunt voor IE "_top" gebruiken. Mozilla negeert de underscore in je css. Wel een beetje quick and dirty, maar wel effectief.

[Noedels]

Noork schreef op dinsdag 29 maart 2005 @ 15:24:
De pagina ziet er in beide browsers wel redelijk uit moet ik zeggen. Niet echt iets om je grote zorgen over te maken lijkt mij. Er is wel een soort van css hack om verschillen te maken tussen IE en Mozilla. Je kunt voor IE "_top" gebruiken. Mozilla negeert de underscore in je css. Wel een beetje quick and dirty, maar wel effectief.

Het verschil is inderdaad niet mega storend, het kan er mee door, maar natuurlijk wel erg jammer van al het werk als het in IE wel goed werkt maar in Moz niet! Daarom wil ik die verschillen er ook uit hebben.

Wat bedoel je eigenlijk met "Er is wel een soort van css hack om verschillen te maken tussen IE en Mozilla. Je kunt voor IE "_top" gebruiken."

[Noork]

Noedels schreef op dinsdag 29 maart 2005 @ 16:04:
[...]
Wat bedoel je eigenlijk met "Er is wel een soort van css hack om verschillen te maken tussen IE en Mozilla. Je kunt voor IE "_top" gebruiken."

Een underscore voor de property zetten. IE pakt dit wel, maar Mozilla negeert het.

code:

top: 200px; /* top voor Mozilla */ 
_top: 198px; /* top voor IE, IE negeert hiermee de bovenstaande top */

[Johnny]

Als je Strict HTML gebruikt heb je dat probleem niet, dan doet MSIE 6 het ook op de (juiste) Mozilla manier, maar echt hele oude browsers doen het dan weer een beetje verkeerd.

Het snelst is dan ook om in je CSS gewoon twee waarden op te geven, eerst de waarde voor Mozilla, en dan die voor Internet Explorer met een underscore er voor.

[Sappie]

Nofi maar ik denk dat het eerder aan je html / css ligt dan aan mozilla. Als je jouw pagina gaat resizen wordt het (ook in IE) vercrapt.

Ik zou overwegen de structuur te herzien en af te zien van dingen als hoogtes / breedtes die je opgeeft in %.

edit:

Johnny schreef op dinsdag 29 maart 2005 @ 16:11:
Als je Strict HTML gebruikt heb je dat probleem niet, dan doet MSIE 6 het ook op de (juiste) Mozilla manier, maar echt hele oude browsers doen het dan weer een beetje verkeerd.

Ik neem aan dat je hiermee doelt op de verschillende box-models. IE6 staat ook in Noedels' voorbeeld in Standardsmode en gebruikt daarmee hetzelfde (w3c) box-model als firefox. Wanneer de URI mist in je doctype zou je IE wel in Quirksmode dwingen en zouden de verschillen wel optreden.

[ Voor 54% gewijzigd door Sappie op 29-03-2005 16:18 ]

[Noedels]

Noork schreef op dinsdag 29 maart 2005 @ 16:08:
[...]


Een underscore voor de property zetten. IE pakt dit wel, maar Mozilla negeert het.

code:

top: 200px; /* top voor Mozilla */ 
_top: 198px; /* top voor IE, IE negeert hiermee de bovenstaande top */

ah.... duidelijk voorbeeld! dank. hiermee zal inderdaad een van de punten opgelost zijn.

[Noedels]

Sappie schreef op dinsdag 29 maart 2005 @ 16:12:
Nofi maar ik denk dat het eerder aan je html / css ligt dan aan mozilla. Als je jouw pagina gaat resizen wordt het (ook in IE) vercrapt.

Ik zou overwegen de structuur te herzien en af te zien van dingen als hoogtes / breedtes die je opgeeft in %.

als het goed is, doet de pagina het in de meeste resoluties zonder problemen. bij mij heb ik hem getest in de resoluties 800*600 tot 1152*864 (hoger kan mijn scherm hier niet......) en daar ziet hij er goed uit. in de nog hogere resoluties zou hij het gewoon ook goed moeten doen.

verder heb je wel gelijk in het af zien van hoogtes en breedtes. ik gebruik soms breedtes waar ik ze niet nodig heb, maar die moet ik nog ff weghalen. maar ik gebruik op sommige stukken hoogtes en breedtes omdat dat moet ivm background images. dus kom ik er gewoon niet onderuit!

[Sappie]

ik bedoelde het gebruik van procenten in de hoogtes of breedtes. Uiteraard is het opgeven van een hoogte of breedte juist wél goed, als je weet wat de grootte zal zijn

[Noedels]

Sappie schreef op dinsdag 29 maart 2005 @ 16:28:
ik bedoelde het gebruik van procenten in de hoogtes of breedtes. Uiteraard is het opgeven van een hoogte of breedte juist wél goed, als je weet wat de grootte zal zijn

ah... op die manier. dacht dat je het in zijn algemeenheid bedoelde. zal er eens mee spelen.

[Noedels]

Sappie schreef op dinsdag 29 maart 2005 @ 16:28:
ik bedoelde het gebruik van procenten in de hoogtes of breedtes. Uiteraard is het opgeven van een hoogte of breedte juist wél goed, als je weet wat de grootte zal zijn

ik heb hier mee zitten klooien maar het maakt niets uit.....
waar mogelijk heb ik de hoogtes en breedtes verwijderd. maar op sommige plekken moet ik wel breedtes in % aangeven. en visueel veranderd er helemaal niets wanneer ik de waarden verwijder waar ze overbodig zijn.

ik blijf dus nog met die probleempjes zitten.....

[Noedels]

punt 1 is overigens al helemaal opgelost. heb dus alleen nog ruzie met punten 2 en 3.

de top:200px; code werkt. _top lijkt hij overigens niet te snappen.....
wilde die namelijk ook gebruiken voor probleem nummer 3. als ik in die css top:waarde zet, dan doet hij het in mozilla goed, en als ik dan voor IE _top gebruik, dan gebeurt er echt helemaal neits. dus dan is IE weer fout.....

de _top gebruik ik bij punt 1 namelijk ook niet. maakt namelijk geen verschil. om de een of andere reden hoef ik bij die css geen hoogte mee te geven omdat het gewoon goed gaat.

[ Voor 74% gewijzigd door Noedels op 30-03-2005 10:08 ]

[Verwijderd]

Punt drie werkt hier met FF gewoon hoor. Je kan trouwens even kijken op http://glish.com/css/, staat handige info over CSS.

offtopic:
Dus jij bent Annet...
http://triple-p.nl/sectiecarriere/images/annet.gif

[curry684]

Noedels schreef op dinsdag 29 maart 2005 @ 15:18:
3: Mozilla vergeet de #subheader weer te geven, welke direct onder de tabstructuur hoort te staan. IE geeft deze wel weer zoals dit gewenst is.

Je bent een clear:both vergeten bij de inline style van #subheader.

[Noedels]

Verwijderd schreef op woensdag 30 maart 2005 @ 10:03:
Punt drie werkt hier met FF gewoon hoor. Je kan trouwens even kijken op http://glish.com/css/, staat handige info over CSS.

offtopic:
Dus jij bent Annet...
http://triple-p.nl/sectiecarriere/images/annet.gif

hehe.... ik ben niet Annet.... Dat is mijn voorgangster!
maarre..... is punt 3 bij jou precies hetzelfde in FF als in IE? bij mij niet namelijk bij mij wordt wel de tekst "Beste %%department%%, welkom terug op de Triple P Webshop." getoond, maar de background image wordt niet getoond. tevens hoort die background tussen het tabmenu en het blokje product zoeken te komen.

[Noedels]

curry684 schreef op woensdag 30 maart 2005 @ 10:07:
[...]

Je bent een clear:both vergeten bij de inline style van #subheader.

Dankje! dat was hem ja (altijd handig mensen die meer ergens vanaf weten dan ik!)


Blijft dus over punt 2, de mouseover. in FF veranderd de tab waar je overheen gaat van kleur (txt+bground) maar in IE enkel de txt.

heb voor het tabmenu overigens gebruik gemaakt van: http://www.alistapart.com/articles/slidingdoors2/

[ Voor 11% gewijzigd door Noedels op 30-03-2005 10:27 ]

[CH4OS]

Sorry dat ik het zeg, maar ik vind het juist alleen maar goed dat dat gebeurt, anders moet je echt goed kijken waar of er wel echt wat veranderd is.Nu is het echt goed duidelijk om welke tab het gaat (ook al is het misschien minder mooi...)

Maar als je voor de tabs een achtergrond plaatje gebruikt, dan zou ik daar is naar kijken, want kan zijn dat het daar aan ligt...

[Noedels]

GJ-tje schreef op woensdag 30 maart 2005 @ 10:27:
Sorry dat ik het zeg, maar ik vind het juist alleen maar goed dat dat gebeurt, anders moet je echt goed kijken waar of er wel echt wat veranderd is.Nu is het echt goed duidelijk om welke tab het gaat (ook al is het misschien minder mooi...)

Maar als je voor de tabs een achtergrond plaatje gebruikt, dan zou ik daar is naar kijken, want kan zijn dat het daar aan ligt...

ik wil juist ook dat het gebeurd, het is juist het probleem dat het in IE niet gebeurd.
als bgpic gebruik ik:


volgens de gebruikte code, zou die image naar boven moeten schuiven wanneer je over een tab heen gaat met je muis. in FF gaat dit perfect in IE alleen niet...
dit terwijl het gebruikte voorbeeld van ALA wel goed gaat, maar mijn versie niet, maar kan het verschil alleen niet vinden....

[curry684]

Noedels schreef op woensdag 30 maart 2005 @ 10:12:
heb voor het tabmenu overigens gebruik gemaakt van: http://www.alistapart.com/articles/slidingdoors2/

Je hebt 'm alleen niet goed gelezen:

If you’ve been checking our work so far in Internet Explorer (Win or Mac), no doubt you’ve noticed that the rollover effects, as implemented above, don’t work. IE only applies the :hover pseudo class to anchor elements, nothing else. In order to change both images of the Sliding Doors technique, we would need to insert an additional element (such as a span) inside the anchor, and shift all our style rules one element inward (list item rules shift to the anchor, anchor rules shift to the span).

[CH4OS]

Cascading Stylesheet:

#header a {
    float:left;
      display:block;
      width:.1em;
      background:url("gfx/right_both.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
    font:Arial;
    font-size:12px;
      color:#765000;        
      white-space:nowrap;
}

Het gaat dus om deze CSS code?
IIG, IE ondersteund alleen :hover, etc op de a-tag, afaik geen andere, ik zie alleen geen #header a:hover staan, dus dat zou het ook niet moeten zijn.

offtopic:
Snelle curry884

Maar ik denk wel, dat als je dit op wil gaan lossen, dat je dan javascript moet gaan gebruiken.

JavaScript:

onmouseover="this.className='jeclass'"

[ Voor 14% gewijzigd door CH4OS op 30-03-2005 10:43 ]

[Noedels]

ik heb het met span geprobeerd maar dan krijg ik dat effect helaas ook niet......
en daarnaast verneukt hij dan ook nog eens heel veel andere dingen.....

zal dit misschien verholpen zijn met een volgende versie van IE? of.....

[curry684]

GJ-tje schreef op woensdag 30 maart 2005 @ 10:39:
IIG, IE ondersteund alleen :hover, etc op de a-tag, afaik geen andere

Klopt.

Maar ik denk wel, dat als je dit op wil gaan lossen, dat je dan javascript moet gaan gebruiken.

JavaScript:

onmouseover="this.className='jeclass'"

Onzin:

quote: http://www.alistapart.com/articles/slidingdoors2/

We won’t review in detail the adjustments required to get both images changing for a rollover effect in IE. But to prove it is possible, we can see these changes demonstrated in Example 8a. As you can see, shifting the roles of each element also eliminates the small amount of dead space we mentioned in Part I, because the anchor now contains the entire tab.

[CH4OS]

curry684 schreef op woensdag 30 maart 2005 @ 10:43:
Onzin

Maar om nou te zeggen dat het semantisch gezien goede HTML is, denk ik ook niet dat daar hier sprake van is.

Noedels schreef op woensdag 30 maart 2005 @ 10:42:
zal dit misschien verholpen zijn met een volgende versie van IE? of.....

NOFI, maar het is te hopen van wel, dat IE eindelijk eens goed de standaarden gaat ondersteunen. Maar dat neemt niet weg, dat iedereen gelijk overgaat naar de nieuwe versie, laat staan de nieuwe versie gebruiken kán. Voor zover bekend, gaat de nieuwe versie van Internet Explorer alleen XP met SP2 ondersteunen, en lager heeft (helaas) pech. Alhoewel ik wel een versie verwacht, die zelfs W2000 zal gaan ondersteunen...

[Noedels]

@GJ

die #header a:hover stond er wel, maar daar zat inderdaad een deel van de fout. daar miste ik nog de background-position:100% -150px

nu verplaatst hij dus de rechterkant van de image perfect, maar het enige wat hij nog niet wil doen is de linker image omhoog verplaatsen.

de gebruikte code daarvoor is:

#header a:hover {
color:#333000;
background-position:100% -150px;
}
#header #current {
background-position:0 -150px;
border-width:0;
}
#header #current a {
background-position:100% -150px;
padding-bottom:5px;
color:#333000;
}
#header li:hover, #header li:hover a {
background-position:0 -150px;
color:#333000;
}
#header li:hover a {
background-position:100% -150px;
}

[CH4OS]

Dat alleen het rechter gedeelte nu gaat, komt omdat steeds het rechter gedeelte in de <span> in de <a> tag staat, de linkerhelft is dat momenteel niet bij jou. Dus linker helf in de span, die in de <a> zit en het zou moeten werken...

[ Voor 24% gewijzigd door CH4OS op 30-03-2005 11:09 ]

[curry684]

GJ-tje schreef op woensdag 30 maart 2005 @ 10:48:
[...]
Maar om nou te zeggen dat het semantisch gezien goede HTML is, denk ik ook niet dat daar hier sprake van is.

[/quote]
SPAN en DIV zijn in principe semantiekloze onzichtbare elementen die enkel dienen ter structurering en om externe hooks (voor CSS, scripting e.d.) te leveren binnen je markup. Er is dus in principe geen probleem met een span hier enkel om IE te plezieren

[Noedels]

GJ-tje schreef op woensdag 30 maart 2005 @ 11:08:
Dat alleen het rechter gedeelte nu gaat, komt omdat steeds het rechter gedeelte in de <span> in de <a> tag staat, de linkerhelft is dat momenteel niet bij jou. Dus linker helf in de span, die in de <a> zit en het zou moeten werken...

GJ, dankje voor je oplossing, maar het spijt me dat ik totaal geen flauw idee hebt waar je het over hebt. een span gebruik ik nergens in men css en wat bedoel je precies met die <a> ?

aangepaste css en html is overigens hier te vinden:
http://ecommerce.triple-p.nl/temp/
http://ecommerce.triple-p.nl/temp/layout.css

[Noedels]

iemand die weet wat GJ bedoelt?

[curry684]

Zoals aangegeven ben je op http://www.alistapart.com/articles/slidingdoors2/ het stuk vergeten waarin wordt uitgelegd dat je spans in je anchors nodig hebt om het onder IE te laten werken

[Noedels]

curry684 schreef op donderdag 31 maart 2005 @ 09:40:
Zoals aangegeven ben je op http://www.alistapart.com/articles/slidingdoors2/ het stuk vergeten waarin wordt uitgelegd dat je spans in je anchors nodig hebt om het onder IE te laten werken

waarom werkt de rechter sliding door wel dan, aangezien ik geen spans gebruik.

[curry684]

Geen idee, maar boeit het je aangezien je het met die tips wel compleet werkend kunt krijgen?

[Noedels]

curry684 schreef op donderdag 31 maart 2005 @ 14:00:
Geen idee, maar boeit het je aangezien je het met die tips wel compleet werkend kunt krijgen?

eigenlijk wel, want als ik die tips die daar staan opvolg, dan krijg ik weer andere problemen met het script.

ik heb namelijk al hun originele versie compleet nagebootst en als ik dat doe dan vernaggelt hij weer een partij andere dingen....

[CH4OS]

Ik bedoelde dit (en volgens mij het artikel (en Curry) ook:

HTML:

<a href="blaat.ext"><span>linkerhelft van de tab</span><span>rechterhelft van de tab</span></a>

te doen, maar dan kan je het net zo goed in 1 span gooien

[Noedels]

GJ, nog bedankt voor je reactie.
Ik heb je advies opgevolgd, alleen helaas niet met het gewenste resultaat. het plaatsen van spans maakt totaal geen verschil.

Ik denk dat ik het daarom maar laat bij hoe het nu is.

thnx anyway, en wie weet bij een volgende IE versie dat het wel opeens werkt

[CH4OS]

Noedels schreef op vrijdag 01 april 2005 @ 11:41:
thnx anyway, en wie weet bij een volgende IE versie dat het wel opeens werkt

Het is te hopen van wel, maar zoals ik eerder postte... Niet iedereen gaat (gelijk) over naar de nieuwe IE als die er eenmaal is. De een die kan het wél, maar doet het niet (weet bijv. niet dat ie er is) en de ander kan het gewoon niet (verouderd OS) Dus je zal zeker in de komende jaren nog wel rekening moeten houden, met oudere browsers...

EDIT:
Graag gedaan trouwens...

[ Voor 6% gewijzigd door CH4OS op 01-04-2005 11:48 ]

[Noedels]

i know, maar het menu werkt op deze manier ook, dus......