Internet Explorer heeft moeite met de CSS

[Zaro]

Hoi allemaal.

Ik heb zojuist mijn website vernieuwd: http://www.zerfox.com (NIET als reclame, maar als voorbeeld)
Nu blijkt het dat op Internet Explorer 7 (misschien ook andere versies) mijn 2 links niet goed werken.

Ik heb namelijk 2 buttons, die dit als style hebben:

a.portfolio {
 text-decoration: none;
 background-image: url('images/button_portfolio_up.png');
 width: 200px;
 height: 200px;
 padding-right: 100px;
 padding-left: 100px;
 padding-bottom: 180px;
 }

Hover:

a.portfolio:hover {
 text-decoration: none;
 background-image: url('images/button_portfolio_down.png');
 width: 200px;
 height: 200px;
 padding-right: 100px;
 padding-left: 100px;
 padding-bottom: 180px;
 }

Helaas werkt dit niet in Internet Explorer maar wel in FireFox en andere webbrowsers (getest met browsershots.org)
Waarschijnlijk ligt de fout bij de padding / afmetingen aangezien hij wel zichtbaar wordt als ik er tekst in zet.

Weet iemand wat ik verkeerd doe, en hoe ik het kan oplossen?

Groetjes,
Rutger.

 

[cx1213]

je sluit tags verkeert af dat moet zo(voor Xhtml) <img src="plaatjes.jpg" alt=""/>, <br> moet <br /> zijn <meta> moet <meta /> zijn. voor img is ook een alt verplicht.
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
plaats boven aan je css eens dit

*{
padding:0px;
margin:0px;
}

 

[Zaro]

Bedankt voor de reactie!
Ik heb zoals je aangeeft alles veranderd naar "/ >" als afsluiting tag.
Helaas werkt de CSS code niet, ik vrees dat Internet explorer de padding gewoon niet goed doet.

 

[csshunter]

Hoi Zaro,
Hier is iets anders aan de hand. Je hebt een hover-ruimte voor de links-met-background-img willen creëren door hoogte, breedte en paddings op te geven voor de link. Maar ... de links zijn verder leeg (er is geen link-tekst binnen de <a>...</a>). Deze kunstgreep werkt niet in IE.
De oplossing is om de gebruikelijke css voor een element zonder html-vulling te nemen:

• de breedte en hoogte in de css laten staan,
• de paddings gewoon weglaten, en
• de links in de css een {display: inline-block;} meegeven.

Dan worden de hele 200x200px van de links getoond, en dus ook de achtergrondfiguur die in die 200x200px zit.

Verder valt op, dat als je de eerste keer over een button hovert, de button even wegvalt, en na deze flits pas met de hover-achtergrond komt. Dat ligt er aan, dat pas op het moment van hover de nieuwe background-img gedownload wordt, en dat duurt even. Met de techniek van de "sliding doors" kan je dat vermijden:

• het gewone background-img wordt uitgebreid met het hover-img;
• met de background-position eigenschap wordt het juiste partje van het ("te grote") image getoond; want de afmetingen van de link blijven gewoon de 200x200px; het img wordt dus doorgeschoven;
• op moment van hoveren is nu de hover-img al aanwezig, alleen de positie verandert, en dat gaat zo vlug dat je het niet eens merkt: geen wegvallende button, geen flits;
• om nog meer tijdwinst te krijgen, kunnen de twee buttons naast elkaar gezet worden in het ene image, en de twee hover-varianten er onder.
• Dit is dan het plaatje waarmee gerangeerd wordt:
  www.developerscorner.nl/csshunter/tests/images/buttons-servers-portfolio.gif

Deze techniek staat in het artikeltje: Een blokje knoppen.
Toegepast op jouw pagina krijgen we dan deze:

• Voorbeeldpagina www.developerscorner.nl/csshunter/tests/buttons.htm (zie broncode)

Van de tekst boven de knoppen heb ik echte tekst gemaakt, dat heeft o.a. het voordeel dat spelfoutjes makkelijk gecorrigeerd kunnen worden (het is "coming soon", niet "comming soon" ).

Met vriendelijke groet,
CSShunter

PS: Heb je bij het bekijken van de voorbeeld-pagina verschil opgemerkt in de achtergrond?
Jouw blauwe pagina-achtergrond background.png is ... 1353kB (!),
die van mij buttons-servers-portfolio-bg.jpg (met 25% compressie) is ... 39kB.
De 4 button-varianten zijn oorspronkelijk 4x 25kB, het ene img is nu 33kB.
Samen zijn alle images nu 72kB (was: 1457kB), oftewel nog geen 5%.

(a) Logisch dat de oorspronkelijke pagina zo traag op het scherm komt.
(b) Pagina nu 20x zo snel geworden. :d​

 

[Zaro]

Bedankt voor de reactie!
Wanneer ik thuis kom zal ik het allemaal even testen, van de achtergrond wist ik inderdaad al, maar dat komt mede omdat de afmetingen van de achtergrond enorm zijn (zodat IE het niet hoeft uit te rekken)
Ik behoud liever een ander lettertype, omdat het mooi staat! Bedankt voor het doorgeven van de spellingsfout.

 

[csshunter]

... dat komt mede omdat de afmetingen van de achtergrond enorm zijn (zodat IE het niet hoeft uit te rekken).

Eh, ja en nee.
Ja, omdat het een png van 1500x1125px is, nee omdat mijn jpg'tje óók 1500x1125px is.
En ook nee, omdat IE en andere browsers een achtergrond-afbeelding niet kunnen uitrekken (je zal "herhalen" bedoeld hebben).

Ik behoud liever een ander lettertype, omdat het mooi staat!

Ik had al zo'n blauw vermoeden.

Nog even over de transparantie: ik heb van de buttons expres een transparante gif gemaakt, en geen transparante png. Dat beperkt het aantal kleuren weliswaar tot 256 stuks ipv 16 miljoen, maar ik kan het verschil niet zien. Voordeel is, dat nu ook mensen die nog met een oude IE6 browsen geen grijze vlakjes zien ipv transparantie (anders zou je er met javascript een IE-png-fix op los moeten laten).

Met vriendelijke groet,
CSShunter

 

[Zaro]

Ik heb 't aangepast! :thumb:
Zo merk je inderdaad verschil in snelheid, vroeger merkte ik dat pagina's lang laden (1Mb/s) nu is dat erg moeilijk (20Mb/s)
Zou ik mogen weten hoe de bestandsgrootte kan worden aangepast?

Heel erg bedankt voor deze super uitleg!

P.S. Ik voel me eerlijk gezegd nu een beetje stom

 

[csshunter]

Hoi Zaro,

Zo merk je inderdaad verschil in snelheid, vroeger merkte ik dat pagina's lang laden (1Mb/s) nu is dat erg moeilijk (20Mb/s)

Ja, de breedbandverbindingen worden steeds sneller, dan lijkt het alsof je willekeurig grote bestanden kunt gebruiken. Maar er zijn nog wel mensen die op een telefoon-modem draaien, daar ligt het heel anders voor:

• Een Speed Report kan je online krijgen via de Web Page Analyzer van WebsiteOptimization.com. Die haalt feilloos alle knelpunten in een site er uit. *)
• Nog makkelijker is hetzelfde ding, ingebouwd in de Firefox Webdeveloper Toolbar (menu Tools > View Speed report). Heb je die add-on trouwens al? Reuze handig.
• Met de FF Throttle add-on kan je een langzame verbinding simuleren: ook dat is wel eens leerzaam om te zien.
  Wel eerst de FF cache legen!

Zeker als je je site internationaal wil laten meekomen, is het nuttig flink te optimaliseren. Want in veel buitenlanden zijn (behalve in de grote steden) de breedbandverbindingen nog lang niet zo ver opgerukt als hier in NL.

Zou ik mogen weten hoe de bestandsgrootte kan worden aangepast?

Jawel! Het geheim is:

• Eerst in je tekenprogramma het bestand goed opslaan in de originele kwaliteit.
• Vervolgens experimenteren met opslaan als png (met verschillende hoeveelheden kleuren), als gif, en als jpg (met verschillende compressie-varianten). In 3 minuten heb je zo een heel rijtje aangemaakt, en via de Verkenner zoek je de kleinste uit die nog voldoet aan je kwaliteitseisen.
• Tevoren valt het niet te zeggen wie het gaat worden: dat hangt helemaal van het image in kwestie af.
  Zie ook artikeltje Image saving - Gif, png, jpg: which is the best format?.
• Met de FF add-on YSlow kan je soms ook nog wat van de bestandsgrootte van je images afknabbelen (menu Tools > All Smush.it).

P.S. Ik voel me eerlijk gezegd nu een beetje stom

Niets aan de hand! Wat ik hier als Grote Wijsheden drop, ben ik zelf ook door veel schade & schande achter gekomen.
Dat ge-oetel zie je hier niet. :d

Met vriendelijke groet,
CSShunter
____________
*) Neem dit plaatje maar eens (670kB).
Speed Report: een 56KBps modem doet er ruim 2 volle minuten over om dat binnen te halen!
Weg met die schermvullende achtergronden! Herhaling is vaak een betere oplossing.