Website ziet er anders uit in internet explorer

Status
Niet open voor verdere reacties.
S

soccerke

Gebruiker
Lid geworden
3 apr 2012
Berichten
20
Hallo,

Ik ben een website aan het maken en in firefox en chrome ziet hij er helemaal goed uit, maar in internet explorer herkent hij precies het lettertype niet meer, terwijl hij dit eerst wel deed.
Ook staat er een kader rond mijn foto's in internet explorer maar in firefox en chrome niet.
Je kan de website vinden op
http://users.telenet.be/fridobroekx/FSTrading/

CSS:

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

a {
	color: #9EC64E;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

body {
	background: #000000 url(images/bg.jpg) repeat-x top left;
	color: #C2C2C2;
	font-size: 13pt;
	line-height: 1.75em;
}

body,input {
	font-family: Georgia, serif;
}

br.clear {
	clear: both;
}

form {
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4 {
	font-weight: normal;
	text-transform: uppercase;
}

h2 {
	font-size: 18px;
}

h2,h3,h4 {
	color: #FFF;
	font-family: "Patua One", serif;
	margin-bottom: 1em;
}

h3 {
	font-size: 1.25em;
}

h4 {
	font-size: 1.05em;
}

img.left {
	float: left;
	margin: 8px 20px 20px 0;
}

img.up {
	float: left;
	margin: 65px 0 0 165px;
}

img.top {
	margin: 8px 0 20px 0;
}

label.login {
	display: block;
	margin: 0 0 6px 0;
}

p {
	margin-bottom: 1.5em;
}

ul {
	margin-bottom: 1.5em;
}

ul h4 {
	margin-bottom: 0.35em;
}

.form {
	margin: 0 0 32px 0;
}

.gallery ul.gallery_sidebar li, #footerContent ul.gallery_footer li {
	border: none  !important;
	display: block;
	float: left;
	margin: 0 10px 10px 0;
	padding: 0  !important;
}

.gallery ul.gallery_sidebar, #footerContent ul.gallery_footer {
	list-style: none;
	margin: 0;
	padding: 0;
}



#main img {
	padding: 8px;
}

#banner {
	margin: -10px 0 0 0;
	padding: 0;
	position: relative;
	width: 1180px;
}

#box1 {
	margin: 0 0 0 0;
	overflow: hidden;
}

#box2 {
	margin: 0 0 24px 0;
	overflow: hidden;
}

#box3 {
	overflow: hidden;
}

#content {
	float: right;
	padding: 0;
	width: 718px;
}

#copyright {
	margin: 0 0 0 0;
	
	text-align: center;
}

#copyright a {
	color: #C2C2C2;
	text-decoration: none;
}

#footer {
	color: #D3D3D3;
	margin: 32px 0 0 0;
	padding: 32px;
	position: relative;
	width: 1116px;
}

#footer a {
	color: #E4E4E4;
}

#footer h2, #footer h3, #footer h4 {
	color: #E4E4E4;
}

#footer ul {
	list-style: none;
}

#footer ul li {
	border-top: dashed 1px #4A494B;
	padding: 12px 0 12px 0;
}

#footer ul li.first {
	border-top: 0;
	padding-top: 0;
}

#footerContent {
	float: right;
	width: 368px;
}

#footerSidebar1 {
	float: left;
	width: 350px;
}

#footerSidebar2 {
	margin: 0 32px 0 374px;
	width: 350px;
}

#header {
	margin-top:10px;
	height: 106px;
	position: relative;
	width: 1116px;
}

#logo {
	height: 106px;
	left: 32px;
	position: absolute;
	top: 32px;
}

#logo a {
	color: #FFF;
	text-decoration: none;
}

#logo a span {
	color: #9ec64e;
}

#logo h1 {
	font-family: "Patua One", serif;
	font-size: 2.5em;
}

#main {
	margin: 20px 0 0 0;
	padding: 30px 30px 0 30px;
	position: relative;
	width: 1116px;
}

#main .sectionList {
	list-style: none;
	padding-left: 0;
}

#main .sectionList li {
	clear: both;
	padding: 20px 0 20px 0;
}

#main ul {
	list-style: none;
}

#main ul li {
	border-top: dashed 1px #4A494B;
	padding: 12px 0 12px 0;
}

#main ul li.first {
	border-top: 0;
	padding-top: 0;
}

#nav {
	font-family: "Patua One", serif;
	height: 8px;
	line-height: 80px;
	position: absolute;
	top: 350px;
	margin-bottom: 100px;
	
}

#nav a {
	color: #E4E4E4;
	font-size: 16pt;
	text-decoration: none;
	text-transform: uppercase;
}

#nav .active a {
	color: #9ec64e;
}

#nav ul {
	list-style: none;
	padding: 0 16px 0 16px;
}

#nav ul li {
	display: inline;
	padding: 0 5px 0 5px;
}

#nav ul li :hover{
	color: #9ec64e;
}

#outer {
	margin: 10px auto 0 auto;
	position: relative;
	width: 1180px;
}

#search input.button {
	background: #9EC64E;
	border: 0;
	color: #FFF;
	font-family: "Patua One", serif;
	margin-left: 1em;
	padding: 4px;
}

#search input.text {
	border: dashed 1px #4A494B;
	padding: 8px;
}

#sidebar1 {
	float: left;
	padding: 0;
	width: 350px;
}

/*****************************************************************************
/ SliderTron
*****************************************************************************/

	#slidertron
	{
		width: 1180px;
		height: 356px;
		position: relative;
	}

	#slidertron .navigation
	{
		position: absolute;
		display: block;
		z-index: 100;
		color: #ffffff;
		top: 315px;
		right: 210px;
		margin: 10px;
		padding: 10px;
		background-color: #303030;
		opacity: 0.75;
	}

	#slidertron .navigation a
	{
		color: #ffffff;
		text-decoration: none;
		outline: none;
	}

	#slidertron .viewer
	{
		width: 1180px;
		height: 375px;
	}

	#slidertron .viewer .reel .slide
	{
		position: relative;
		width: 780px;
		height: 375px;
			opacity: 0.25;
	}

	#slidertron .viewer .reel .slide-active
	{
		opacity: 1.00;
	}

	#slidertron .viewer .reel .slide span
	{
		position: absolute;
		display: block;
		width: 780px;
		opacity: 0.40;
		height: 30px;
		background-color: #000000;
		bottom: 39px;
		left: 0px;
	}

	#slidertron .indicator
	{
		bottom: -20px;
		right: 10px;
		position: absolute;
		text-align: center;
		margin: 0;
		padding: 0;
		font-size: 6px;
	}

	#slidertron .indicator ul
	{
		margin: 0;
		list-style: none;
		padding: 0;
	}

	#slidertron .indicator ul li
	{
		display: inline-block;
		background: #d0d0d0;
		color: #303030;
		width: 10px;
		height: 10px;
		margin: 0 10px 0 0;
		text-indent: -9999px;
		border-radius: 10px;
	}

	#slidertron .indicator ul li.active
	{
		background: #9ec64e;
		color: #d0d0d0;
	}

	#slidertron .captionLine1
	{
		font-size: 1.25em;
		font-weight: bold;
		text-align: center;
		position: absolute;
		bottom: 50px;
		right: 230px;
		color: #FFF;	
		text-shadow: 2px 2px 3px #000;
		font-family: "Patua One", serif;
		font-size: 1.75em;
	}

	#slidertron .captionLine2
	{
		position: absolute;
		bottom: 20px;
		right: 200px;
		font-size: 1em;
		font-family: "Patua One", serif;		
		width: 720px;	
		text-align: right;
		padding: 0 30px;
		color: #fff;
	}
	
/*****************************************************
  Poptrox
*****************************************************/

.poptrox_popup
{
	position: relative;
	padding: 1em 1em 3em 1em;
	background: #000000 url(images/bg.jpg) repeat-x top left;
}

.poptrox_popup .loader
{
	display: block;
	margin: 55px 0 0 0;
	text-indent: -9999em;
	background: url('loader.gif') top center no-repeat;
}

.poptrox_popup .caption
{
	position: absolute;
	bottom: 1em;
	left: 1em;
}

.poptrox_popup .closer
{
	position: absolute;
	bottom: 1em;
	right: 1em;
}

HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<title>Scoeter.be || Home</title>
		<link href="http://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="fwt.css" />
		
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.slidertron-0.3.1.js"></script>
		<script type="text/javascript" src="js/jquery.poptrox-0.1.js"></script>
		
	</head>
	<body>
		<div id="outer">
			<div id="header">
				<div id="logo">
					<h1><a href="#">Scoeter<span>.be</span></a></h1>
				</div>
				<img class="up" src="images/logo.png" alt="" height=30px; />
			</div>
			<div id="banner">

					<div id="slidertron">

						<div class="viewer">
							<div class="reel">
								<div class="slide">
									<img src="images/1.jpg" alt="">
									<span></span>
									<a href="/1/" class="link">More ...</a>
									
								</div>
								<div class="slide">
									<img src="images/2.jpg" alt="">
									<span></span>
									<a href="/2/" class="link">More ...</a>
									
								</div>
								<div class="slide">
									<img src="images/3.jpg" alt="">
									<span></span>
									<a href="/3/" class="link">More ...</a>
									
								</div>
								<div class="slide">
									<img src="images/4.jpg" alt="">
									<span></span>
									<a href="/4/" class="link">More ...</a>
									
								</div>
								<div class="slide">
									<img src="images/5.jpg" alt="">
									<span></span>
									<a href="/5/" class="link">More ...</a>
									
								</div>
							</div>
						</div>
						<div class="indicator">
							<ul>
								<li class="active">1</li>
								<li>2</li>
								<li>3</li>
								<li>4</li>
								<li>5</li>
							</ul>
							<br class="clear" />
						</div>
						<div class="captionLine1"></div>
						<div class="captionLine2"></div>
					</div>
					
					<script type="text/javascript">

						$('#slidertron').slidertron({
							viewerSelector:			'.viewer',
							reelSelector:			'.viewer .reel',
							slidesSelector:			'.viewer .reel .slide',
							indicatorSelector:		'.indicator ul li',
							//navPreviousSelector:	'.previous',
							//navNextSelector:		'.next',
							//navFirstSelector:		'.first',
							//navLastSelector:		'.last',
							//navStopAdvanceSelector:	'.stop',
							//navPlayAdvanceSelector:	'.play',
							advanceDelay:			3000,
							speed:					'slow',
							viewerOffset:			200,
							activeSlideClass:		'slide-active',
							slideLinkSelector:		'.link',
							captionLines:			2,
							captionLineSelector:	'.captionLine',
							slideCaptionSelector:	'.caption'
						});
						
					</script>			
			
					<br class="clear" />
				<div id="nav">
					<ul>
						<li class="first active">
							<a href="index.html">Home</a>
						</li>
						<li>
							<a href="scooters.html">Scooters</a>
						</li>
						<li>
							<a href="elektrischefietsen.html">Elektrische fietsen</a>
						</li>
						<li>
							<a href="accessoires.html">Accessoires</a>
						</li>
						<li>
							<a href="extraservices.html">Extra services</a>
						</li>
						<li>
							<a href="overscoeter.html">Over scoeter.be</a>
						</li>
						<li>
							<a href="contact.html">Contact</a>
						</li>
					</ul>
					<br class="clear" />
				</div>
			</div>
			<div id="main">
				<div id="content">
					<div id="box1">
						
							<h2>Home</h2>
							
							<img class="left" src="images/bellaretroscooter.png" alt="" />
							<p>
								Scoeter.be verkoopt scooters van het merk VOM. Dit is een Nederlandse merk voor retroscooters naar Italiaans design. 
								Op scoeter.be vindt u kwalitatieve retroscooters tegen een betaalbare prijs! Alle scooters gebruiken moderne technieken en voldoen aan de comfortstandaarden.
								Onze scooters voldoen aan de Europese richtlijnen en milieueisen en zijn uiteraard allemaal RDW goedgekeurd.
								
							</p>
							<p>
							Er zijn verschillende redenen waarom meer en meer mensen graag op een scooter rijden. Een reden kan zijn om het drukke verkeer te omzeilen en om parkeerproblemen te mijden, 
							of omdat het ontspannend is en een vrij gevoel geeft. Een andere reden kan natuurlijk zijn om het milieu te sparen. Wat ook uw reden is om graag met een scooter te rijden, 
							de scooters van scoeter.be helpen u daarbij en brengen u zonder problemen naar elke plek die u wenst. Scoeter.be biedt verschillende modellen in allerlei kleuren aan. 
							Bijna al onze scooters zijn uit voorraad leverbaar opdat u zo snel mogelijk kunt geniet van uw scooter. Regelmatig komen er nieuwe scooters bij in ons assortiment om aan al 
							uw wensen te voldoen. Ook bieden wij accesoires voor onze scooters aan om het scooter rijden nog comfortabeler te maken voor u.</p>
							</p>
							
						
					</div>

					<br class="clear" />
				</div>
				<div id="sidebar1">
				
					<div class="widget">
						<div class="gallery">
							<h2>Scooters</h2>
							<ul id="pics" class="gallery_sidebar">
								<li>
									<a href="images/beau retro wit.jpg"><img title="beau retro wit" src="images/beau retro wit.jpg" width="60" height="60" alt="" /></a>
								</li>

								<li>
									<a href="images/bella classic antraciet.jpg"><img title="bella classic antraciet" src="images/bella classic antraciet.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/bella exclusive wit.jpg"><img title="bella exclusive wit" src="images/bella exclusive wit.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/bella exclusive zwart.jpg"><img title="bella exclusive zwart" src="images/bella exclusive zwart.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/bella milano bruin.jpg"><img title="bella milano bruin" src="images/bella milano bruin.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/bella retro sport wit.jpg"><img title="bella retro sport wit" src="images/bella retro sport wit.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/bella retro wit.jpg"><img title="bella retro wit" src="images/bella retro wit.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/fxs 50 antraciet.jpg"><img title="fxs 50 antraciet" src="images/fxs 50 antraciet.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/legend zwart.jpg"><img title="legend zwart" src="images/legend zwart.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/milano bruinwit.jpg"><img title="milano bruin-wit" src="images/milano bruinwit.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/venice wit.jpg"><img title="venice wit" src="images/venice wit.jpg" width="60" height="60" alt="" /></a>
								</li>
								<li>
									<a href="images/xrace roodwit.jpg"><img title="xrace roodwit" src="images/xrace roodwit.jpg" width="60" height="60" alt="" /></a>
								</li>
							</ul>
							
							<script type="text/javascript">
								$('#pics').poptrox();
							</script>
							
						</div>
						<br class="clear" />
					</div>
					<div class="widget">
						
						<p>
						Voor meer info over onze scooters, klik op 'modellen' in de menubalk. Daar vindt u alle scooters die wij aanbieden.
						</p>
					</div>
					
				</div>
				<br class="clear" />
			</div>

		</div>
		<div id="copyright">
			<a href="mailto:dorien.broekx@gmail.com">&copy Dorien Broekx</A>
		</div>
</body>
</html>

Weet iemand de oplossing voor mijn probleem?

Alvast bedankt!
 
Laatst bewerkt door een moderator:
Hoi soccerke,
Of het de oplossing is weet ik niet, maar zowel de html als de css hebben een paar foutjes.
  • Bv. het logo heeft een height=30px, wat moet zijn height="30".

Ik zou om te beginnen de html- validator en de css-validator even hun zegje laten doen (links zie m'n handtekening).

Met vriendelijke groet,
CSShunter
 
Dit is een blijvend probleem in verschillende browsers...
Probeer je code zo clean mogelijk te houden en constant bij de bouw per element te testen in verschillende browser versies...

Gebruik hiervoor;
- IEtester
- Chrome
- Firefox
- Internet Explorer
- Safari

Met Chrome en Safari kan je ook tablets en telefoons 'imiteren' (nooit 100% gelijk helaas)
 
Sommige browsers of browser-versies plaatsen een 2px brede border om een img heen als dat in een link zit.
Voor het wegkrijgen van het kaderlijntje om de foto's voeg je aan de css toe:
Code: 
a img {
    border: 0;
    }
Nu heeft een img in een link nooit een border. :)
 
Hey,

Ik had alles lokaal aangepast en alles zag er in de 3 browsers hetzelfde uit, maar nu zet ik hem online en klopt de fotoslideshow vanboven niet in internet explorer.
Ik krijg dus lokaal en online een verschillende versie in internet explorer. Hoe kan ik dit oplossen?

Alvast bedankt voor al jullie hulp!
 
Hoi soccerke,
Wat gaat er precies mis met de slideshow als je 'm online hebt staan?
En om welke versie van Internet Explorer gaat het: IE7, IE8 of IE9?
 
csshunter zei:
Hoi soccerke,
Wat gaat er precies mis met de slideshow als je 'm online hebt staan?
En om welke versie van Internet Explorer gaat het: IE7, IE8 of IE9?
Klik om te vergroten...

De bolletjes die aangeven welke foto het is zijn vierkantjes ipv rondjes en staan verticaal ipv horizontaal.
Ook het transparante grijze balkje over de foto is in IE gewoon zwart.
Ik gebruik IE9.
 
Over de niet-transparante balk

Volgens Netrenderer geeft IE9 wel een transparante balk weer.
Staat jouw IE9 misschien in de "compatibility-mode"?
  • Dan wordt een site gerenderd alsof het IE8 is, en IE8 (en IE7) kennen niet de eigenschap opacity, waarmee de transparantie is ingesteld.
  • In dat geval (en in IE7 en IE8) wordt er behalve de zwarte balk ook geen transparantie gemaakt voor de stukjes van de vorige/volgende afbeelding die links en rechts van het middenplaatje zitten.

Voor de opacity in oudere IE's is een (IE-only) filter nodig.
Daarvoor moet de css dan zijn (zie quirksmode):
Code: 
#slidertron .navigation
    {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; // first!
    filter: alpha(opacity=75);                                        // second!
    opacity: 0.75;
    }
#slidertron .viewer .reel .slide
    {
    ...
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; // first!
    filter: alpha(opacity=25);                                        // second!
    opacity: 0.25;
    }
#slidertron .viewer .reel .slide-active
    {
    ...
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; // first!
    filter: alpha(opacity=100);                                        // second!
    opacity: 1.00;
    }
#slidertron .viewer .reel .slide span
    {
    ...
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; // first!
    filter: alpha(opacity=40);                                        // second!
    opacity: 0.40;
    }
De transparante balk zou je trouwens ook helemaal kunnen weghalen, omdat er toch geen tekst in staat:
Code: 
#slidertron .viewer .reel .slide span
    {
    ...
    display: none;
    }

Met vriendelijke groet,
CSShunter
___________
PS: Ik zou het tempo van de slider iets minder hoog maken, want nu moet je wel heel vlug kijken voordat het plaatje weer weg is. ;)
 
Ha, ik zie dat je de semi-transparante balk hebt weggehaald, en ook de semi-transparante stukjes vorige/volgende aan de zijkanten.
Dan ben je met ere van alles af, en het oogt een stuk rustiger! :thumb:

PS:
Ik zou nog wel het background-image horizontaal centreren, en ook niet laten herhalen: zodat er (afhankelijk van de resolutie) geen vage grijs-zwarte strook aan de rechterkant kan ontstaan, met de css:
Code: 
body {
    ...
    background: #000000 url(images/bg.jpg) no-repeat 50% 0;
    }
  • Screenshots verschil bij een resolutie van 1280*1024px: scoeter-bg.png

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hey,

Ik heb inderdaad al het semi-transparante eruit gegooid en vind het er zelf ook beter uitzien zo!

Bedankt voor de tip, dit heb ik ook even aangepast!

Ik zit wel nog met enkele probleempjes waar ik maar niet uitgeraak:
- Op de pagina scooters heb ik gebruik gemaakt van tabellen en heb ik er een border omheen gezet. Maar enkel de buitenranden mogen een border hebben, de binnenranden niet. Lokaal werkt dit wel, maar als ik de website dan online zet heeft hij in internet explorer ook binnenranden.

- Ik zit nog steeds met het probleem dat in de banner de rondjes die aangeven welke foto het is vierkantjes zijn en verticaal staan in internet explorer als ik hem online zet, lokaal is dit ook weer niet.

Heb jij enig idee hoe ik dit kan oplossen? Want ik snap echt niet hoe er nu verschil kan zijn in internet explorer tussen lokaal en online.

Alvast bedankt!


csshunter zei:
Ha, ik zie dat je de semi-transparante balk hebt weggehaald, en ook de semi-transparante stukjes vorige/volgende aan de zijkanten.
Dan ben je met ere van alles af, en het oogt een stuk rustiger! :thumb:

PS:
Ik zou nog wel het background-image horizontaal centreren, en ook niet laten herhalen: zodat er (afhankelijk van de resolutie) geen vage grijs-zwarte strook aan de rechterkant kan ontstaan, met de css:
Code: 
body {
    ...
    background: #000000 url(images/bg.jpg) no-repeat 50% 0;
    }
  • Screenshots verschil bij een resolutie van 1280*1024px: scoeter-bg.png

Met vriendelijke groet,
CSShunter
Klik om te vergroten...
 
Hoi soccerke,

De rondjes van de slidertron en hun positie
Dit verschilt in Internet Explorer per versie!
De resultaten van de verschillende versies zijn te bewonderen via Netrenderer:
  • IE7: vierkantjes en verticaal.
  • IE8: vierkantjes en horizontaal.
  • IE9: rondjes en horizontaal.
  • Oudere Firefox: vierkantjes en horizontaal.
  • Chrome, Opera en Safari en waarschijnlijk ook laatste versie(s) Firefox: rondjes en horizontaal.
De oorzaak van het verschil in rondjes en vierkantjes zit in het gebruik van css3 (de border-radius eigenschap): IE7 en IE8 ondersteunen die eigenschap domweg niet, IE9 wel.
De oudere Firefox is te helpen door toevoeging van: {-moz-border-radius: 10px;}.
Het verticaal staan bij IE7 kan met wat aanpassingen in de css gecorrigeerd worden.



Heel erg storend vind ik het verschil rond/vierkant trouwens niet. De IE7 en IE8 surfers zien ook niet het verschil en weten niet beter als ze niet op een andere browser overschakelen. ;)
Maar desnoods zouden er met een background-image ipv de border-radius toch cross-browser rondjes van gemaakt kunnen worden.

=======
... ik snap echt niet hoe er nu verschil kan zijn in internet explorer tussen lokaal en online.
Klik om te vergroten...
Ik ook niet. Bekijk je online en lokaal op dezelfde machine (met dezelfde IE-versie)?
Zo ja, gaat het lokaal bekijken misschien via een preview in een html-editor als Dreamweaver o.i.d.? Of staat bij het online bekijken misschien de "compatibility-modus" aan, waardoor nieuwere IE's zich als oudere IE's gedragen? Of is misschien de cache van Tijdelijke Internet Bestanden niet geleegd, zodat je online steeds naar een oude versie zit te kijken?
Iets anders weet ik niet te verzinnen. - Maar m'n testpagina doet het in ieder geval online voor het horizontaal maken (in alle IE-versies).

=======
De binnenranden van de tabellen in IE
Die bewaar ik voor een andere keer. ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Mijn internet explorer staat niet in comptabiliteitsmodus en heb de cache leeggemaakt, maar het probleem blijft zich voordoen. Ik hoop dan maar dat dit enkel op mijn laptop het geval is :d

Ik heb die dingen die jij zei allemaal aangepast. Maar met die vierkantjes en rondjes ga ik dan maar zo laten, het is allebei nog wel mooi en mensen weten inderdaad niet dat het er soms anders uit ziet.

Ik zit dan alleen nog met die binnenranden in internet explorer. Heb hem op een andere pc getest met ie9 en daar heeft hij ook die binnenranden, terwijl netrender met ie9 geen binnenranden laat zien.

Heel erg bedankt voor de hulp!

csshunter zei:
Hoi soccerke,

De rondjes van de slidertron en hun positie
Dit verschilt in Internet Explorer per versie!
De resultaten van de verschillende versies zijn te bewonderen via Netrenderer:
  • IE7: vierkantjes en verticaal.
  • IE8: vierkantjes en horizontaal.
  • IE9: rondjes en horizontaal.
  • Oudere Firefox: vierkantjes en horizontaal.
  • Chrome, Opera en Safari en waarschijnlijk ook laatste versie(s) Firefox: rondjes en horizontaal.
De oorzaak van het verschil in rondjes en vierkantjes zit in het gebruik van css3 (de border-radius eigenschap): IE7 en IE8 ondersteunen die eigenschap domweg niet, IE9 wel.
De oudere Firefox is te helpen door toevoeging van: {-moz-border-radius: 10px;}.
Het verticaal staan bij IE7 kan met wat aanpassingen in de css gecorrigeerd worden.



Heel erg storend vind ik het verschil rond/vierkant trouwens niet. De IE7 en IE8 surfers zien ook niet het verschil en weten niet beter als ze niet op een andere browser overschakelen. ;)
Maar desnoods zouden er met een background-image ipv de border-radius toch cross-browser rondjes van gemaakt kunnen worden.

=======

Ik ook niet. Bekijk je online en lokaal op dezelfde machine (met dezelfde IE-versie)?
Zo ja, gaat het lokaal bekijken misschien via een preview in een html-editor als Dreamweaver o.i.d.? Of staat bij het online bekijken misschien de "compatibility-modus" aan, waardoor nieuwere IE's zich als oudere IE's gedragen? Of is misschien de cache van Tijdelijke Internet Bestanden niet geleegd, zodat je online steeds naar een oude versie zit te kijken?
Iets anders weet ik niet te verzinnen. - Maar m'n testpagina doet het in ieder geval online voor het horizontaal maken (in alle IE-versies).

=======
De binnenranden van de tabellen in IE
Die bewaar ik voor een andere keer. ;)

Met vriendelijke groet,
CSShunter
Klik om te vergroten...
 
Laatst bewerkt:
Vervolg: De binnenranden van de tabellen in IE
Ja, tabellen (en zoals hier: tabellen in tabellen!) gaven/geven bij IE altijd problemen. En tabellen zijn nu eenmaal moeilijk te stylen.
Maar er is uitkomst!
Het kan ook zonder tabellen, met alleen css voor de opmaak.
Sterker nog, het kan veel eenvoudiger met css ! :)
In plaats van dit:
HTML: 
...
<div id="box1">
    <h2>Scooters</h2>
        <table border="0">
            <tr>
                <td>
                    <div class="tabel">
                        <table frame = "border">
                            <tr>
                                <td colspan="2"><p>Bella Retro</p></td>
                            </tr>
                            <tr>
                                <td colspan="2"><img class="left" src="images/bella retro wit.jpg" alt="" height="200" width="200" /></td>
                            </tr>
                            <tr>
                                <td><a href="BellaRetro.html"><img class="left" src="images/meerinfo.png" alt="" height="40" width="100"/></a></td>
                                <td><p>€ 885,00</p></td>
                            </tr>
                        </table>
                    </div>	
                </td>
                <td>
                    <div class="tabel">
                        <table frame = "border">
                            <tr>
                                <td colspan="2"><p>Bella Retro Sport</p></td>
                            </tr>
                            <tr>
                                <td colspan="2"><img class="left" src="images/bella retro sport wit.jpg" alt="" height="200" width="200" /></td>
                            </tr>
                            <tr>
                                <td><a href="BellaRetroSport.html"><img class="left" src="images/meerinfo.png" alt="" height="40" width="100"/></a></td>
                                <td><p>€ 910,00</p></td>
                            </tr>
                        </table>
                    </div>
                </td>
                enz.
kan de html simpel worden:
HTML: 
...
<div id="box1">
    <h2>Scooters:</h2>

    <div>
        <h3>Bella Retro</h3>
        <img src="images/BellaRetro.png" alt="" />
        <p>€ 885,--</p>
        <a href="BellaRetro.html"><span>Meer over de Bella Retro</span></a>
    </div>

    <div>
        <h3>Bella Retro Sport</h3>
        <img src="images/BellaRetroSport.png" alt="" />
        <p>€ 910,--</p>
        <a href="BellaRetroSport.html"><span>Meer over de Bella Retro Sport</span></a>
    </div>

    enz.
Geen tabel te zien! :D

Het principe is als volgt:
Elke <div> binnen de <div id="box1"> is een gegevensblokje voor een bepaald type scooter. Hier zit het randje in.


  • Deze <div's> hoeven verder geen class of id te krijgen, want ze zijn allemaal hetzelfde, en zijn alleen het samenbindend element voor wat er in zit.
  • Ze zijn met css te benaderen via: #box1 div { ... }.
  • Om ze naast elkaar te krijgen, worden ze met {float:left;} vanaf de linkerkant tegen elkaar aan gezet; met een horizontale afstand tot de volgende via een {margin-right: 32px;}. Zo kunnen er precies 4 stuks op een rijtje.
  • Als de breedte op is, komt de volgende er bij een float automatisch onder: weer vanaf links beginnend. Met een {margin-bott0m: 32px;} die voor alle div's is opgegeven komen ze ook verticaal op een afstandje van elkaar.

Binnen elke div speelt zich telkens hetzelfde af:
  • Er is een kopregel <h3>, te benaderen met #box1 h3 { ... }. Deze kan gecentreerd worden voor de type-naam.
  • Daaronder komt het image, te benaderen met #box1 img { ... }. Ze zijn allemaal even groot, dus de width en de height kunnen in de css en hoeven dan niet in de html te komen; dan ben je in één keer voor allemaal tegelijk klaar.
  • Onder het <img> komt een regel <p> met de prijs. Die heeft een {float: right;} en drijft dus aan de rechterkant.
  • En tenslotte is er een losse link-knop <a> voor de Meer info. Deze komt vanzelf links naast de prijs, en heeft z'n image niet in de html staan; dat is als background-image in de css opgenomen. Ook dat scheelt weer het elke keer opnieuw moeten opnemen van het img in de html-code.
  • In de link is een <span> opgegenomen met een tekst-link die niet op scherm te zien is. Maar wel voor apparaten die niet het opschrift in het image kunnen zien: bv. de Google-bot, tekst-browsers en voorleesbrowsers.

Op deze manier kunnen er naderhand ook makkelijk nieuwe modellen aan worden toegevoegd: gewoon dezelfde formule in de html gebruiken en alles regelt zichzelf.
Dat is wel wat handiger dan het moeten uitkienen hoe het ook al weer zat met het toevoegen van een tabel in de tabel. ;)

De css voor het bovenstaande kan als volgt zijn:
Code: 
#box1 h2 {
	margin: 0 0 -20px 5px;
	padding: 0;
	}
#box1 div {
	float: left;
	width: 200px;
	margin: 32px 32px 0 0;
	padding: 10px 20px;
	background: #202020;
	border: 1px solid #808080;
	}
#box1 h3 {
	margin: 0;
	padding: 0;
	color: #C2C2C2;
	font-size: 1em;
	text-align: center;
	text-transform: none;
	}
#box1 img {
	width: 200px;
	height: 200px;
	margin: 5px 0;
	padding: 0;
	}
#box1 p {
	float: right;
	margin: 0;
	padding: 0;
	letter-spacing: .025em;
	}
#box1 a {
	display: block;
	width: 90px;
	height: 30px;
	background: url(images/meerinfo-nw.png);
	}
#box1 a span {
	position: absolute;
	left: 0;
	margin-left: -9999px;
	}
=======
Images
Over de te gebruiken images nog het volgende.
  • Maak deze met een tekenprogramma precies zo groot als ze op scherm moeten worden. Groter heeft geen zin (zelfs nadelig voor de kwaliteit), en dat maakt alleen het bestand onnodig groter dan nodig.
  • Als het niet nodig is, geen png's met transparantie gebruiken: daarvoor is een alpha-kanaal nodig dat ook extra bestandsgrootte oplevert.
  • En als het even kan, probeer dan ook of je toe kunt met 256 kleuren ipv 16 miljoen. Ook dat scheelt enorm in bestandsgrootte, en levert vaak nauwelijks of geen kwaliteitsverlies op het scherm op.

Concreet:
  • De scooter afbeelding bella%20retro%20wit.jpg is 148kB op formaat 500*500px.
  • Maar op scherm wordt dit gereduceerd tot 200*200px > er moeten (500*500 - 200*200 =) 210.000 overbodige pixels gedownload worden.
  • Voor het op maat gemaakte, scherpere en tot 256 kleuren teruggebracht image bella-placeholder.png van 200*200px is maar 18kB nodig.
  • Bij één image is het leed nog te overzien, maar als er 12 scooters van 148kB op een pagina staan, moet er 1.8MB aan images gedownload worden. Met de kleinere is het samen maar 216kB en een fiks snellere pagina!
  • De Meer info-knop kan het zonder semi-transparante stellen en ook op ware grootte toegediend worden: meerinfo-nw.png.

En een testpagina met de <div>'s ipv tabellen:

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hartelijk bedankt, dit is inderdaad veeeeeel makkelijker! :)
Ik had echt heel lang zitten zoeken op hoe ik dat nu het best kon doen, maar tabellen in tabellen was dus geen goed idee :)

csshunter zei:
Vervolg: De binnenranden van de tabellen in IE
Ja, tabellen (en zoals hier: tabellen in tabellen!) gaven/geven bij IE altijd problemen. En tabellen zijn nu eenmaal moeilijk te stylen.
Maar er is uitkomst!
Het kan ook zonder tabellen, met alleen css voor de opmaak.
Sterker nog, het kan veel eenvoudiger met css ! :)
In plaats van dit:
HTML: 
...
<div id="box1">
    <h2>Scooters</h2>
        <table border="0">
            <tr>
                <td>
                    <div class="tabel">
                        <table frame = "border">
                            <tr>
                                <td colspan="2"><p>Bella Retro</p></td>
                            </tr>
                            <tr>
                                <td colspan="2"><img class="left" src="images/bella retro wit.jpg" alt="" height="200" width="200" /></td>
                            </tr>
                            <tr>
                                <td><a href="BellaRetro.html"><img class="left" src="images/meerinfo.png" alt="" height="40" width="100"/></a></td>
                                <td><p>€ 885,00</p></td>
                            </tr>
                        </table>
                    </div>	
                </td>
                <td>
                    <div class="tabel">
                        <table frame = "border">
                            <tr>
                                <td colspan="2"><p>Bella Retro Sport</p></td>
                            </tr>
                            <tr>
                                <td colspan="2"><img class="left" src="images/bella retro sport wit.jpg" alt="" height="200" width="200" /></td>
                            </tr>
                            <tr>
                                <td><a href="BellaRetroSport.html"><img class="left" src="images/meerinfo.png" alt="" height="40" width="100"/></a></td>
                                <td><p>€ 910,00</p></td>
                            </tr>
                        </table>
                    </div>
                </td>
                enz.
kan de html simpel worden:
HTML: 
...
<div id="box1">
    <h2>Scooters:</h2>

    <div>
        <h3>Bella Retro</h3>
        <img src="images/BellaRetro.png" alt="" />
        <p>€ 885,--</p>
        <a href="BellaRetro.html"><span>Meer over de Bella Retro</span></a>
    </div>

    <div>
        <h3>Bella Retro Sport</h3>
        <img src="images/BellaRetroSport.png" alt="" />
        <p>€ 910,--</p>
        <a href="BellaRetroSport.html"><span>Meer over de Bella Retro Sport</span></a>
    </div>

    enz.
Geen tabel te zien! :D

Het principe is als volgt:
Elke <div> binnen de <div id="box1"> is een gegevensblokje voor een bepaald type scooter. Hier zit het randje in.


  • Deze <div's> hoeven verder geen class of id te krijgen, want ze zijn allemaal hetzelfde, en zijn alleen het samenbindend element voor wat er in zit.
  • Ze zijn met css te benaderen via: #box1 div { ... }.
  • Om ze naast elkaar te krijgen, worden ze met {float:left;} vanaf de linkerkant tegen elkaar aan gezet; met een horizontale afstand tot de volgende via een {margin-right: 32px;}. Zo kunnen er precies 4 stuks op een rijtje.
  • Als de breedte op is, komt de volgende er bij een float automatisch onder: weer vanaf links beginnend. Met een {margin-bott0m: 32px;} die voor alle div's is opgegeven komen ze ook verticaal op een afstandje van elkaar.

Binnen elke div speelt zich telkens hetzelfde af:
  • Er is een kopregel <h3>, te benaderen met #box1 h3 { ... }. Deze kan gecentreerd worden voor de type-naam.
  • Daaronder komt het image, te benaderen met #box1 img { ... }. Ze zijn allemaal even groot, dus de width en de height kunnen in de css en hoeven dan niet in de html te komen; dan ben je in één keer voor allemaal tegelijk klaar.
  • Onder het <img> komt een regel <p> met de prijs. Die heeft een {float: right;} en drijft dus aan de rechterkant.
  • En tenslotte is er een losse link-knop <a> voor de Meer info. Deze komt vanzelf links naast de prijs, en heeft z'n image niet in de html staan; dat is als background-image in de css opgenomen. Ook dat scheelt weer het elke keer opnieuw moeten opnemen van het img in de html-code.
  • In de link is een <span> opgegenomen met een tekst-link die niet op scherm te zien is. Maar wel voor apparaten die niet het opschrift in het image kunnen zien: bv. de Google-bot, tekst-browsers en voorleesbrowsers.

Op deze manier kunnen er naderhand ook makkelijk nieuwe modellen aan worden toegevoegd: gewoon dezelfde formule in de html gebruiken en alles regelt zichzelf.
Dat is wel wat handiger dan het moeten uitkienen hoe het ook al weer zat met het toevoegen van een tabel in de tabel. ;)

De css voor het bovenstaande kan als volgt zijn:
Code: 
#box1 h2 {
	margin: 0 0 -20px 5px;
	padding: 0;
	}
#box1 div {
	float: left;
	width: 200px;
	margin: 32px 32px 0 0;
	padding: 10px 20px;
	background: #202020;
	border: 1px solid #808080;
	}
#box1 h3 {
	margin: 0;
	padding: 0;
	color: #C2C2C2;
	font-size: 1em;
	text-align: center;
	text-transform: none;
	}
#box1 img {
	width: 200px;
	height: 200px;
	margin: 5px 0;
	padding: 0;
	}
#box1 p {
	float: right;
	margin: 0;
	padding: 0;
	letter-spacing: .025em;
	}
#box1 a {
	display: block;
	width: 90px;
	height: 30px;
	background: url(images/meerinfo-nw.png);
	}
#box1 a span {
	position: absolute;
	left: 0;
	margin-left: -9999px;
	}
=======
Images
Over de te gebruiken images nog het volgende.
  • Maak deze met een tekenprogramma precies zo groot als ze op scherm moeten worden. Groter heeft geen zin (zelfs nadelig voor de kwaliteit), en dat maakt alleen het bestand onnodig groter dan nodig.
  • Als het niet nodig is, geen png's met transparantie gebruiken: daarvoor is een alpha-kanaal nodig dat ook extra bestandsgrootte oplevert.
  • En als het even kan, probeer dan ook of je toe kunt met 256 kleuren ipv 16 miljoen. Ook dat scheelt enorm in bestandsgrootte, en levert vaak nauwelijks of geen kwaliteitsverlies op het scherm op.

Concreet:
  • De scooter afbeelding bella%20retro%20wit.jpg is 148kB op formaat 500*500px.
  • Maar op scherm wordt dit gereduceerd tot 200*200px > er moeten (500*500 - 200*200 =) 210.000 overbodige pixels gedownload worden.
  • Voor het op maat gemaakte, scherpere en tot 256 kleuren teruggebracht image bella-placeholder.png van 200*200px is maar 18kB nodig.
  • Bij één image is het leed nog te overzien, maar als er 12 scooters van 148kB op een pagina staan, moet er 1.8MB aan images gedownload worden. Met de kleinere is het samen maar 216kB en een fiks snellere pagina!
  • De Meer info-knop kan het zonder semi-transparante stellen en ook op ware grootte toegediend worden: meerinfo-nw.png.

En een testpagina met de <div>'s ipv tabellen:

Met vriendelijke groet,
CSShunter
Klik om te vergroten...
 
dood aan IE.

Dan zou het voor 'website-bouwers' allemaal een stukje makkelijker zijn...
 
Ho-ho!
Je hoort mij IE niet verdedigen, want vooral IE6 was bar en boos (om van eerdere IE's maar te zwijgen). IE7 en hoger zijn daarbij vergeleken heilig, en mijn uitpuilende gereedschapskist met trucs voor IE5, IE5.5 en IE6 staat bij mij lekker op zolder. ;)

Maar:
  • Als je een Doctype Strict, valid html en propere css gebruikt (bv. geen tabellen voor opmaak), gaat het in 9 van de 10 gevallen best goed met IE (o.k.: 8,5 van de 10 gevallen): zonder speciale maatregelen.
  • Kijk maar: m'n testpagina van hierboven doet het prima zonder IE-hacks. :P
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan