Buttonsprite in IE8

  • Onderwerp starter Onderwerp starter BenSw
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
B

BenSw

Gebruiker
Lid geworden
1 mei 2012
Berichten
16
Ik heb op volgende site: www.dp-e.be een buttonsprite gebruikt en deze werkt in Firefox, Chrome en IE9 (of welke is op Windows 8 geïnstalleerd?) perfect.

Ik zag nu laatst op een computer met IE8 dat deze de afmetingen niet respecteert (zie foto). Weet iemand hoe dit komt en hoe ik dit kan oplossen?

Ik kan de buttonafbeeldingen de juiste afmetingen geven, en ze niet verkleinen in css, maar dan zijn ze niet scherp genoeg vind ik..

buttonspirte.jpg

HTML: 
  <ul class="cssmenu">
    <li class="home"><a href="index.html" title="Home"></a></li>
    <li class="about"><a href="about.html" title="About"></a></li>
    <li class="activities"><a href="engineering.html" title="Activities"></a></li>
    <li class="contact"><a href="contact.html" title="Contact"></a></li>
  </ul>

Code: 
ul.cssmenu {
	margin-top: 5px;
	margin-right: 75px;
	float:right;
	list-style: none;
	}

ul.cssmenu li {
	float: left;
	margin-right: 25px;
	}

ul.cssmenu li a {
	display: block;
	width: 100px;
	height: 19px;
	background:url(../images/buttonsprite.png);
	background-repeat: no-repeat;
	background-size: 400px 38px;
	}

ul.cssmenu li.home a {
	background-position: 0 0;
	}

ul.cssmenu li.about a {
	background-position: -100px 0;
	}

ul.cssmenu li.activities a {
	background-position: -200px 0;
	}
ul.cssmenu li.contact a {
	background-position: -300px 0;
	}

ul.cssmenu li.home a:hover {
	background-position: 0 -19px;
	}

ul.cssmenu li.about a:hover {
	background-position: -100px -19px;
	}
ul.cssmenu li.activities a:hover {
	background-position: -200px -19px;
	}

