1. #1

    Registered
    07/08/08
    Location
    Opglabbeek
    Posts
    505
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0

    Dubbel aantal pixels in IE

    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
    no votes  

  2. #2
    bicklo's Avatar
    Registered
    08/02/10
    Location
    Harelbeke
    Posts
    125
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/1
    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;
    no votes  

  3. #3

    Registered
    07/08/08
    Location
    Opglabbeek
    Posts
    505
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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)
    no votes  

  4. #4
    bicklo's Avatar
    Registered
    08/02/10
    Location
    Harelbeke
    Posts
    125
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/1
    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

    Misschien kan dit u helpen LINK
    no votes  

  5. #5
    Curahee Q's Avatar
    Registered
    07/12/07
    Location
    Hoogstraten
    Posts
    854
    iTrader
    0
    Mentioned
    0 Post(s)
    Wat heeft een OS te maken met de CSS versie? Het is de browser toch die dit moet imterpreteren. Of zit ik nu fout?
    no votes  

  6. #6
    bicklo's Avatar
    Registered
    08/02/10
    Location
    Harelbeke
    Posts
    125
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/1
    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)
    De reden daarvoor weet ik dus ook niet.
    no votes  

  7. #7

    Registered
    07/08/08
    Location
    Opglabbeek
    Posts
    505
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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;}
    idem voor de onderste.
    no votes  

  8. #8
    bicklo's Avatar
    Registered
    08/02/10
    Location
    Harelbeke
    Posts
    125
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/1
    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;
    no votes  

  9. #9

    Registered
    07/08/08
    Location
    Opglabbeek
    Posts
    505
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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..
    no votes  

  10. #10
    bicklo's Avatar
    Registered
    08/02/10
    Location
    Harelbeke
    Posts
    125
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/1
    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>
    no votes  

  11. #11
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    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
    Last edited by Zero Grav; 14-04-2010 at 17:54.
    no votes  

  12. #12
    Eleven's Avatar
    Registered
    11/01/09
    Location
    neverland
    Posts
    101
    iTrader
    0
    Mentioned
    0 Post(s)
    Quote Originally Posted by bicklo View Post
    This quote is hidden because you are ignoring this member. Show
    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)
    De reden daarvoor weet ik dus ook niet.
    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.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in