login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Na float toepassen, pixels worden verdubbeld(in IE)

Offline AN_ALIEN - 23/07/2006 11:21
Avatar van AN_ALIENGouden medaille

Grafische beginner		 Soms heb je welles van die momenten, dan denk je WTF?

Ik was een leuk lay outje aan het uitwerken, mooi met div'jes en css. En ik gebruikte float(omdat in dit geval de container(main) dan mee groeit met de inhoud) om alles te positioneren. Marges om alles op de pixels noukeurig af te stellen. Toen ik dit deed doemde er iets zeer merkwaardig op.
Ik gebruik de volgende content(iets versimpeld)


In de index:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="main">
  2. 	<div id="header"></div>
  3.  
  4. 	<div id="content">
  5. 		<br /><br /><br /><br />
  6. 	</div>	
  7.  
  8. 	<div id="menu"><br /><br /><br /><br /></div>
  9. </div>


css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body
  2. {
  3. background-image: url(../images/bg.gif);
  4. background-repeat: repeat-x;
  5. background-position: top;
  6. background-color:: #FFFFFF;
  7. margin: 0px;
  8. padding: 0px;
  9. }
  10.  
  11. #main
  12. {
  13. width: 779px;
  14. height: auto;
  15. background-image: url(../images/main_bg.gif);
  16. background-repeat: repeat-y;
  17. background-color: #FFFFFF;
  18. position: relative;
  19. margin: 56px 0px 0px 250px;
  20. padding: 0px;
  21. }
  22.  
  23. #header
  24. {
  25. width: 779px;
  26. height: 108px;
  27. background-image: url(../images/header.gif);
  28. background-repeat: no-repeat;
  29. background-color: #869963;
  30. margin: 0px 0px 10px 0px;
  31. padding: 0px;
  32. }
  33.  
  34. #menu
  35. {
  36. width: 150px;
  37. height: auto;
  38. background-image: url(../images/menu_bg.gif);
  39. background-repeat: repeat-y;
  40. background-color: #F9F9F9;
  41. float: inherit;
  42. margin: 0px 0px 0px 8px;
  43. padding: 0px;
  44. }
  45.  
  46.  
  47.  
  48.  
  49. #content
  50. {
  51. width: 609px;
  52. height: auto;
  53. background-image: url(../images/content_bg.gif);
  54. background-repeat: repeat-y;
  55. background-color: #F6F7F3;
  56. float: right;
  57. margin-right: 4px;
  58. padding: 0px;
  59. }


het merkwaardige momenteel is dat het aantal pixels wat ik opgeef voor de marge naar rechts voor de content div, in Internet Explorer word weergegeven met een marge van 8px(terwijl ik nu 4px opgeef). Ik wou ook een margin-right van 8px hebben, maar toen ik gewoon keurig 8px erin vulde werd het 16px . Terwijl in firefox alles gewoon naar wens gaat.

Waardoor word dit veroorzaakt? Is dat een bug in IE ofzo? Is er een mogelijk omdit wel 'normaal' te krijgen.

alvast bedankt voor uw tijd.
---------
ik ook een live demo http://www.xclan-beware.nl/brouwer/

2 antwoorden

Gesponsorde links
Offline Tuinstoel - 23/07/2006 12:03
Avatar van Tuinstoel PHP expert Bij mij in FF is ie sowieso al een paar pixels te ver uitgelijnd naar rechts. Maar IE is een beetje buggy idd . Ik had er ook ooit problemen mee, maar ik heb het opgelost door de browser te herkennen en dan vervolgens een apart css bestandje in te laden om de boel te fixen in IE of FF.
Offline AN_ALIEN - 23/07/2006 12:47
Avatar van AN_ALIEN Gouden medaille

Grafische beginner		 Hmm, inderdaad, een andere css per brouwser zou kunnen.

Maar ik heb een simpelere oplossing erbij gepakt. Een spacer div(width:8px) plaatsen ipv die 8px margin.

Maar het blijft toch een beetje vaag wat er gebeurde.:o 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.186s