ul.cssmenu li.contact a:hover {
	background-position: -300px -19px;
 
Omdat de kwaliteit dan minder wordt vind ik.. En ik ben zelf een surfer die als ik op een groot scherm aan het werken ben, die websites gaat inzoomen en zo vermijd ik dat de buttons gaan pixelen..

Is er een oplossing dan of niet?
 
Hoi BenSw,
Ik heb eens de associatiehelft van m'n hersenpan gekieteld, en daar komt uit rollen:


  • Met javascript de actuele breedte van de nav-<ul> opmeten na in- of uitzoomen, en aan de hand daarvan een andere sprite toedienen (cq een driedubbele sprite maken).
    Uitgeprobeerd in FF: helaas geeft opmeten van de nav-breedte na inzoomen (met .offsetWidth) hetzelfde resultaat als vóór het zoomen. Doodlopende weg dus.


  • Met javascript de zoom-factor bepalen, en aan de hand daarvan ... enz. Dan loop je keihard tegen een muur van browserverschillen aan: ze doen het allemaal anders (zie bv. hier). Dat zie ik dus ook niet lukken.


  • Met een Conditional Comment IE8 en eerder er uit vissen, en die een 1:1 sprite geven bij ongezoomd toeschouwen. Dan krijgen IE8'ers dus een minder fraaie sprite te zien bij inzoomen.


  • Geen background-sprite gebruiken (al of niet alleen voor IE8 ), maar aparte voorgrond-images (die IE wel kan schalen), met hover-varianten die met javascript bediend worden.
    Daarbij eventueel een sprite maken die met de clip-eigenschap de goede button laat zien, maar hoe zoiets zich gedraagt bij inzoomen zal uitgeprobeerd moeten worden.


  • Een button-sprite maken die alleen uit de achtergrond bestaat, met de tekst er in als html-tekst.
    Bij gebruik van de huidige afbeelding zal de hoogte groot genoeg moeten zijn voor vergroting van de tekst erbinnen (bij kleinere hoekjes kan met css ook de hoogte auto-aanpasbaar gemaakt worden).
    De breedte van de sprite-buttons kan zich aanpassen aan de actuele ingezoomde breedte van de tekst (via een em-breedte), als de buttons in een linker- en een rechterdeel in de html komen:

buttonsprite-nw.png


  • Misschien kan het met een Flash-uitvoering van de sprite.


  • Kijken of je een html5/css3-boilerplate kan gebruiken waarmee IE8 zich aan de spelregels gaat houden.


  • De css ombouwen tot een liquid design, dat zich aanpast aan de schermbreedte: zodat er helemaal niet gezoomd hoeft te worden. Met javascript kan dan de schermbreedte bepaald worden, en aan de hand daarvan ... weer zo'n deel van een driedubbele sprite.
    Zie bv. deze pagina, waar op grond van de vensterhoogte een hoge of minder hoge kop wordt gebruikt.

Kan je hiermee weer even voort? ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
BenSw zei:
... die websites gaat inzoomen en zo vermijd ik dat de buttons gaan pixelen..

Is er een oplossing dan of niet?
Klik om te vergroten...

Wellicht een SVG-sprite gebruiken?
Ik had een voorbeeld ergens gezien maar moet even in mijn geheugen (lees: browser-geschiedenis) graven.

Zodra ik hem heb zal ik hem bij dit bericht plaatsen.
 
Merci csshunter! Ik heb gekozen voor zo'n conditional comment en dan een aparte css gemaakt voor IE8. Mijn comment is nu wel "if IE8" en niet gewoon IE, want ik denk dat vanaf IE9 mijn sprite wel werkt? Wordt IE7 nog frequent gebruikt?
 
BenSw zei:
Merci csshunter! Ik heb gekozen voor zo'n conditional comment en dan een aparte css gemaakt voor IE8. Mijn comment is nu wel "if IE8" en niet gewoon IE, want ik denk dat vanaf IE9 mijn sprite wel werkt? Wordt IE7 nog frequent gebruikt?
Klik om te vergroten...
Nee, maar je kunt ook <!--[if lt IE 9]> gebruiken, dat geldt voor alle versies van IE ouder dan IE9.
 
Hoi BenSw,
Nu zie ik het toch nog fout gaan (en dat vindt browsershots ook). :rolleyes:
Wat heb je gedaan?
HTML: 
<!--[if IE 8]>
    <link rel="stylesheet" href="css/layout_ie.css" type="text/css"/>
<![endif]-->
<!--[if !IE]><!-->
    <link rel="stylesheet" href="css/layout.css" type="text/css"/>
<!--<![endif]-->
Daar staat dus: als het IE8 is, moet het IE-stylesheet gebruikt worden; en als het niet IE is, moet het gewone stylesheet gebruikt worden.
Maar ... als het IE9 is, dan is het niet IE8, en ook niet niet-IE! Dan krijgt IE9 dus helemaal geen stylesheet. :shocked:
Hetzelfde geldt voor IE7.

Je kan het 't beste als volgt aanpakken:
HTML: 
<link rel="stylesheet" href="css/layout.css" type="text/css"/>
<!--[if lt IE 9]>
    <link rel="stylesheet" href="css/layout_ie8.css" type="text/css"/>
<![endif]-->
Betekent: alle browsers (inclusief alle IE-versies) moeten het gewone stylesheet gebruiken.
Daarna laat je IE-versies lager dan IE9 gebruik maken van het speciale IE8-stylesheet.
Omdat dit verderop in de html-code staat, worden de eerdere css-regels uit het gewone stylesheet overruled.

Voor IE8 en eerder hoef je zodoende geen apart 100% compleet stylesheet te maken: in het IE8-stylesheet hoeven alleen de stijlregels te komen waarin IE8 en eerder moeten afwijken van de gewone regels.

=======
ik denk dat vanaf IE9 mijn sprite wel werkt?
Klik om te vergroten...
Dat kan je controleren met netrenderer.com of browsershots.org, als bovenstaande stylesheet-codes in orde zijn. Omdat het screenshots zijn, kan je niet het zoomen uitproberen, maar je kunt wel kijken wat er gebeurt bij bv. een resolutie van 1280*1024px. Meestal is Netrenderer sneller in het geven van resultaat.


  • Gaat het niet goed, dan moet je dus alsnog [if IE] gebruiken ipv [if lt IE9].

=======
Wordt IE7 nog frequent gebruikt?
Klik om te vergroten...
Nee, dat schommelt momenteel rond de 1% van de surfers in Nederland. Maar als je [if lt IE 9] gebruikt, is ook IE7 afgedekt.


  • Je kunt ook [if lte IE8] gebruiken: lt = less than; lte = less than or equal to.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan