[css] Tabel centeren in gecentreerde div - Softwareontwikkeling

vrijdag 5 september 2008 19:28

Acties:

Topicstarter

Met behulp van CSS heb ik een div gecentreerd op m'n pagina. In deze div wil een tabel centreren, ook mbv CSS (class=center).

Om IE de tabel goed te laten centreren ben je een hackje nodig, je stelt de text-align van de body op 'center'. En om dit effect weer op te heffen zet je text-align van de div weer op 'left'.

Om echter ook in de div een tabel te kunnen centreren zul je deze juist ook op 'center' moeten laten staan. Alleen dan loop je tegen het probleem aan dat IE alle tabelen, ook zonder class="center" centreerd.

Iemand die een idee heeft hoe ik dit probleem kan takelen? FF/Chrome/Safari etc geven de testpagina weer zoals ik het in gedachten heb, alleen IE speelt weer parten.

html: www.jbbh.nl/debug

code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="debug - style.css" />
<title>Centreren</title>
</head>
<body>

<div id="container">
  <div id="mainContent">
    <p>Lorum ipsum etc.</p>

    <table class="center">
       <tbody>
          <tr>
             <td>
                Gecentreerd
             </td>
          </tr>
       </tbody>
    </table>

    <table>
       <tbody>
          <tr>
             <td>
                Normaal
             </td>
          </tr>
       </tbody>
    </table>

  </div>
</div>

</body>
</html>

css www.jbbh.nl/debug/debug - style.css

code:

html, body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

body{
    text-align:center;  /*centeren voor IE */
}

#container {
    width: 950px;  
    margin: 0 auto; /* auto margin om pag. te centreren*/
    padding:0;
    border: 1px solid #000000;
    text-align:center;
}

#mainContent {
    padding: 0 20px 0 20px;
    width: 908px;
}

p{
    text-align:left;  /* re-align tekst p element */
}

table.center{
    margin: 0 auto;
    background-color:#FF0000;
}

vrijdag 5 september 2008 19:46

Acties:

Noork

Ik zou in elk geval even een Doctype toevoegen aan je html, anders wordt de HTML wellicht niet juist gerendert.

Daarnaast kun je natuurlijk ook een class maken zonder centrering. Wel een beetje een noodoplossing.

vrijdag 5 september 2008 19:55

Acties:

bartbh

Topicstarter

Noork schreef op vrijdag 05 september 2008 @ 19:46:
Ik zou in elk geval even een Doctype toevoegen aan je html, anders wordt de HTML wellicht niet juist gerendert.

Daarnaast kun je natuurlijk ook een class maken zonder centrering. Wel een beetje een noodoplossing.

Had ik misschien even moeten melden; doctype heb ik in het originele bestand wel in zitten. Ik heb het in het test-bestand uitgehaald aangezien het qua rendering niks uit maakte.

Een standaard tabel heeft de class "contenttable". Echter krijg ik deze niet weer aan de linkerkant. Het paragraph element komt weer netjes links door het toepassen van text-align=left. Echter omdat dit alleen van toepassing op de inline elementen, werkt het dus niet als je dit toepast op een class voor een tabel.

vrijdag 5 september 2008 20:11

Acties:

Noork

Kun je de tabel niet in een paragraph zetten?

Overigens lijkt het me vreemd dat je in IE geen tabel kan centreren zonder hack. Werkt dit niet?
http://csssky.blogspot.co...table-using-css-only.html

Gaat het hier trouwens om IE6 of IE7? Je zou in het geval van IE6 ook gewoon zoiets kunnen toepassen: <table align=center> Het is wel old-skool HTML 4.01, maar 't werkt wel.

[ Voor 79% gewijzigd door Noork op 05-09-2008 20:14 ]

vrijdag 5 september 2008 20:26

Acties:

bartbh

Topicstarter

Hmm, toch opgelost. Het lag toch aan de doctype.
Nu ik de site render (via TYPO3) in het xhtml1.1 doctype werkt het naar behoren, dus blijkbaar lag de fout toch daarin.

Nu heb ik wel weer andere problemen, cellen worden in FF etc veel hoger gerenderd dan in IE. Maar dat is weer een ander probleem.

zaterdag 6 september 2008 00:09

Acties:

Bosmonster

*zucht*

De text-align:center heb je volgens mij in alle moderne browsers niet meer nodig, alleen voor <IE6 en die kun je nu toch echt wel gaan vergeten.

margin: 0 auto; is gewoon voldoende.

maandag 8 september 2008 03:43

Acties:

mad_max234

AMD Athlon II M320

ie6 is nog steeds meest gebruikte browser, helaas kan je al die gebruikers nog niet vergeten, FF zal ie6 nog wel tijdje voor moeten laten gaan, en die vergeet je toch ook niet.

Edit/

Zie na het posten het kleiner als tekentje pas, moet echt gaan slapen geloof ik.

[ Voor 21% gewijzigd door mad_max234 op 08-09-2008 03:45 ]

-Andere hobby- -