[SAFARI] Table komt niet in DIV, maar rechts daarvan

Pagina: 1
Acties:

Acties:
  • 0 Henk 'm!

  • dirkpostma
  • Registratie: Juni 2001
  • Laatst online: 11-07-2024
Ik heb een probleem met het weergeven van een tabel in een DIV in Safari 4. Bij Firefox gaat het wel goed, IE kan ik even niet testen omdat ik op een MAC werk, maar ik ga ervan uit dat het in IE wel goed gaat.

Ik heb een stukje HTML zodanig weten te reduceren dat de fout nog steeds plaatsvindt. De HTML genereert nul errors in de W3C validator.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Title</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <style type="text/css">
      #wrapper {text-align: left;}
      #content  {border: #999 1px solid; }
      .navbuttons {clear:both;float:left;width:100%;}
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="content">
        <h1>Title</h1>
        <div class="navbuttons"><ul><li>test1</li><li>test2</li></ul></div>
        <table>
          <tr>
            <td>Test</td>
            <td>Test2</td>        
          </tr>  
          <tr>
            <td>test3</td>
            <td>test4</td>        
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>


Het probleem is dat de table rechts van de DIV verschijnt, in plaats van inside de DIV.

Heeft iemand een idee hoe dit komt? Is dit mogelijk een safari bug?

Acties:
  • 0 Henk 'm!

Verwijderd

float:left + width:100%...
wat moet dat met elkaar?

Acties:
  • 0 Henk 'm!

  • scorpion-biker
  • Registratie: Augustus 2009
  • Laatst online: 16-09 14:27
Ik kan even niet goed aangeven waar dit vandaan komt, maar als je stukje css het clear en float statement weghaalt, toont het wel goed.

code:
1
2
3
4
5
<style type="text/css">
      #wrapper {text-align: left;}
      #content  {border: #999 1px solid; }
      .navbuttons {width:100%;}
    </style>

World of Trucks ~ Steam ~ CR: clan Kronenjagers (#8QGLP089)


Acties:
  • 0 Henk 'm!

  • scorpion-biker
  • Registratie: Augustus 2009
  • Laatst online: 16-09 14:27
Verwijderd schreef op donderdag 08 oktober 2009 @ 15:26:
float:left + width:100%...
wat moet dat met elkaar?
Inderdaad, <div> is een block element, die standaard met breedte van 100% wordt getoond.
Je kan dus je css voor .navbuttons helemaal kunnen weglaten.

World of Trucks ~ Steam ~ CR: clan Kronenjagers (#8QGLP089)