verschil in weergave tussen browsers

Status
Niet open voor verdere reacties.
M

Merijnbosma

Gebruiker
Lid geworden
7 jun 2011
Berichten
189
Hallo,

ik heb een simpele pagina gemaakt en ik heb hem getest in chrome en ziet er perfect uit en werkt ook goed maar kwam er toevallig achter dat bij explorer er lelijke randen om mijn afbeeldingen zitten en een afbeelding lelijk wordt weergegeven.
In mozzilla heb ik geen randen maar geeft ie een afbeedling nog wel lelijk weer.

Wat is de oorzaak en hoe los ik dit op?

PHP: 
<html>

    <head>

        <title>Open dag Wifocarr 2011</title>

        </head>

    <body background="http://www.wifocarr.nl/downloads/Open%20dag%202011/Opera-Background-Wood.jpg" width="100%">
		<table height="10" width="100%" bgcolor="#ffffff">
		<tr height="7"></tr>
		<td width="100%" bgcolor="#393842" height="10" ></td>
		</table>
			
			<table width="100%" border="0" bgcolor="#ffffff">
			<tr>
			<td><center><a href="http://www.wifocarrshop.nl"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/OpendagWifocarr2011/wifocarr%20(1).png" vspace="3" height="150"></center></a></td>
			</tr>
			<tr>
			<td width="100%" bgcolor="#393842" height="10" ></td>
			</tr>
			<tr height="7"></tr>
			</table>
			
		<br/><br/><br/><br/>
			
		<center>
			
			<table border="3" bgcolor="cecfce">
			<tr>
				<td class="thumbcell"><a href="http://www.wifocarr.nl/downloads/Open%20dag%202011/diashow%20open%20dag.php"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/diavoorstelling%20open%20dag.png" vspace="25" hspace="50" height="200"></a></td>
				<td class="thumbcell"><a href="http://www.wifocarr.nl/downloads/Open%20dag%202011/diashow%20ota.php"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/diavoorstelling%20najaarsrit%20ota.png" vspace="25" hspace="50" height="200"></a></td>
			</tr>
			<tr>
				<td class="thumbcell"><a href="http://www.wifocarr.nl/downloads/Open%20dag%202011/OpendagWifocarr2011/index.html"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/foto%20index%20open%20dag.png" vspace="25" hspace="50" height="200"></a></td>
				<td class="thumbcell"><a href="http://www.wifocarr.nl/downloads/Open%20dag%202011/NajaarsritOTA2011/index.html"><img src="http://www.wifocarr.nl/downloads/Open%20dag%202011/foto%20index%20najaarsrit%20ota.png" vspace="25" hspace="50" height="200"></a></td>
			</tr>
			</table>
						
		</center>
    </body>

</html>

En dan zit ik nog met de diavoorstellingen die ik nu apart naast elkaar heb op de server waardoor ik dus een tussenpagina heb na het klikken in het menu.
Hiervoor heb ik een vraag gepost in een ander forum en miss dat iemand die hier kijkt het antwoord daar ook wel op weet.

Mvg Merijn
 
Hoi Merijn,
Als je dit regeltje CSS in je code plakt, ben je van de blauwe randen af:
Code: 
a img {border: 0;}
Dat doe je door het als volgt in een <style>-tag op te nemen in de <head>:
HTML: 
<head>
     <title>Open dag Wifocarr 2011</title>

     <style type="text/css">
          a img {border: 0;}
     </style>
</head>
Betekent: als er een afbeelding <img> komt die in een link <a> op de pagina zit, dan mag er geen rand getoond worden. Dat geldt dan voor alle afbeeldingen in een link op de pagina. Zo kan je met één regeltje de stijl van alle afbeeldingen tegelijk veranderen (en nog veel meer).
Dat is "de pure kracht van CSS" ! :)

====
Het soms lelijke logo zit 'm in het formaat ervan. Dat is in werkelijkheid 1717*708px groot, maar wordt op het scherm maar in een formaat van 150px hoog (en 350px breed) weergegeven. Dan moeten de browsers het gaan verkleinen, en dat kunnen browsers niet zo goed als tekenprogramma's.
Het beste kan je daarom een web-afbeelding eerst in een tekenprogramma precies op ware schermgrootte maken. Zoals deze:

wifocarr-logo365x150.png

download: wifocarr-logo365x150.png
​

Nu kunnen de browsers er niets meer aan verpesten. :)
Extra voordeel: het origineel was 436kB, de nieuwe is maar 11kB. Dat is dus maar 2,5% van wat het was. *) En dat maakt de pagina prettig sneller op het scherm!

Met vriendelijke groet,
CSShunter
__________
*) Wat hier een erg grote rol speelt: vergroten of verkleinen van afbeeldingen of foto's werkt kwadratisch door op het oppervlak (en dus op het aantal nodige pixels / beeldschermpunten).
Een twee keer zo kleine afbeelding is niet half zo groot in oppervlak, maar maar 1/4:

kwadratisch-kleiner.png

kwadratisch kleiner !​

Een foto die 3x zo smal is (en ook 1/3 van de hoogte), heeft maar een 1/9 van het oppervlak nodig, 4x zo groot is 16x zoveel pixels nodig, enz.
Dat kan aardig oplopen!
 
Hey :)

bedankt voor de snelle reactie en de supergoede uitleg (Y)
helemaal fantastisch.

Een probleem oplossen is altijd leuk maar dat ik nu ook weet wat er fout gaat en waarom iets fout gaat. Nu leer ik ook nog wat ;)

hartstikke bedankt.

Cheers!!!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan