[CSS] Witte ruimte tussen DIVs en Tabel

[Cai]

Situatie
Een webpagina met over de gehele breedte een div "menubanner"
Onder "menubanner" een div over de gehel breedte "barcontainer"
In barcontainer een tabel met 1 rij en 3 kolommen "maincontenttable"

code:

<div id="menubanner">
    <div id="menubannertext">
    </div>
</div>
<div id="barcontainer">

<table id="maincontenttable">
    <tr>
        <td class="leftcolumn">
            <?php
            if( mosCountModules( 'left' ) > 0 ) 
            {
                mosLoadModules( 'left', -2 );
            }
            ?>
        </td>
        <td class="maincolumn">
            <h1 id="sitetitle"><a href="index.php"><?php echo $mosConfig_sitename; ?></a></h1>
            <?php mosMainBody(); ?>
        </td>
        <td class="rightcolumn"><?php
            if( mosCountModules( 'right' ) > 0 ) 
            {
                mosLoadModules( 'right', -2 );
            }
            ?>
        </td>
    </tr>

In css wordt de opmaak bepaald.

code:

#menubanner {
  left: 0px;
  top: 36px;
  width: 1025px;
  height: 148px;
  margin: 0px 0px 0px 0px; 
  float: left;
  color: #454444;
  position: relative;
  background: #ffae00 url('../images/menubannerbackground_1025x144.jpg') center top no-repeat;
}

#barcontainer {
  width: 1025px;
  margin: 0px 0px 0px 0px; 
  float: left;
  color: #454444;
  background: #ff00ff;
  position: relative;
  overflow: hidden;
  left: 0px;
  top: 36px;
  z-index:1;
  padding: 0px;;
}

table#maincontenttable {
  background-color: #ffffff;
  border: 0px;
  width: 100%;
  padding: 0px;
  border-spacing:0px;
  margin 0px 0 px 0px 0px;

}

table#maincontenttable td{
  padding: 0px;
  border: 0px;
  margin: 0px 0px 0px 0px;  
  border-spacing:0px;
}

.leftcolumn {
  background-color: #f1f1ee;
  width: 226px;
  padding: 0px;
  border: 0px;
  margin: 0px 0px 0px 0px;
}

.maincolumn {
  background-color: #ffffff;
  padding: 0px;
  border: 0px;
  margin: 0px 0px 0px 0px;
}

.rightcolumn {
  background-color: #f1f1ee;
  width: 226px;
  padding: 0px;
  border: 0px;
  margin: 0px 0px 0px 0px;
}

Probleem
In firefox ziet de lay-out er naar wens uit, maar in IE7 en IE8 gebeurd het volgende


Het gele is de banner, het zwarte de linkerkolom van de tabel, de witte streep loopt eigenlijk als een witte border om de tabel heen.

Waarschijnlijk een basisvraag, maar ik zie niet waar ik de mist in ga. Via de W3C validator heb ik gecontroleerd of ik geen typo's e.d. heb gemaakt en die passed zonder een enkele fout. Voor de rest heb ik bij elke DIV en kolom en tabel geprobeerd alle marges, padding, spacing te verwijderen zonder resultaat.

[ Voor 1% gewijzigd door Cai op 15-12-2009 11:45 . Reden: Afbeelding verwijderd ]

[Bosmonster]

Geen tables gebruiken voor layout, dan heb je ook dit soort problemen niet.

[OkkE]

Eens met Bosmonster.

Maar misschien heeft het te maken met een extra spatie of enter in je broncode, daar wil IE nog wel eens gek van doen. Staan verder de cellpadding, cellspacing en border van de tabel op 0; de cellspacing kan je niet via CSS regelen (dacht ik).

[Cai]

offtopic:
Kennelijk moet je ook je gehel aanpak beargumenteren om dooddoeners voor te zijn.

Er zijn op dit moment verschillende aanpakken, waar er hevig gediscussieerd wordt over de te volgen methode met elk zijn eigen voor- en nadelen. Alleen tables, alleen Divs, of een combinatie.

Voor deze site is het gewenste model:

code:

 ------------------------------------------
|      Banner                          |
-------------------------------------------
|        |                       |          |
|   1   |      Data          |   3      |
|        |                       |          |
----------------------------------------------

De data is een variable grote met blanco achtergrond, kolom 1 en 3 bevatten wisselend menuitems, banners en formulieren met een afwijkende achtergrond die qua hoogte gelijk moet lopen met de hoogte van de data kolom.

