Toon posts:

[css] Layout is correct in Firefox, niet in IE

Pagina: 1
Acties:

donderdag 21 juli 2005 16:27

Acties:
  • addictive
  • Registratie: Maart 2003
  • Laatst online: 19-04 19:27

addictive

Topicstarter
Ik heb in photoshop een layout gemaakt, deze netjes gesliced en gecode. In FF werkt deze zoals ik het wil, maar IE (en ook Opera) maken er een zooitje van.

Ik heb zelf geen idee hoe ik dat kan oplossen.

Een versimpelde versie van de layout is hier te vinden: http://www.133t.nl/layout/


De bijbehoorende code plaats ik hier niet, omdat ik "in de breedte" code en dat de layout van GoT niet ten goede komt ;)

HTML code:
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

<html>
    <head>
        <title>
            layout test
        </title>
        <link rel="stylesheet" type="text/css" href="style/style.css" />
    </head>
    <body>
        <div id="page">
            <div id="container">

                <center>
                    <div id="menu_links">
                        [img]"images/spacer.gif"[/img]

                        [img]"images/spacer_white.gif"[/img]
                        [img]"images/spacer_white.gif"[/img][img]"images/spacer.gif"[/img][img]"images/spacer_white.gif"[/img]
                        [img]"images/spacer_white.gif"[/img]
                        [img]"images/spacer_white.gif"[/img]
                    </div>

                    <div id="menu_rechts">
                        [img]"images/spacer.gif"[/img]
                        [img]"images/spacer_white.gif"[/img]
                        [img]"images/header_inloggen.jpg"[/img]
                            <div id="menu_item">
                                <b>ACCOUNT AREA</b><br><br><br><br><br><br><br><br>
                            </div>
                        [img]"images/spacer_white.gif"[/img]

                        [img]"images/header_forum_replys.jpg"[/img]
                            <div id="menu_item">
                                <b>FORUM AREA</b><br><br><br><br><br><br><br><br>
                            </div>
                        [img]"images/spacer_white.gif"[/img]

                        [img]"images/header_poll_vd_week.jpg"[/img]
                            <div id="menu_item">

                                <b>POLL AREA</b><br><br><br><br><br><br><br><br>
                            </div>
                        [img]"images/spacer_white.gif"[/img]
                    </div>

                    <div id="top_menu">
                        [img]"images/menu.jpg">
                    </div>

                    <div[/img]
                        Submenu enzo ;)
                    </div>

                    <div id="spacer_left">
                    </div>

                    <div id="latest_reviews">

                    </div>                  

                    <div id="content_border">

                        <div id="content_area">
                            Hier de basis content<br><br>
                            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        </div>
                    </div>



                    <div id="footer">
                        footer
                    </div>

                </center>
            </div>
        </div>
    </body>
</html>



CSS code:
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
96
97
98
99
100
101
102
103
104
105
106
107
108

/* Basis Dingen */
#page {
    background-color: transparent;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}


#container {
    width:976px;
    height: 250px;
    margin:0 auto;
    margin-top: 10px;
    text-align: left;
}


body {
    background-color:#000000;
    background-image:url(../images/bg.gif);
    color:#FFFFFF;
    font-family:Verdana;
    font-size:10px;
    margin-top:10px;
    margin-bottom: 0px;
}


/* Inhoud DIV's */

#top_menu {
    width:686px;
    height:79px;
    margin:0px;
    text-align: center;
    border-top:10px solid #FFFFFF;
    border-left:10px solid #FFFFFF;
    border-right:10px solid #FFFFFF;
}


#sub_menu {
    width:686px;
    height:26px;
    margin:0px;
    background-image:url(../images/bg_submenu.jpg);
    text-align: center;
    line-height:26px;
    border-left:10px solid #FFFFFF;
    border-right:10px solid #FFFFFF;
    border-bottom:10px solid #FFFFFF;
}


#content_border {
    width:686px;
    background-color:#000000;
    text-align:left;
    border-left:10px solid #FFFFFF;
    border-right:10px solid #FFFFFF;
}


#content_area {
    width:666px;
    padding:10px;
    background-color:#000000;
    text-align:left;
}


#footer {
    width:686px;
    line-height:26px;
    background-image:url(../images/bg_footer.jpg);
    text-align:center;
    line-height:26px;
    border-left:10px solid #FFFFFF;
    border-right:10px solid #FFFFFF;
    border-bottom:10px solid #FFFFFF;
}


/* Overige zut */
#menu_links {
    width:125px;
    height:125px;
    float:left;
    background-image:url(../images/logo.gif);
}


#menu_rechts {
    width:125px;
    height:125px;
    float:right;
}


#menu_item {
    width:185px;
    text-align:left;
    padding-left:15px;
    background-image:url(../images/header_bg.jpg);
}

[ Voor 128% gewijzigd door addictive op 21-07-2005 16:35 ]

donderdag 21 juli 2005 16:28

Acties:
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Je kunt code gewoon posten hoor :?

code:
1

blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla


Wat betreft je probleem: Ik denk (op het eerste oog) dat je eens even moet kijken naar je margins/paddings en boxmodeling. Maar dat is na 3 seconden kijken...

[ Voor 23% gewijzigd door RobIII op 21-07-2005 16:29 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 juli 2005 16:32

Acties:
  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024

faabman

- waarom gebruik je "spacer" images?? dat moet je ook met CSS op kunnen lossen
- je kunt even zoeken op 3 column layout, want daar ben je feitelijk mee bezig

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

donderdag 21 juli 2005 16:37

Acties:
  • addictive
  • Registratie: Maart 2003
  • Laatst online: 19-04 19:27

addictive

Topicstarter
RobIII schreef op donderdag 21 juli 2005 @ 16:28:
Je kunt code gewoon posten hoor :?

code:
1

blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
done :)
Wat betreft je probleem: Ik denk (op het eerste oog) dat je eens even moet kijken naar je margins/paddings en boxmodeling. Maar dat is na 3 seconden kijken...
Probleem is juist dat ik niet weet waarom FF de code wel gewoon goed parst, maar IE niet
faabman schreef op donderdag 21 juli 2005 @ 16:32:
- waarom gebruik je "spacer" images?? dat moet je ook met CSS op kunnen lossen
Enig idee hoe ik dat kan doen? :)
- je kunt even zoeken op 3 column layout, want daar ben je feitelijk mee bezig
Will do :)

donderdag 21 juli 2005 16:40

Acties:
  • JoostMartijn
  • Registratie: December 2003
  • Laatst online: 17-04-2025

JoostMartijn

Wat ik er van weet is dat Firefox en IE niet precies hetzelfde omgaan met CSS. Dit probleem is er ook met Javascript. Op internet zijn er veel voorbeelden te vinden hoe CSS en Javascript met bijde browsers overweg kunnen!

Je moet daar maar eens naar zoeken, ik heb zelf ook al vaak met dat probleem gezeten

Windsoft

donderdag 21 juli 2005 16:42

Acties:
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Wat je sowieso moet doen is je browser instellen op Strict mode. Zoals je nu je HTML hebt heb je je browser in Quirks mode.

http://www.quirksmode.org/css/quirksmode.html

Knal er dus iets boven als:
HTML:
1
2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

of
XHTML:
1
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ofzo... (natuurlijk afhankelijk van wat je wil... het ziet er uit als 4.01 transitional iig :P )

...en daarna natuurlijk effe checken of 'ie valid is volgens die Doctype: http://validator.w3.org/c...p%3A//www.133t.nl/layout/ -> Zo te zien kom je een heel eind, alleen effe ALT attributes op je images gooien en MENU_ITEM een CLASS maken i.p.v. een ID.

code:
1
2
3
4
5
6

    <head>
        <title>
            layout test
        </title>
        <link rel="stylesheet" type="text/css" href="style/style.css" />
    </head>

Wil je nou XHTML of HTML? :P
code:
1
2
3
4
5
6

    <head>
        <title>
            layout test
        </title>
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>

Spot the difference :Y)

[ Voor 128% gewijzigd door RobIII op 21-07-2005 16:50 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 juli 2005 17:01

Acties:
  • addictive
  • Registratie: Maart 2003
  • Laatst online: 19-04 19:27

addictive

Topicstarter
RobIII schreef op donderdag 21 juli 2005 @ 16:42:
Wat je sowieso moet doen is je browser instellen op Strict mode. Zoals je nu je HTML hebt heb je je browser in Quirks mode.

http://www.quirksmode.org/css/quirksmode.html

Knal er dus iets boven als:
HTML:
1
2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

of
XHTML:
1
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ofzo... (natuurlijk afhankelijk van wat je wil... het ziet er uit als 4.01 transitional iig :P )

...en daarna natuurlijk effe checken of 'ie valid is volgens die Doctype: http://validator.w3.org/c...p%3A//www.133t.nl/layout/ -> Zo te zien kom je een heel eind, alleen effe ALT attributes op je images gooien en MENU_ITEM een CLASS maken i.p.v. een ID.
Nu is 'ie geheel valid :)

Ik ben nu dit aan het lezen/bekijken. Erg handige site :) *bookmark*

donderdag 21 juli 2005 17:02

Acties:

Verwijderd

Al eerder opgemerkt, maar het gaat bij mij ook altijd fout bij de padding, het is net of Firefox deze niet leest.

#menu_item {
width:185px;
text-align:left;
padding-left:15px;
background-image:url(../images/header_bg.jpg);
}

Dus vetgedrukte eens aanpassen lijkt me.

donderdag 21 juli 2005 17:30

Acties:
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
addictive schreef op donderdag 21 juli 2005 @ 17:01:
[...]

Nu is 'ie geheel valid :)
Nou ja....
This Page Tentatively Validates
Zet dit nog eens in je head:
code:
1

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

(Of UTF-8 / ASCII of whatever...),
of beter, laat je server de juiste HTTP headers sturen :Y)

[ Voor 33% gewijzigd door RobIII op 21-07-2005 17:32 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 22 juli 2005 00:17

Acties:

Verwijderd

Verwijderd schreef op donderdag 21 juli 2005 @ 17:02:
Al eerder opgemerkt, maar het gaat bij mij ook altijd fout bij de padding, het is net of Firefox deze niet leest.

#menu_item {
width:185px;
text-align:left;
padding-left:15px;
background-image:url(../images/header_bg.jpg);
}

Dus vetgedrukte eens aanpassen lijkt me.
Firefox berekent de padding goed, binnen de DIV nml. IE rekent ''m buiten de DIV. Is je DIV 185px en je padding 15px, dan word in IE je totale breedte van je DIV dus 200px. In FF blijft hij gewoon 185px. Zie ook en hier.

[ Voor 4% gewijzigd door Verwijderd op 22-07-2005 11:07 ]

Pagina: 1
Reageer