Toon posts:

[html]IE doet niet wat ik wil...

Pagina: 1
Acties:

woensdag 11 juni 2003 23:35

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
Dit is wat ik wil:

(zo ziet het er in mozilla phoenix uit)
Afbeeldingslocatie: http://62.108.21.134/got/phoenix.png

Maar, zo ziet het er in IE (6) uit
Afbeeldingslocatie: http://62.108.21.134/got/kut_ie.png

Op 1 of andere manier rekt IE de cel linksonder helemaal tot ie even breed is als die cell (met colspan=2) daarboven. Ik krijg dit niet goed.

dit is de code:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <style type="text/css">
 .topSpace {
    background-color: #F00;
    height: 40px;
    }
 .pageTitle {
    height: 40px;
    font-size: 24pt;
    text-align: right;
    padding-right: 30px;
    }
 </style>
</head>

<body>

<table width="800" class="TblNul">
<tr>
 <td width="250" height="40" colspan="2" valign="top">
    <div class="topSpace">&nbsp;</div>
    <a href="/">[img]"button1.gif"[/img]</a><br>
    <a href="/">[img]"button1.gif"[/img]</a><br>
    <a href="/">[img]"button1.gif"[/img]</a><br>
 </td>
 <td width="550" colspan="3" valign="top">
    <div class="topSpace">&nbsp;</div>
    <div class="pageTitle">Bla</div>
    <div class="content">
        content<br>
    </div>
 </td>
</tr>
<tr> 
 <td width="125" style="background-color: #F00">
    [img]"empty.gif"[/img]
 </td>
 <td colspan="2" style="background-color: #0F0">
    <a href="/index.html">[img]"empty.gif"[/img]</a>
 </td>
 <td width="170" style="background-color: #F0F">
    [img]"empty.gif"[/img]
 </td>
 <td style="width=255; vertical-text: top; background-color: #00F">
    [img]"../images/empty"[/img]
 </td>
</tr>
</table>

</body>
</html>


(heb alle overbodige troep er even uitgehaald - maar deze code produceert dus wel precies die twee plaatjes)

[ Voor 59% gewijzigd door marty op 12-06-2003 01:41 . Reden: even wat leesbaarder gemaakt ]

woensdag 11 juni 2003 23:37

Acties:
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 19-08 22:14

Bosmonster

*zucht*

als je dan toch met CSS bezig ben, waarom gebruik je deze dingen dan door elkaar :?


code:
1
2

<td width="125"...
<td style="width=255...



in CSS is het trouwens width:255, niet width=255 :) Dat leest dus alleen IE.

Converteer dan eerst alles eens naar CSS.

[ Voor 22% gewijzigd door Bosmonster op 11-06-2003 23:38 ]

donderdag 12 juni 2003 00:00

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
Bosmonster schreef op 11 June 2003 @ 23:37:
als je dan toch met CSS bezig ben, waarom gebruik je deze dingen dan door elkaar :?


code:
1
2

<td width="125"...
<td style="width=255...

Eh..nou. Dat komt: ik heb een website in m'n schoenen geschoven gekregen waar ik wat interactiviteit moet inbouwen. En ik hou me normaal gesproken niet met het designen bezig (alleen php) en dit was gewoon een poging er alvast íets van te maken :) Ben nog een beetje onzeker over CSS en wilde eerst de site ff html-valide krijgen (ben daar al flink lang mee bezig geweest, want was echt een rotzooitje). Als ie dan eenmaal goed was wilde ik pas de puntjes op de i gaan zetten qua css. En ik had niet het idee dat het veel zou uitmaken op dit punt.
in CSS is het trouwens width:255, niet width=255 :) Dat leest dus alleen IE.
Ja, zover ben ik gelukkig al wel :) was een foutje die er ingeslopen was toen ik de overbodige code er uit haalde voor het voorbeeld
Converteer dan eerst alles eens naar CSS.
k, done:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <style type="text/css">
 .topSpace {
    background-color: #F00;
    height: 40px;
    }
 .pageTitle {
    height: 40px;
    font-size: 24pt;
    text-align: right;
    padding-right: 30px;
    }
 </style>
</head>

<body>

<table width="800" class="TblNul">
<tr>
 <td style="width: 250px; height: 40;" colspan="2">
    <div class="topSpace">&nbsp;</div>
    <a href="/">[img]"button1.gif"[/img]</a><br>
    <a href="/">[img]"button1.gif"[/img]</a><br>
    <a href="/">[img]"button1.gif"[/img]</a><br>
 </td>
 <td style="width: 550px;" colspan="3">
    <div class="topSpace">&nbsp;</div>
    <div class="pageTitle">Bla</div>
    <div class="content">
        content<br>
    </div>
 </td>
</tr>
<tr> 
 <td style="width: 125px; background-color: #F00">
    [img]"empty.gif"[/img]
 </td>
 <td colspan="2" style="background-color: #0F0">
    <a href="/index.html">[img]"empty.gif"[/img]</a>
 </td>
 <td style="width: 170px; background-color: #F0F">
    [img]"empty.gif"[/img]
 </td>
 <td style="width: 255px; vertical-text: top; background-color: #00F;">
    [img]"empty"[/img]
 </td>
</tr>
</table>

</body>
</html>


p.s. Probleem bleef dus ongewijzigd....

[ Voor 43% gewijzigd door marty op 12-06-2003 01:39 . Reden: even wat leesbaarder gemaakt ]

maandag 16 juni 2003 20:14

Acties:

Verwijderd

foutje

[ Voor 99% gewijzigd door Verwijderd op 16-06-2003 21:57 . Reden: foutje ]

maandag 16 juni 2003 21:57

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
* klein kickje *

Ik heb dus alles geconverteerd zoals bosmonster vroeg, en zit nog steeds met hetzelfde probleem. Is er iemand die me kan helpen??

p.s. die vertical-text moet overigens vertical-align zijn :)

maandag 16 juni 2003 22:15

Acties:
  • djluc
  • Registratie: Oktober 2002
  • Laatst online: 21-08 18:29

djluc

Waarom wil je hiervoor een tabel gebruiken? Ik denk dt je dit probleem beter met behulp van div's op kunt lossen. Dan heb je namelijk niet meer het probleem dat de tabel niet helemaal klopt.

dinsdag 17 juni 2003 00:01

Acties:
  • Glabbeek
  • Registratie: Februari 2001
  • Laatst online: 20-08 07:55

Glabbeek

Dat dus.

Ik snap eigenlijk wel dat IE je code niet gaat snappen, omdat het niet duidelijk is hoe breed elke td moet zijn, door de colspans. Hieronder probeer ik een schematische weergave van de tabel te maken:
code:
1
2
3
4
5
6
7
8
9

 <-----250px-----> <--------550px-------->
 -----------------------------------------
|        :        |       :      :        |
|        :        |       :      :        |
|-----------------------------------------|
|        |        :       |      |        |
|        |        :       |      |        |
 -----------------------------------------
   125px  (niet opgegeven)  170px   255px

Hierbij zijn -- en | cellborders en : virtuele borders ivm spans.

Ten eerste vraag ik me af of je een width ook voor een span kan opgeven, want welke cel moet welk stuk van de width krijgen? Met een beetje rekenen kom je er wel uit, maar dat weet je pas als je de hele tabel geparst hebt, en dan ik het denk ik al te laat voor IE.

Als je er een lege rij boven plaatst zonder spans snappen zowel IE als Mozilla de tabel wel en ziet het er goed uit, doordat elke cel een breedte opkrijgt:

HTML:
1
2
3
4
5
6
7
8
9

<table width="800" class="TblNul">
<tr>
 <td style="width: 125px" />
 <td style="width: 125px" />
 <td style="width: 175px" />
 <td style="width: 170px" />
 <td style="width: 205px" />
</tr>
  ...de rest van de table, zoals je al hebt...


Ter verduidelijking, je table wordt dan dus zo:

code:
1
2
3
4
5
6
7
8
9

 -------- -------- ------- ------ --------   
| 125px  | 125px  | 175px | 170px| 255px  | <- 0 hoog, want geen content
 -----------------------------------------
|        :        |       :      :        |
|        :        |       :      :        |
|-----------------------------------------|
|        |        :       |      |        |
|        |        :       |      |        |
 -----------------------------------------


Succes ermee :)

[ Voor 21% gewijzigd door Glabbeek op 17-06-2003 00:04 . Reden: Nieuwe situatie getekend ]

En zo is het maar net.

dinsdag 17 juni 2003 00:28

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
Glabbeek schreef op 17 June 2003 @ 00:01:
Ik snap eigenlijk wel dat IE je code niet gaat snappen, omdat het niet duidelijk is hoe breed elke td moet zijn, door de colspans.
Nou, eigenlijk staat het er wel. Als ik op een bepaalde regel aangeef dat een en cel met colspan=2 250px is en verderop dat de eerste van die 2 125px is, dan lijkt het me duidelijk dat de tweede ook 125px is. Stom natuurlijk van mij om aan te nemen dat IE dat ook snapt. Ik zal voortaan alles wat beter voorkauwen :)
HTML:
1
2
3
4
5
6
7
8
9

<table width="800" class="TblNul">
<tr>
 <td style="width: 125px" />
 <td style="width: 125px" />
 <td style="width: 175px" />
 <td style="width: 170px" />
 <td style="width: 205px" />
</tr>
  ...de rest van de table, zoals je al hebt...
Heel erg bedankt! Dat werkt inderdaad :D
Pagina: 1
Reageer