:strip_icc():strip_exif()/u/63476/ResistanceAvatarLogo.jpg?f=community){kind=avatar}
Tijdens het weekend heb ik op mijn Mac een website inelkaar geknutseld en alles ziet er prima uit in FF, Opera en Safari.
Vandaag op mijn werk had ik kans om het ook in IE te testen en natuurlijk ziet het er niet uit zoals ik wil.
Er zijn 2 problemen
1e probleem is dat als ik mijn browser venster kleiner maak dat de min-width niet herkent wordt door IE. Hiervoor heb ik dus al een oplossing gevonden, en zal ik later aanpassen.
2e probleem is dat ik een container div heb met daar in een menu div (float) en main div.
De main div begint op dezelfde hoogte als de menu div in elke browser maar niet in IE. Helaas is mijn kennis van CSS alleen goed genoeg om volgens de regels te schrijven en geen idee heb hoe ik dit moet oplossen. Ik heb rond gekeken naar IE hacks, maar ik weet helaas niet wat voor een bug het is, dus ik weet ook niet welke hack ik moet gebruiken.
Dit soort topics zal wel vaker voorkomen en hoef geen complete oplossing, alleen een pointer naar welke bug dit is en welke hack daarvoor gebruikt moet worden.
Alvast bedankt.
De website is http://82.22.253.16/ (voorzichtig, het is maar een thuis server)
De html hiervoor (ik heb de php code er uitgehaald maar idee is hetzelfde)
De CSS die ik gebruik
Vandaag op mijn werk had ik kans om het ook in IE te testen en natuurlijk ziet het er niet uit zoals ik wil.
Er zijn 2 problemen
1e probleem is dat als ik mijn browser venster kleiner maak dat de min-width niet herkent wordt door IE. Hiervoor heb ik dus al een oplossing gevonden, en zal ik later aanpassen.
2e probleem is dat ik een container div heb met daar in een menu div (float) en main div.
De main div begint op dezelfde hoogte als de menu div in elke browser maar niet in IE. Helaas is mijn kennis van CSS alleen goed genoeg om volgens de regels te schrijven en geen idee heb hoe ik dit moet oplossen. Ik heb rond gekeken naar IE hacks, maar ik weet helaas niet wat voor een bug het is, dus ik weet ook niet welke hack ik moet gebruiken.
Dit soort topics zal wel vaker voorkomen en hoef geen complete oplossing, alleen een pointer naar welke bug dit is en welke hack daarvoor gebruikt moet worden.
Alvast bedankt.
De website is http://82.22.253.16/ (voorzichtig, het is maar een thuis server)
De html hiervoor (ik heb de php code er uitgehaald maar idee is hetzelfde)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="container">
<div id="menu">
<div id="menu_top"><div></div></div>
<div id="menu_content"><p>Menu</p></div>
<div id="menu_bottom"><div></div></div>
</div>
<div id="main">
<div id="main_top"><div></div></div>
<div id="main_content">Content here</div>
<div id="main_bottom"><div></div></div>
</div>
</div> |
De CSS die ik gebruik
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
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| /* page information */
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html {
height: 100%;
background-color: #ccc;
color: #000;
}
body {
position: relative;
width: 90%;
min-height: 100%;
margin: auto;
}
/* Header / menu / main Locatie information */
#header {
background-color: #39c;
width: 100%;
min-width:760px;
}
#container {
min-width:760px;
padding-bottom: 60px;
padding-top: 10px;
height: 100%;
background-color: #ccc;
color: #000;
}
#menu {
float: left;
width: 150px;
background-color: #39C;
color: #000;
margin-right: 10px;
right: 150px;
}
#main {
background-color: #39c;
color: #000;
margin-left: 160px;
}
.entry {
margin-top: 5px;
background-color: #ccc;
}
.title {
margin-top: 10px;
background-color: #ccc;
}
/* corner setup */
#header_top div, #menu_top div, #main_top div {
background: url(/img/tl.png) top left no-repeat;
width: 100%;
height: 10px;
}
#header_top, #menu_top, #main_top {
background: url(/img/tr.png) top right no-repeat;
width: 100%;
}
#header_bottom div, #menu_bottom div, #main_bottom div {
background: url(/img/bl.png) bottom left no-repeat;
width: 100%;
height: 10px;
}
#header_bottom, #menu_bottom, #main_bottom {
background: url(/img/br.png) bottom right no-repeat;
width: 100%;
}
.title_top div, .entry_top div {
background: url(/img/itl.png) top left no-repeat;
width: 100%;
height: 5px;
}
.title_top, .entry_top {
background: url(/img/itr.png) top right no-repeat;
width: 100%;
}
.title_bottom div, .entry_bottom div {
background: url(/img/ibl.png) bottom left no-repeat;
width: 100%;
height: 5px;
}
.title_bottom, .entry_bottom {
background: url(/img/ibr.png) bottom right no-repeat;
width: 100%;
}
/* Content Info for header / menu / main */
#header_content p {
text-align: center;
}
#main_content {
margin: 10px;
}
#menu_content {
margin-left: 10px;
}
.entry_content, .title_content {
margin-left: 10px;
}
/* Footer Info */
#footer {
position: absolute;
width:100%;
bottom: 0;
left: 0;
height: 40px;
color: gray;
}
#footer p {
text-align: center;
} |
:strip_exif()/u/25264/momentum.gif?f=community)
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
