Archief - Dubbel aantal pixels in IE

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
f

frye

Legacy Member
Ik heb een probleem in mijn stukje code...
Namelijk hij neemt tweemaal de hoogte van de pixels in IE.

Heb vanal aangepast maar hij blijft dit doen...

HTML:
Code: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Dalhie</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css" />
	</head>
	<body>

		<div id="c_top"></div>
		<div id="content_bg">
			<div id="content_left">
				<div class="c1">
					<h1 class="color">Welkom op onze website</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mollis ipsum at massa condimentum imperdiet. Nam elit odio, condimentum sed cursus aliquet, congue mattis tortor. Nam vel purus purus, eget consectetur nisl. Suspendisse vel nunc mauris. Vivamus cursus sodales massa, a imperdiet ligula ornare ut. In hac habitasse platea dictumst. Maecenas eu ante neque. Vivamus fermentum turpis at leo varius imperdiet dictum ut leo. Etiam hendrerit tristique rutrum. Etiam condimentum, tortor in egestas vulputate, erat sem elementum diam, at mattis velit nisi a augue. Fusce imperdiet dignissim erat id accumsan. Maecenas ipsum urna, commodo ut elementum ut, vestibulum quis leo.</p><div style="clear: both" /></div>
				</div>
			</div>
			<div id="content_right">
				<div class="c2">
					<h1 class="color">Sidemenu</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mollis ipsum at massa condimentum imperdiet.</p>
				</div>
			</div>
		</div>
		<div id="c_down"></div>
	</body>
</html>

CSS:
Code: 
body{};
#c_top{background-image: url('images/c_top.png'); width: 800px; height: 11px; margin: 0 auto; margin-top: 15px;}
#content_bg{background-color: #f8f8f8; width: 800px; margin: 0 auto; text-align: left; overflow: auto; padding: 0;}
#c_down{background-image: url('images/c_down.png'); width: 800px; height: 9px; margin: 0 auto; clear:both;}

#content_left{width: 520px; text-align: left; float:left; display: inline; margin-left: 20px; margin-right: 5px;}
#content_right{width: 250px; text-align: left; float: left; margin-left: 50px; margin: 0 auto; display: inline;}


.c1{width: 500px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 1px solid #e5e5db; margin: 0 auto; padding: 10px; }
.c2{width: 200px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 1px solid #e5e5db; margin: 0 auto; padding: 10px; }

h1{font-size: 1.6em;}
h1.color{color: #3f7e3e;}

Dalhie voor demo
b

bicklo

Legacy Member
Hier zie ik niet zo veel verschil, de tekst vakken zijn in IE zelfs iets kleiner dan in Firefox.
Anders kan u ook gebruik maken van dit,

Code: 
<!--[if IE]>
<style>

Hier aangepaste code plaatsen

</style>
<![EndIf]-->

En om alles mooi in het midden te krijgen in IE gebruik je

Code: 
text-align: center;
f

frye

Legacy Member
Het heeft niets met de context te maken...
Het probleem zit voor de bovenste en onderste ronding te maken gebruik ik een figuurtje...
In FF komt hij juist te staan... maar in IE komt hij 2 keer na elkaar (door dubbele pixels)
b

bicklo

Legacy Member
Nu zie ik het inderdaad Css3, of liever ik zie het eigenlijk niet want ik werk met windows xp en dit kan enkel gezien worden met Vista of Windows7.
Css en IE is altijd een leuke combinatie :lol:

Misschien kan dit u helpen LINK
C

Curahee Q

Legacy Member
Wat heeft een OS te maken met de CSS versie? Het is de browser toch die dit moet imterpreteren. Of zit ik nu fout?
b

bicklo

Legacy Member
Ik weet dat het raar klinkt maar dit heb ik toch op verschillende sites gelezen, hier kan ik met IE8 de ronde hoeken van JEA niet zien, ik zie gewoon rechte hoeken, idem met Opera 10.51 die css3 ondersteund.

Dit is een die ik tegenkwam
There is a platform preview available which supports border-radius. You will need Windows Vista or Windows 7 to run the preview (and IE9 when it is released)
Klik om te vergroten...

De reden daarvoor weet ik dus ook niet.
f

frye

Legacy Member
Maar ik heb voor de ronde hoeken (de bovenste) GEEN css gebruikt
Dit is een afbeelding namelijk: http://limemint.be/fout/images/c_top.png

Ik heb daar dus een aparte div gemaakt met de hoogte en breedte van de figuur en die als background gezet...
#c_top{background-image: url('images/c_top.png'); width: 800px; height: 11px; margin: 0 auto; margin-top: 15px;}
Klik om te vergroten...

idem voor de onderste.
b

bicklo

Legacy Member
Ach, ok, wel probeer volgende dan eens,

Code: 
#c_top{background-image: url('images/c_top.png'); background-repeat: no-repeat;width: 800px; height: 11px; margin: 0 auto; margin-top: 15px;}

dus gewoon bijvoegen

Code: 
background-repeat: no-repeat;
f

frye

Legacy Member
Dan laat hij een witruimte zien van 9px...
Code: 
margin-bottom: -9px;
Dan is het perfect in IE maar dan klopt hij weer niet in FF :(
Zucht..
b

bicklo

Legacy Member
Probeer dan eens

Code: 
<!--[if IE]>
margin-bottom: -9px;
<![endif]-->

Firefox kijkt daar niet naar IE wel.

Plaats boven </head> dus

Code: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Dalhie</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css" />

<!--[if IE]>
margin-bottom: -9px;
<![endif]-->


	</head>
	<body>
Z

Zero Grav

Legacy Member
Niet verkeerd bedoeld, maar als ge hiervoor al IE specific stylesheets gaat gebruiken dan is er iets grondig mis. 't Lijkt mij belangrijker om eerst eens de bestaande code op fouten te testen en die op te lossen. IE specific stylesheets is iets voor grote sites, niet voor 2 kolommetjes in een container.

Een voorbeeld van wat de oorzaak van uw probleem kan zijn is bijvoorbeeld het mankeren van een doctype. Uw browser valt terug in quirksmode en rendert dingen op abnormale wijze. Elementen die opeens dubbele heights krijgen bijvoorbeeld.

Nu moet ik zeggen dat ik dat 'dubbele' hoogte gedoe niet zie, uw lettertype is wel groter in IE waardoor de content mee rekt. Maar hier hebt ge toch al een valid versie van uw voorbeeld: http://fre.dommel.be/random/test.html
E

Eleven

Legacy Member
bicklo zei:
Ik weet dat het raar klinkt maar dit heb ik toch op verschillende sites gelezen, hier kan ik met IE8 de ronde hoeken van JEA niet zien, ik zie gewoon rechte hoeken, idem met Opera 10.51 die css3 ondersteund.

Dit is een die ik tegenkwam
There is a platform preview available which supports border-radius. You will need Windows Vista or Windows 7 to run the preview (and IE9 when it is released)
Klik om te vergroten...
De reden daarvoor weet ik dus ook niet.
Klik om te vergroten...

CSS rounded corners zijn niet OS afhankelijk maar browser afhankelijk.
Daarnaast is CSS3 ondersteuning nogal verschillend van browser tot browser.
Dit komt vooral omdat CSS3 uit een 30/40 tal verschillende modules bestaat waarvan het overgrote deel nog in de working draft fase van het W3C zit.

Een aantal van de CSS3 modules zoals bv selectors zitten al wat hoger en het is zeer waarschijnlijk dat er niet veel meer aan zal veranderen, hierdoor zijn deze zaken al goed geïmplementeerd in de moderne browsers.

Over andere modules zijn er nog geen standaarden en is er nog onenigheid tussen verschillende browsers. Maar deze zaken zijn zo interessant om te gebruiken waardoor een aantal browsers deze toch ook naar voren willen schuiven en implementeren. Aangezien er nog geen standaarden zijn doen de browsers wat ze willen wat de syntax, en een aantal andere zaken (denk maar aan de onenigheid voor de codec voor HTML5 video) betreft.
Sommigen kiezen voor een browserspecifieke prefix zoals Firefox en Webkit (-moz en -webkit), IE9 wil blijkbaar werken zonder prefix.

Opera ondersteund dus een aantal zaken van CSS3, maar tot op de dag van vandaag nog geen border-radius, daarom dat je met Opera ook geen afgeronde hoeken zal zien op welk OS dan ook.
Naast de browser hangt het ook een stukje af van de developer. Als hij alleen -moz... in zijn CSS zet zal je met Safari of Chrome ook niet veel zien terwijl deze wel border-radius geïmplementeerd hebben.

Wat jij tegenkwam op het internet gaat over de IE9 preview die enkel werkt op Windows 7 of Vista, of dat met de final release ook zo zal zijn is nog afwachten, maar ik vrees van wel.
Dit heeft dus niets te maken met CSS3 op zich.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan