Toon posts:

Tables: align="right" is niet geheel rechts!

Pagina: 1
Acties:

maandag 30 oktober 2006 11:49

Acties:

Verwijderd

Topicstarter
Beste mensen

Hoe kan het dat als ik tables in tables in tables gebruik, dat op een gegeven moment Internet Explorer ineens raar gaat doen? Als ik in een <td> nu een <table> plaats met padding en spacing allemaal op 0, maar alignment op rechts, dan lijnt ie niet geheel naar rechts uit!! Maar zo'n 10 pixels voor de rechter border, alsof er ergens een margin of padding aanstaat.

Na alle paddings weggehaald te hebben die ik gebruik, blijft het euvel zich voordoen. Firefox 2.0 werkt het tenminste wel goed uit, maar ja, uit gewenning van de normale gebruiker is Internet Explorer nog steeds het populairst! |:(

HTML:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<html>
<head>
<title>Intraleven B.V.</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<table valign="top" cellpadding="0" cellspacing="0" border="1" width="100%" height="100%"> <!-- Main 1 -->
    <tr>
        <td valign="top" align="center">
            <table width="719" cellpadding="0" cellspacing="0" border="1"> <!-- Main 2 -->
                <tr>
                    <td>
                        
                        <table width="719" cellpadding="0" cellspacing="6" border="1"> <!-- Hoofdmenu -->
                            
                            <tr>
                                <td height="70" colspan="2"><h4>Home</h4></td>
                                <td rowspan="3" width="210" align="right"><img src="images/intra.gif"></td>
                            </tr>
                            
                            <tr>
                                <td align="right" valign="top"><img src="images/orange.gif"></td>
                                <td align="left" valign="top"><a href="index.html">Home</a></td>
                            </tr>
                            
                            <tr>
                                <td align="right" valign="top"><img src="images/orange.gif"></td>
                                <td align="left" valign="top"><a href="verzekeraar.php">Verzekeraars</a></td>
                            </tr>
                            
                        </table> <!-- Sluiten Hoofdmenu -->
                        
                    </td>
                </tr>
                
                <tr>
                    <td class="tussenlijn" background="images/bg.gif">
                    </td>
                </tr>
                
                <tr>
                    <td height="100%">
                        
                        <table width="719" cellpadding="0" cellspacing="0" border="1"> <!-- Teksten -->
                            <tr>
                                <td class="teksten"> <!-- Hier komen de teksten -->
                                    
                                    <p>
                                        tekst tekst
                                    </p>
                                    
                                </td>
                                
                                <td class="side" align="right"> <!-- Dit is de grijze rechterkant van de website -->
                                    
                                    <table cellpadding="0" cellspacing="0" border="1"> <!-- Hier komt de tekst van de sidetabel -->
                                        <tr>
                                            <td class="sidetext" background="images/2_bg.gif">
                                                <img src="images/line1.gif" align="top">
                                                Hello world
                                            </td>
                                        </tr>
                                    </table> <!-- Sluiten tekst sidetabel -->
                                    
                                </td>
                                
                            </tr>
                        </table> <!-- Sluiten teksten -->
                        
                    </td>
                </tr>
            </table> <!-- Sluiten Main 2 -->
        </td>
    </tr>
</table> <!-- Sluiten Main 1 -->

</body>
</html>


Cascading Stylesheet:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

body {overflow: scroll; font-family:Tahoma, Arial; padding:0; margin:0; color:#6B6B6B}

br{font-size:10px}
  .s{font-family:Tahoma, Arial; font-size:11px;  color:#9A9A9A; text-decoration:none}

.green{font-family:Tahoma, Arial; font-size:11px;  color:#219E00;}
  .red{font-family:Tahoma, Arial; font-size:11px;  color:#2C7F06;}
  .o{font-family:Tahoma, Arial; font-size:11px;  color:#FFCC00;}

.blue1{font-family:Tahoma, Arial; font-size:9px;  color:#009AE1;}
  .w{font-family:Tahoma, Arial; font-size:11px;  color:#FFFFFF; }

.b{font-family:Tahoma, Arial; font-size:11px;  color:#6B6B6B;  text-decoration:none}
.b1{font-family:Tahoma, Arial; font-size:12px;  color:#000000;  text-decoration:none}
.b2{font-family:Tahoma, Arial; font-size:11px;  color:#6B6B6B;  }

#green a:link {font-family:Tahoma; font-size:11px; font-weight: bold; color:#219E00; text-decoration:underline}
#green a:visited {font-family:Tahoma; font-size:11px; font-weight: bold; color:#219E00; text-decoration:underline}
#green a:active {font-family:Tahoma; font-size:11px; font-weight: bold; color:#219E00; text-decoration:underline}

a:link {font-family:Tahoma, Arial; font-size:13px; color:#6B6B6B; text-decoration:none}
a:visited {font-family:Tahoma, Arial; font-size:13px; color:#6B6B6B; text-decoration:none}
a:active {font-family:Tahoma, Arial; font-size:13px; color:#6B6B6B; text-decoration:none}
a:hover {font-family:Tahoma, Arial; font-size:13px; color:#6B6B6B; text-decoration:underline}

#under a:link {font-family:Tahoma, Arial; font-size:11px; color:#6B6B6B; text-decoration:none}
#under a:visited {font-family:Tahoma, Arial; font-size:11px; color:#6B6B6B; text-decoration:none}
#under a:active {font-family:Tahoma, Arial; font-size:11px; color:#6B6B6B; text-decoration:none}
#under a:hover {font-family:Tahoma, Arial; font-size:11px; color:#6B6B6B; text-decoration:underline}

#adres {font-family:Tahoma, Arial; font-size:11px; color:#6B6B6B; text-align: right} 
 

  #input{
        width:160px; height:21px;
        
        }
         
#input1{
        width:134px; height:21px;
        
        }
        
#textarea   {
    width:102px; height:48px;
    border-width:1px;
    border-style:solid;
    border:none;
    background-color:#F0EAE3;
    overflow:auto
}

.form {
    font-size: 11px;
}

.form #green {
    font-family:Tahoma;
    font-size:11px;
    font-weight: bold;
    color:#219E00;
}

.teksten {
    padding-top: 10px;
    padding-left: 10px;
    width: 340px;
    font-family: Tahoma, Arial, sans-serif;
    font-size:11px;
    color:#6B6B6B;
}

.teksten #titel {
    color:#219E00;
    font-weight: bold;
}

.tussenlijn {
    height: 6px;
}

.side {
    width: 340px;
    vertical-align: top;
    padding-top: 20px;
    padding-left: 10px;
}

.sidetext {
    width: 310px;
    height: 310px;
    vertical-align: top;
    background-position: top left;
    background-repeat: no-repeat;
}

Weet iemand dit probleem op te lossen?
Ik hoop het...
Met dank!


Maarten

maandag 30 oktober 2006 11:51

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 14:48

André

Analytics dude

Je kunt natuurlijk ook tables alleen gebruiken voor wat ze bedoeld zijn: het weergeven van tabulaire data en niet voor layoutzaken. Dan voorkom je een hoop ergernis door dit soort dingen.

Verder gok ik dat ergens een padding/margin verstopt zit, heb je die allemaal al weggehaald.

maandag 30 oktober 2006 11:59

Acties:

Verwijderd

Topicstarter
<div>jes bedoel je?

maandag 30 oktober 2006 12:03

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 14:48

André

Analytics dude

Onder andere ja, maar niet alleen 'div'-jes. De juiste element voor de juiste doeleinden.

maandag 30 oktober 2006 15:22

Acties:
  • Coju
  • Registratie: Oktober 2000
  • Niet online

Coju

Ook een class name als green in je css hoort niet. De naam moet niet iets over de layout maar over de inhoud zeggen.

maandag 6 november 2006 09:15

Acties:

Verwijderd

Topicstarter
Bedankt voor de reacties!

Ik heb nu een combo gemaakt van Div en Table. Met Divs alleen krijg ik vaak problemen met het verschil van pixelinterpretatie van firefox tegenover internet explorer. Nog had ik veel problemen, vooral met de interpretatie van width="100%". |:( Maar met gesmokkel heb ik het nu 'goed' gekregen. Toch erger ik me er elke keer weer aan en ik droom tegenwoordig dagelijks van een standaard interpretatie van alle browsers... :z

groet
Maarten

maandag 6 november 2006 09:19

Acties:

Verwijderd

André schreef op maandag 30 oktober 2006 @ 11:51:
Je kunt natuurlijk ook tables alleen gebruiken voor wat ze bedoeld zijn: het weergeven van tabulaire data en niet voor layoutzaken. Dan voorkom je een hoop ergernis door dit soort dingen.

Verder gok ik dat ergens een padding/margin verstopt zit, heb je die allemaal al weggehaald.
En waarom precies zou je tabulaire data niet geheel rechts uit willen/mogen lijnen? Dat heeft verder toch niks met lay-out te maken.

En daarnaast: als het werkt, laat de mensen toch lekker tabellen voor lay-out gebruiken. Het gaat erom dat het makkelijker is om een zelfde resultaat te behalen. Laat het echt werk maar aan de echte webdesigners over.

maandag 6 november 2006 10:23

Acties:
  • pietje63
  • Registratie: Juli 2001
  • Laatst online: 21:33

pietje63

RTFM

Verwijderd schreef op maandag 06 november 2006 @ 09:19:
[...]
En daarnaast: als het werkt, laat de mensen toch lekker tabellen voor lay-out gebruiken. Het gaat erom dat het makkelijker is om een zelfde resultaat te behalen. Laat het echt werk maar aan de echte webdesigners over.
Waarom niet altijd perfectie nastreven? Een goed opgezette site (dus niet met tabellen etc) is in de toekomst een stuk makkelijker bij te houden. Ik met het nu ook al tijdens het bouwen van een site. Een header plaatje bleek opeens toch een stukje hoger te worden; ik hoefde maar 2 getallen in mijn css te wijzigen en de site zag er weer perfect uit.

Verder geeft de TS als argument tegen div's het pixel probleem tussen ff/ie terwijl zijn probleem ook te maken heeft met een probleem tussen verschillende browsers..

En ja, ik herken het pixelprobleem wel.. Heb op 1 plaats ok een hack moeten gebruiken om dit op te lossen.. maar met tabellen vind ik het over het algemeen nog lastiger om te zien wat de browse nu precies doet.

Maar als je met tabellen verder wilt kun je misschien een keer je document doorlopen met een dom inspector; daar zie je vaak mee wat het volgens de browser is. (zou het misschien een border/padding etc van het plaatje (gok ik..) dat je daar neer zet kunnen zijn?

De grootste Nederlandstalige database met informatie over computers met zoekfunctie!!

maandag 6 november 2006 11:43

Acties:
  • moozzuzz
  • Registratie: Januari 2005
  • Niet online

moozzuzz

Zowel padding van de 2de <table> als van de <td> staan op 0 (ik kan het niet meteen op die manier in je css terugvinden) ?
Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq