[CSS] De laatste margins - Softwareontwikkeling

maandag 13 juni 2005 22:14

Acties:

Topicstarter

Beste Tweakers,

Op dit moment werk ik samen met iemand van de vereniging aan de nieuwe verenigingswebsite. Qua PHP etc zijn er weinig problemen en eigenlijk met CSS hebben we tot dusver ook geen problemen gehad.
De website ziet er op één onderdeel na exact het zelfde uit in FF en IE, maar juist dit onderdeel komen we niet uit en we hopen dat jullie ons daarbij kunnen helpen.

Het betreft het content gedeelte van de website, in FF is deze helemaal goed, maar in IE schuift hij het net een paar pixels op waardoor het dus niet klopt. Onderstaande plaatjes tonen het probleem.

Het stukje in FF
Afbeeldingslocatie: http://www.arysta-ict.nl/overflow/website_ff.png

Afbeeldingslocatie: http://www.arysta-ict.nl/overflow/website_ff.png

Het stukje in IE
Afbeeldingslocatie: http://www.arysta-ict.nl/overflow/website_IE.png

Het is dus de bedoeling dat beide linker-margins gelijk zijn, maar dat krijgen we niet voor elkaar.

Onze CSS file ziet er als volgt uit:

Cascading Stylesheet:

.clr {
clear: both;
}

.content{
display: block;
color: #000000;
font-family: Arial;
font-size: 12px;
padding: 8px;
}

.header{
display: block;
color: #FFFFFF;
font-family: Arial;
font-weight: bold;
font-size: 14px;
padding-left: 5px;
padding-top: 3px;
}

#main_outline {
background-color: #FFF;
width: 780px;
padding: 0px;
}

#header {
background: url('../top.jpg');
text-align: left;
border: 0px;
padding: 0px;
margin: 0px;
width: 780px;
height: 230px;
}

#footer{
background: url('../bottom.gif');
text-align: left;
border: 0px;
padding: 0px;
margin: 0px;
width: 780px;
height: 46px;
}

#content_outline {
background: url('../achtergr_pag.gif');
width: 780px;
padding: 0px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}

#left_container{
float: left;
width: 230px;
padding: 0px;
margin-left: 13px;
}

#content_container{
width: 507px;
padding: 0px;
margin-left: 256px;
}

body {
background: url('../achtergrond_fig.jpg');
text-align: center;
margin-top: 10px;
}

#left_block{
display: block;
background: url('../achtergr_kop_klein.jpg');
width: 230px;
padding: 0px;
text-align: left;
margin: 0px;
}

#left_header{
display: block;
background: url('../kopje_klein.jpg');
width: 230px;
height: 28px;
padding: 0px;
}

#left_footer{
display: block;
background: url('../bottom_kop_klein.jpg') no-repeat;
width: 230px;
height: 2px;
padding: 0px;
font-size: 0px;
}

#content {
display: block;
background: url('../achtergr_kop_groot.jpg');
width: 507px;
padding: 0px;
text-align: left;
margin: 0px;
}

#content_header{
display: block;
background: url('../kopje_groot.jpg');
width: 507px;
height: 28px;
padding: 0px;
}

#content_footer{
display: block;
background: url('../bottom_kop_groot.jpg');
width: 507px;
height: 2px;
padding: 0px;
font-size: 0px;
}

En de layout is als volgt gemaakt:

HTML:

<body>
<div align="center">
  <div id="main_outline">
    <div id="header"></div>
    <div id="content_outline">
      <div id="left_container">
        <div id="left_block">
          <div id="left_header"><span class="header">forum</span></div>
          Forum headline<br />Forum headline<br />
          <div id="left_footer"></div>
        </div><br />
        <div id="left_block">
          <div id="left_header"><span class="header">poll</span></div>
          Poll optie<br />
          <div id="left_footer"></div>
        </div>
      </div>
      <div id="content_container">
        <div id="content">
          <div id="content_header"><span class="header">Welkom bij ...</span></div>
          <span class="content">Welkom bij ...</span>
          <div id="content_footer"></div>
        </div>
      </div>
    <div class="clr"></div>
    </div>
    <div id="footer"></div>
  </div>
</div>
</body>

Zelf had ik al geprobeerd of het aan de padding of margins lag van #content_outline, maar dat leverde niks op. Verder ben ik nog te weinig bekend in CSS om hier zogenaamde hacks op toe te passen, laat staan dat ik niet eens zeker weet of dat wel de oplossing is.

Hopelijk kan iemand van jullie ons hierbij helpen.

Bijvoorbaat dank

maandag 13 juni 2005 22:29

Acties:

Rowanov

Kop eens wat anders...

Heb je ook nog een online testcase? Dan kan ik even frutten met de Developer toolbar

Edit: Ik zie nu dat in IE alles een aantal pixels naar rechts staat ten opzichte van de container. Ik denk dat het een boxmodel probleem is.

Edit 2: Als je de margin en padding van al je div's nou eens op 0 zet? Je hebt nogal veel div's genest zitten.

code:

div {
   margin: 0;
   padding: 0;
   border: 0;
}

[ Voor 77% gewijzigd door Rowanov op 13-06-2005 22:49 ]

maandag 13 juni 2005 22:48

Acties:

djluc

Dit is toch gewoon het verschil tussen het wel of niet meetellen van de borders? Dat lijkt inderdaad op boxmodel problemen. http://tantek.com/CSS/Examples/boxmodelhack.html

maandag 13 juni 2005 22:56

Acties:

Tonio

terrible gibberish

Volgens mij is dit toch echt het verdubbelen van margins wat IE doet bij floats?

D200|F90x|Leica M6|Yashica T3|Hasselblad 503cx
Nikon: 12-24/4|17-35/2.8|10,5mm/2.8|30mm/1.4|50mm/1.4|85mm/1.8|SB-800|SB-24|SB-26|MC-36
Zeiss: 80mm/2.8 50mm/4 ZM: 35mm/2
When the going gets weird... the weird turn pro

maandag 13 juni 2005 23:11

Acties:

Crazybyte

Topicstarter

Rowanov schreef op maandag 13 juni 2005 @ 22:29:
Heb je ook nog een online testcase? Dan kan ik even frutten met de Developer toolbar

ja die is beschikbaar op http://overflow.creationpoint.nl

Rowanov schreef op maandag 13 juni 2005 @ 22:29:
Edit: Ik zie nu dat in IE alles een aantal pixels naar rechts staat ten opzichte van de container. Ik denk dat het een boxmodel probleem is.

djluc schreef op maandag 13 juni 2005 @ 22:48:
Dit is toch gewoon het verschil tussen het wel of niet meetellen van de borders? Dat lijkt inderdaad op boxmodel problemen. http://tantek.com/CSS/Examples/boxmodelhack.html

Boxmodel heb ik wel iets van gehoord, maar weet niet wat het inhoud, ondanks dat ga ik er dus wel zelf eens even na kijken, djluc alvast bedankt voor de link. Hoop dat ik eruit kom.
Hetgeen wat Rowanov zegt zal ik ook eens uitproberen.

Elite_Dead schreef op maandag 13 juni 2005 @ 22:56:
Volgens mij is dit toch echt het verdubbelen van margins wat IE doet bij floats?

Ik snap wat je zegt, maar snap niet wat je bedoeld

Edit 1

Rowanov schreef op maandag 13 juni 2005 @ 22:29:Edit 2: Als je de margin en padding van al je div's nou eens op 0 zet? Je hebt nogal veel div's genest zitten.
code:
1
2
3
4
5
div {
   margin: 0;
   padding: 0;
   border: 0;
}

Heb dit geprobeerd maar het hielp niet, ga dus morgen kijken naar dat boxmodel.

[ Voor 19% gewijzigd door Crazybyte op 13-06-2005 23:19 ]

maandag 13 juni 2005 23:23

Acties:

Tonio

terrible gibberish

Crazybyte schreef op maandag 13 juni 2005 @ 23:11:
Ik snap wat je zegt, maar snap niet wat je bedoeld

IE heeft een bug, dat deze de margins van een floatend element verdubbeld. Dus als je bijvoorbeeld een <div style="margin-left:10; float:left;">blaat</div> hebt, zal deze een margin-left van 10px in FF hebben, maar in IE een margin-left van 20px. Wat je hieraan zou kunnen doen is een aparte stylesheet voor IE definëren, waar de margin-left 5px is, en deze dan tussen zogenaamde conditional comments in je html te zetten. Deze stylesheet zal dan alleen door IE worden gelezen, en vervolgens is je margin-left hetzelfde in IE en FF

D200|F90x|Leica M6|Yashica T3|Hasselblad 503cx
Nikon: 12-24/4|17-35/2.8|10,5mm/2.8|30mm/1.4|50mm/1.4|85mm/1.8|SB-800|SB-24|SB-26|MC-36
Zeiss: 80mm/2.8 50mm/4 ZM: 35mm/2
When the going gets weird... the weird turn pro

dinsdag 14 juni 2005 09:56

Acties:

Savantas

uitleg over Boxmodel is o.a. hier te vinden:Madness.nl
Het gekke is dat er dus wel een oplossing is om Mozilla aan het IE boxmodel te krijgen, maar niet andersom. Kortom, dan zou je je marges allemal moeten corrigeren naar de IE-manier toe.
Andere oplossing is om er een hack in te stoppen, zodat IE iets anders leest dan Mozilla. Zie bv. Box Model Hacks

Hmm, bij nader inzien denk ik dat het inderdaad eerder de float is, want IE zou juist de boxen kleiner moeten maken, niet groter...

offtopic:
@ Zkywalker: Ja, ben nog doof! Stom, naar een concert van Dinosaur en dan geen doppen mee!

Wel lekker... Ook beetje vreemd, zo'n concert met alleen leeftijdgenoten en ouder, meestal ben ik een van de ouderen ...

[ Voor 46% gewijzigd door Savantas op 15-06-2005 16:41 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

dinsdag 14 juni 2005 17:07

Acties:

Verwijderd

offtopic:
@ savantas: vnvnd Dinosaur in paradiso!! srry, er staat geen mail in je profiel....

dinsdag 14 juni 2005 18:04

Acties:

Verwijderd

IE telt bij floats de margin dubbel die gelijk is aan de waarde van de float. Dus als je float: left en margin-left: 10px dan maakt IE van margin-left: 20px. Zelfde geldt uiteraard voor float: right en margin-right.

Dit kun je oplossen door display: inline; toe te voegen aan het desbetreffende element.

Meer informatie hierover: http://www.positionisever...lorer/doubled-margin.html

woensdag 15 juni 2005 11:57

Acties:

Crazybyte

Topicstarter

Verwijderd schreef op dinsdag 14 juni 2005 @ 18:04:
IE telt bij floats de margin dubbel die gelijk is aan de waarde van de float. Dus als je float: left en margin-left: 10px dan maakt IE van margin-left: 20px. Zelfde geldt uiteraard voor float: right en margin-right.

Dit kun je oplossen door display: inline; toe te voegen aan het desbetreffende element.

Meer informatie hierover: http://www.positionisever...lorer/doubled-margin.html

Dankje, de link die je gaf was erg duidelijk in uitleg en nu is de pagina goed.
Heb bij de #left_container alleen display:inline; toe gevoegd en #content_container heb ik float: right; van gemaakt en vervolgens een margin-right + display:inline;

En toen was ie goed.