Toon posts:

Site ziet er anders uit in ie dan in opera en ff

Pagina: 1
Acties:

Verwijderd

Topicstarter
Voor de basketbal vereniging waar ik lid van ben. Beheer ik de website www.dedein.nl. Momenteel ben ik bezig met een nieuwe versie. Deze versie ziet er op het oog het zelfde uit. De site moet alleen toegankelijk worden in alle resoluties met de huidige site is dat nog niet mogelijk.

De nieuwe (test) versie van de lay-out staat op: http://www.dedein.nl/test/default5.asp
In Firefox en Opera ziet hij er goed uit. Ook komt hij door de w3c validator. Zodra ik de site in IE open ziet de lay-out er niet uit. In de code heb ik al vast een onderverdeling gemaakt voor toekomstige items (content menu etc.). Deze heb ik uit de test versie gehaald om het geheel wat overzichtelijk te maken.

Heeft iemand een idee wat ik fout doe?

B.V.D

LB
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
            <title>Dedein</title>
            <link href="css/totaal.css" rel="stylesheet" type="text/css">
    </head>

    <body>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr style="height:96px; ">
                    <td rowspan="3">
                    <!-- menu -->
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td style="background-image: url('images/achtergrond.gif'); width:170px; padding-bottom:10px;">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <tr> 
                                    <td><img src="images/kop.jpg" style="width:175px;" alt="bovenstukmenu">
                                    </td>
                                    </tr>
                                    <tr> 
                                    <td style="vertical-align:top; width:123px; background-image: url('images/spacer.gif');"> 
                                         <table border="0" cellspacing="0" cellpadding="0" >
                                            <tr>
                                            <td >
                                            <!-- buttons -->
                                            </td>
                                            </tr>
                                            <tr> 
                                            <td valign="top"><img src="images/spacer.gif" style="width:123px;" alt="spacer">
                                            </td>
                                            </tr>
                                        </table>
                                    </td>
                                    </tr>
                                    </table>
                            </td>
                            </tr>
                        </table>
                        </td>
                        <td>
                        <img src="images/header.jpg" style="width:585px;" border="0" alt="header">
                        </td>
                        <td style="background-color:#D75A22; width:100%">
                        </td>
                    </tr>
                    <tr style="height:31px; ">
                    <!--Deleted cell-->
                        <td style="background-color:#D75A22;">
                        <img style="height:42px; " src="images/headerhome.jpg" border="0" alt="titel content" />
                        </td>
                        <td style="background-image: url('images/headeraanvulling.jpg'); width:100%;">
                        </td>
                    </tr>
                    <tr>
                        <!-- Deleted cell -->
                    <td colspan="2" valign="top">
                    <!--content -->
                    testtestetstetsestseteset
                    tstesetsetesetesestesteestest
                    estseetstesteststsetset
                    estsettestest
                    esteste
                    </td>
                    </tr>
                    <tr>
                    <td colspan="3">
                    <!-- footer -->
                    </td>
                    </tr>
                </table>

    </body>
</html>

Verwijderd

Je hebt de site ook vrij aparte opgezet. persoonlijk zou ik als eerst zeggen, doe is onderzoek naar Div/css ipv te ontwerpen met tables.

Div gebruik je voor layouts en tables voor database output bijvoorbeeld.

probeer je code is zo ipv via style=""

<tr width="100%" height="20">
<Td></td>
</tr>

waarschijnlijk helpt dit al!

de reden waarom hij er in verschillende browsers anders uitziet is omdat browser de code anders interpreteren.

Verwijderd

Ik bespeur ook een aantal props die je set die eigenlijk alleen maar verkeerd gerendert zouden kunnen worden.
Verwijderd schreef op dinsdag 01 mei 2007 @ 16:17:
HTML:
17
18
19
20
21
22
<td style="background-image: url('images/achtergrond.gif'); width:170px; padding-bottom:10px;">
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="images/kop.jpg" style="width:175px;" alt="bovenstukmenu">
            </td>
        </tr>
De cell 170 px breed maken en dan een image erin plaatsen die 175 px moet zijn?
Verwijderd schreef op dinsdag 01 mei 2007 @ 16:17:
HTML:
32
<td valign="top"><img src="images/spacer.gif" style="width:123px;" alt="spacer">
Een image die 123x123 px is plaatsen (en breedte 123 px opgeven) in een row die 96 px is.

Persoonlijk controleer is zulke dingen altijd, en het is ook een goede zaak om de browser zelf z'n weg te laten kiezen.