Verschil in beeld website (Firefox en IE8)

[femke98]

Ik kreeg een melding van iemand die het blog van mijn man regelmatig leest. Hij kon op de voorpagina de teskt niet lezen omdat hij een witte achtergrond zag en de tekst was ook wit.
Ik begreep er niets van, ik werk met Firefox en zie daar totaal geen witte achtergrond met witte tekst. De tekst die ik zie is wel wit, maar staat in een zwart veld.
Ik heb gevraagd om een screenshot en die kreeg ik, hetzij niet van het "probleem' maar het verduidelijkte mij wel het probleem.
De zwarte achtergrond is dus NIET te zien in IE8.

Voor de goede orde hierbij dus de verschillen.

Zo is het te zien in IE8:



Zo is het te zien in Firefox 18:


Nu wil het nog weleens dat ik een plaatje neerzet wat over de hele breedte wit is met daarin in afbeelding. En dus kan ik begrijpen dat de tekst dan wegvalt in het wit, omdat die zwarte achtergrond niet te zien is in IE8.

Nog meer verschillen:
Links boven in staat bij het eerste screenshot van IE8 een rood kruisje, alsof IE denkt dat daar een plaatje moet staan, maar je ziet dat deze er niet is. Zie screenshot Firefox.
En een ander verschil is dat IE8 blokjes laat zien onder de slider en Firefox laat rondjes zien.

Het leuke is dat ik een netbook met Windows 8 heb en die heeft IE 10 en daar is alles net zo als in Firefox.

Wat kan ik er aan doen? Dus dat het in IE8 ook normaal wordt gezien? (behalve geen plaatjes meer neerzetten met over de hele breedte wit)

Meer info:
blog is gemaakt in Wordpress 3.5.1
Thema is Small Business Theme

 

[Naarling]

Je gebruikt op een aantal plaatsen rgba (doorzichtige) achtergrondkleuren, IE8 en lager hebben daar geen ondersteuning voor. Je kunt dit op twee manieren oplossen. Het makkelijkst is om in de CSS, voordat de rgba kleur wordt opgegeven een solide kleur op te geven (#000 bijvoorbeeld) IE8 gebruikers zullen dan een minder mooie achtergrond zien, maar het maakt de tekst wel leesbaar. Een andere oplossing is om een doorzichtige png afbeelding als achtergrond te gebruiken.

Er staat linksboven trouwens inderdaad en <img > element, met een leeg src attribuut. Verschillende browsers gaan daar op verschillende manieren mee om.

 

[femke98]

Het thema geeft een zwarte achtergrond standaard. Als ik dat ga veranderen dan zien wij het toch weer verkeerd?
Ik nap dat van de rgb kleur niet, want ik ga dat zwarte niet veranderen.

Ik denk dat ik dan beter de plaatjes op het formaat kan houden zoals je op het screenshot ziet. Dus niet over de hele breedte.

En hoe zorg ik er voor dat het element niet weergegeven wordt?

 

[Naarling]

Het thema geeft een zwarte achtergrond standaard. Als ik dat ga veranderen dan zien wij het toch weer verkeerd?

Nope
Als zoiets als dit doet

.element{
  background-color:#000;
  background-color:rgba(0, 0, 0, 0.75);
}

Dan zullen oude versies van IE een ondoorzichteige zwarte achtergrondkleur laten zien. De tweede background-color opdracht begrijpen ze niet en die zullen ze dus negeren. Bij moderne browsers zal de tweede background-color opdracht de eerste vervangen, zij zullen dus een zwarte achtergrond laten zien met een opacity van 75%.

En hoe zorg ik er voor dat het element niet weergegeven wordt?

Ik ken dat thema niet dus ik zou je niet kunnen vertellen waar en in welk bestand dat lege element staat. Misschien dat ze je hier kunnen helpen.

 

[femke98]

Bedankt voor je uitleg. Ik heb van degene die het dus anders ziet in IE8 begrepen dat hij zijn IE8 niet kan updaten naar IE9 of IE10, omdat dat hij nog XP draait en dat kan dus niet.
Ik zelf heb Linux Mint en heb Firefox versie 19.0

Zoals gezegd op mijn netbook met Windows 8 staat IE10.
Ik denk dat ik het maar zo laat; ik zal dus geen grotere afbeeldingen meer nemen die over de hele breedte wit is. Voor die paar mensen die IE8 hebben (misschien zijn het er wel een hele boel, dat weet ik niet) is het op deze manier goed te zien, als ik de plaatjes hou zoals nu te zien is op de screenshots.

Het kruisje in de hoek zie ik trouwens op IE10 ook niet, dus dat laat ik dan ook maar zoals het is. (ik kijk wel even of ik het kan vinden in het thema, wellicht staat er in de files wel een verwijzing naar. Ik weet trouwends dat ik daar plaatjes kan neerzetten, in het thema kan je headers uploaden, maar ik heb dit dus niet gedaan. Wanneer ik dat wel zou doen, is het probleem wel weg natuurlijk. Ik kijk daar wel even naar.)

bedankt zover voor je hulp!

 

[femke98]

Toch nog even in de files gekeken, en ik vind onderstaande dus.
Dit heeft met de slider te maken en ik zie de achtergrond kleur #333333, dat id dus het grijs.
Verderop staat dan nog iets met de rgba, maar ik weet da niet wat ik moet veranderen.

#slider {
    background: url("images/slide-shadow.png") no-repeat scroll center bottom transparent;
    margin: 20px auto;
    position: relative;
    width: 930px;
	height: 399px;
}

#slideshow {
    background: #333333;
    position: relative;
    width: 930px;
	height: 354px;
}

#slideshow,
#slideshow a,
#slideshow h2 {
    color: #EEEEEE;
}

#slideshow img.attachment-slide-thumb {
	position:absolute;
}

#slideshow .post-slide {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    margin: 70px 0 0 465px;
    padding: 20px;
    position: absolute;
    text-align: left;
    width: 425px;
	border-radius: 10px 0 0 10px;
}

#slideshow .read-more {
	display: none\9;
}


ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
#slideshow ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999; margin: 10px auto; display: table;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

ul.bjqs-controls li a.bjqs-prev {
	background: url("images/prev.png") no-repeat scroll left top transparent;
    height: 42px;
    left: 10px;
    margin-top: -15px;
    opacity: 0.3;
	filter:alpha(opacity=30); /* For IE8 and earlier */
    overflow: hidden;
    position: absolute;
    text-indent: -9999em;
    top: 50%;
    width: 42px;
    z-index: 100;
}

ul.bjqs-controls li a.bjqs-next {
	background: url("images/next.png") no-repeat scroll left top transparent;
    height: 42px;
    margin-top: -15px;
    opacity: 0.3;
	filter:alpha(opacity=30); /* For IE8 and earlier */
    overflow: hidden;
    position: absolute;
    right: 10px;
    text-indent: -9999em;
    top: 50%;
    width: 42px;
    z-index: 100;
}

ul.bjqs-controls li a.bjqs-prev:hover,
ul.bjqs-controls li a.bjqs-next:hover {
	opacity: 0.5;
	filter:alpha(opacity=90); /* For IE8 and earlier */
}

ol.bjqs-markers li a {
	background: #333333;
	border-radius: 50px;
    display: inline-block;
    height: 14px;
    margin: 4px;
   	text-indent: -9999px;
    width: 14px;
	opacity: .7;
}

ol.bjqs-markers li.active-marker a {
	background: #fc542b;
}

 

[Naarling]

#slideshow .post-slide {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    margin: 70px 0 0 465px;
    padding: 20px;
    position: absolute;
    text-align: left;
    width: 425px;
	border-radius: 10px 0 0 10px;
}

Moet dus worden

#slideshow .post-slide {
    background: none repeat scroll 0 0 #000;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    margin: 70px 0 0 465px;
    padding: 20px;
    position: absolute;
    text-align: left;
    width: 425px;
	border-radius: 10px 0 0 10px;
}

Het klopt trouwens inderdaad dat mensen met WinXP niet verder kunnen komen dan IE8, maar ik zou diegene dan toch aanraden om een andere, morderne, browser te gebruiken. De nieuwste versies van Opera, Chrome en Firefox doen het allemaal op XP.

 

[femke98]

Ja, dat heb ik al gezegd, dat ze beter Firefox kunnen gaan gebruiken. Maar ja, geen idee of ze wel weten hoe en wat. Ze kunnen in ieder geval altijd bij mij terecht om te vragen hoe.

Bedankt voor de code, ik zal morgen eens kijken hoe dat er uit gaat zien, ik kan het altijd nog terug draaien.
Ik laat het je weten!

 

[femke98]

Zo net uitgeprobeerd maar gelijk weer terug gedraaid. De website werd niet meer geladen, duurde ik denk wel 2 minuten!
En dat moeten we niet hebben. Nu ik het weer weggehaald heb, laad de website weer snel.

De mensen met IE8 kunnen de.....nee, ik zeg het war vriendelijker..................voor de mensen met IE8 is het jammer, maar helaas.