Om dit te bewerkstelligen is een aanpak daar een tabel van te maken. Dit is ook mogelijk door bijvoorbeeld Divs en javascript te gebruiken. Maar zoals eerder gezegd, alles heeft zijn voor- en nadelen.

[ Voor 6% gewijzigd door Cai op 15-12-2009 11:38 . Reden: Onnodige opmerking ]

[Saeverix]

Bosmonster schreef op dinsdag 15 december 2009 @ 11:30:
Geen tables gebruiken voor layout, dan heb je ook dit soort problemen niet.

Precies wat ik zou zeggen... Tabellen zijn niet gemaakt/bedacht om een layout mee op te zetten.
Ze zijn gemaakt voor één ding, namelijk data/informatie netjes weergeven.

Ik weet het, het is erg makkelijk en je kunt alles heel precies regelen (behalve in jouw geval). Ik ben er namelijk ook mee begonnen.
Maar zeker met het oog op de toekomst heb je er meer aan om met layers en css te gaan werken.

[Cai]

OkkE schreef op dinsdag 15 december 2009 @ 11:33:
Eens met Bosmonster.

Maar misschien heeft het te maken met een extra spatie of enter in je broncode, daar wil IE nog wel eens gek van doen. Staan verder de cellpadding, cellspacing en border van de tabel op 0; de cellspacing kan je niet via CSS regelen (dacht ik).

In de html code (in 1e post) staan geen uiterlijke vraiabelen meegegeven, alleen in de CSS.

Ik zal cellspacing=0 eens toevoegen. To be continued

[DrFlash]

Ik heb inderdaad ook ditzelfde probleem, nu opgelost door al m'n broncode waar nodig aan elkaar te plakken zonder spaties of enter, maakt de leesbaarheid wel minder.

Ik heb overigens ongeveer dezelfde layout maar dan zonder tables. het gaat bij mij bijv. om menuknoppen die dit probleem vertonen.

[Cai]

Saeverix schreef op dinsdag 15 december 2009 @ 11:39:
[...]

Precies wat ik zou zeggen... Tabellen zijn niet gemaakt/bedacht om een layout mee op te zetten.
Ze zijn gemaakt voor één ding, namelijk data/informatie netjes weergeven.

Ik weet het, het is erg makkelijk en je kunt alles heel precies regelen (behalve in jouw geval). Ik ben er namelijk ook mee begonnen.
Maar zeker met het oog op de toekomst heb je er meer aan om met layers en css te gaan werken.

Zonder om een hele tutorial aan te vragen, maar hoe pak je dit aan met Layers zonder javascript?

[MoietyMe]

Cai schreef op dinsdag 15 december 2009 @ 11:37:

offtopic:
Kennelijk moet je ook je gehel aanpak beargumenteren om dooddoeners voor te zijn.

Er zijn op dit moment verschillende aanpakken, waar er hevig gediscussieerd wordt over de te volgen methode met elk zijn eigen voor- en nadelen. Alleen tables, alleen Divs, of een combinatie.

Wat je hier zegt klopt niet. Je bouwt je website semantisch op (dus door elementen met div's te groeperen) of niet semantisch (een stuk tekst gewoon ergens neer kwakken zonder <p> er omheen bv.).

[MueR]

3 4 woorden: float en faux columns
Daarmee moet het lukken.

[ Voor 11% gewijzigd door MueR op 15-12-2009 11:45 ]

[OkkE]

Cai schreef op dinsdag 15 december 2009 @ 11:37:
Er zijn op dit moment verschillende aanpakken, waar er hevig gediscussieerd wordt over de te volgen methode met elk zijn eigen voor- en nadelen. Alleen tables, alleen Divs, of een combinatie.

In mijn ogen is er maar 1 aanpak; dat is semantische opmaak, wat simpel gezegd inhoud: geen tabellen voor layout.

De data is een variable grote met blanco achtergrond, kolom 1 en 3 bevatten wisselend menuitems, banners en formulieren met een afwijkende achtergrond die qua hoogte gelijk moet lopen met de hoogte van de data kolom.

Volgens mij is dit prima te doen met alleen <div>'s en een techniek genaamd "faux columns".

[Cai]

Bedankt, voor faux columns, goed googlebaar en extra lectuur. Het probleem zat in de cellspacing=0 welke niet in css beinvloedbaar is.

[curry684]

Cai schreef op dinsdag 15 december 2009 @ 11:37:

offtopic:
Kennelijk moet je ook je gehel aanpak beargumenteren om dooddoeners voor te zijn.

Dooddoeners ontstaan vrijwel altijd pas als er een reden is om ze tot in den treure te herhalen.

Er zijn op dit moment verschillende aanpakken, waar er hevig gediscussieerd wordt over de te volgen methode met elk zijn eigen voor- en nadelen. Alleen tables, alleen Divs, of een combinatie.

Nee ho, correctie:

• Fossielen die sinds Frontpage 3.0 geen opfriscursus webdevelopment hebben gedaan kiezen voor 'alleen tables', en daarmee the road to hell.
• Fossielen die sinds Frontpage 3.0 wel internet zijn blijven lezen kiezen voor 'alleen divs'
• Fossielen die de weg compleet kwijt zijn en niet in de buurt van computers zouden mogen komen kiezen voor 'een combinatie van divs en tables'
• Professionals die in 2009 op enige niveau werkzaam zijn in webdevelopment kiezen voor 'semantische markup'

Nuances zijn belangrijk

Bosmonster schreef op dinsdag 15 december 2009 @ 11:30:
Geen tables gebruiken voor layout, dan heb je ook dit soort problemen niet.

In alle eerlijkheid wel respect voor het creeren van een table-based layout die in FF wel naar behoren werkt en in IE niet, gewoonlijk is het andersom

[ Voor 15% gewijzigd door curry684 op 15-12-2009 12:31 ]

[Verwijderd]

curry684 mag ik daar aan toevoegen:

Fossielen geven geen drol of de codes valid zijn, het werkt toch.
Professionals zorgen ervoor dat zowel de HTML als de CSS valid is.

Maar goed wat als je nu een site uit 2001 moet aanpassen voor een klant die geen nieuwe site wilt! Ik heb zo wel is iets moeten aanpassen in een site met colspans en rowspans

[ Voor 35% gewijzigd door Verwijderd op 15-12-2009 14:16 ]

[Bosmonster]

3x zoveel offreren voor iedere aanpassing

[ Voor 12% gewijzigd door Bosmonster op 15-12-2009 14:50 ]

[curry684]

Verwijderd schreef op dinsdag 15 december 2009 @ 14:15:
Maar goed wat als je nu een site uit 2001 moet aanpassen voor een klant die geen nieuwe site wilt! Ik heb zo wel is iets moeten aanpassen in een site met colspans en rowspans

Opdracht weigeren of uurtje factuurtje prostitueren.

[De Dona]

Cai schreef op dinsdag 15 december 2009 @ 11:49:
Bedankt, voor faux columns, goed googlebaar en extra lectuur. Het probleem zat in de cellspacing=0 welke niet in css beinvloedbaar is.

Enige tijd geleden heb ik ook wat moeite gehad om een rare ruimte tussen twee div's weg te krijgen in IE.
De margin en padding beide op 0 zetten hielp niet. Uiteindelijk lag het aan een foutje in de Doctype.

[curry684]

De Dona schreef op woensdag 16 december 2009 @ 22:53:
[...]

De margin en padding beide op 0 zetten hielp niet. Uiteindelijk lag het aan een foutje in de Doctype.

Tien tegen 1 dat dat 'foutje' de browser als geheel in quirks mode roste. Lees dit eens als je goed wil begrijpen wat je overkwam

Als je meer details wil kun je dit hele verhaal lezen, onderin staat daar ook een exacte lijst van welke doctypes welke modus in welke browser triggeren.

[ Voor 19% gewijzigd door curry684 op 17-12-2009 00:14 ]

[Verwijderd]

OkkE schreef op dinsdag 15 december 2009 @ 11:33:
Maar misschien heeft het te maken met een extra spatie of enter in je broncode, daar wil IE nog wel eens gek van doen. Staan verder de cellpadding, cellspacing en border van de tabel op 0; de cellspacing kan je niet via CSS regelen (dacht ik).

Cellpadding en cellspacing kun je wel in CSS, je doet dit door border-collapse te gebruiken, zie http://csssky.blogspot.co...pacing0-cellpadding0.html

[MueR]

Verwijderd schreef op zondag 20 december 2009 @ 12:16:
Cellpadding en cellspacing kun je wel in CSS, je doet dit door border-collapse te gebruiken, zie http://csssky.blogspot.co...pacing0-cellpadding0.html

Niet helemaal. Border-collapse vertelt een browser dat hij borders over elkaar moet renderen. Voor cellspacing dien je de CSS2 property border-spacing te gebruiken.