CSS probleem in IE
ik ben voor iemand een layout aan het maken, maar in Internet Explorer staat de content een stuk onder de bovenkant en in FireFox. Ik heb tot nu toe deze code:
Code (php)
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
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 XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tijmen Helder</title>
<style type="text/css">
div#container {margin: 0 auto; width: 651px;}
div#content {float: right; width: 472px;}
div#menu {float:left; width: 165px;}
div#inhoud {overflow:hidden;}
div.menuheader {height: 7px; width: 165px; background: url('menuheader.png') center top no-repeat;}
div.menucontent {width: 165px; background: url('menubac.png') center top repeat-y;}
div.menutekst {padding-left: 3px; padding-right: 3px;}
div.menufooter {width: 165px; height: 7px; background: url('menufooter.png') center top no-repeat;}
div.contentheader {height: 7px; width: 472px; background: url('contentheader.png') center top no-repeat; padding-bottom: 0px;}
div.contentcontent {width: 472px; background: url('contentbac.png') center top repeat-y;}
div.contenttekst {padding-left: 3px; padding-right: 3px;}
div.contentfooter {width: 472px; height: 7px; background: url('contentfooter.png') center top no-repeat;}
</style>
</head>
<body bgcolor="#a1d5ed">
<div id="container">
<div id="inhoud">
<div id="menu">
<div class="menuheader"></div>
<div class="menucontent">
<div class="menutekst">
Hallo <br />
Hallo<br />
</div>
</div>
<div class="menufooter"></div>
</div>
<div id="content">
<div class="contentheader"></div>
<div class="contentcontent">
<div class="contenttekst">
Content tekst
</div>
</div>
<div class="contentfooter"></div>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tijmen Helder</title>
<style type="text/css">
div#container {margin: 0 auto; width: 651px;}
div#content {float: right; width: 472px;}
div#menu {float:left; width: 165px;}
div#inhoud {overflow:hidden;}
div.menuheader {height: 7px; width: 165px; background: url('menuheader.png') center top no-repeat;}
div.menucontent {width: 165px; background: url('menubac.png') center top repeat-y;}
div.menutekst {padding-left: 3px; padding-right: 3px;}
div.menufooter {width: 165px; height: 7px; background: url('menufooter.png') center top no-repeat;}
div.contentheader {height: 7px; width: 472px; background: url('contentheader.png') center top no-repeat; padding-bottom: 0px;}
div.contentcontent {width: 472px; background: url('contentbac.png') center top repeat-y;}
div.contenttekst {padding-left: 3px; padding-right: 3px;}
div.contentfooter {width: 472px; height: 7px; background: url('contentfooter.png') center top no-repeat;}
</style>
</head>
<body bgcolor="#a1d5ed">
<div id="container">
<div id="inhoud">
<div id="menu">
<div class="menuheader"></div>
<div class="menucontent">
<div class="menutekst">
Hallo <br />
Hallo<br />
</div>
</div>
<div class="menufooter"></div>
</div>
<div id="content">
<div class="contentheader"></div>
<div class="contentcontent">
<div class="contenttekst">
Content tekst
</div>
</div>
<div class="contentfooter"></div>
</div>
</div>
</div>
</body>
</html>
Een werkend voorbeeld: http://84.81.112.217/tijmen/index1.htm
Kan iemand misschien zeggen wat ik moet/kan veranderen aan mijn code om het ook IE te laten werken? Alvast bedankt.
Arthur
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<!--[if IE]>
<style>
div.content{
//deze stijl geld alleen voor ie
}
</style>
<![endif]-->
<style>
div.content{
//deze stijl geld alleen voor ie
}
</style>
<![endif]-->
En dan kan je tussen <style> en </style> de css opgeven die alleen voor ie geld.
ik zie hem in IE en FF hetzelfde.
als je bedoeld dat je tekst helemaal links staat, voeg eens een padding-left toe
@Mathijs, ik wil graag een CSS code die voor alle browsers gelijk is.
Krijg je in IE 7 een goed beeld of slecht beeld?
In ieder geval hardstikke bedankt, het probleem is opgelost!
Dat helpt ook al !
Sowieso kun je er vraagtekens bij zetten wanneer je lege divs voor een lay-out gaat gebruiken. Meestal is het niet nodig, zelfs niet om floats te clearen.