:strip_exif()/u/108321/lucyeye2.gif?f=community)
Ik ben een tijdje bezig geweest met het maken van borders van divisions. Het kwam in me op, dat het wel leuk zou staan als ik gebruik zou maken van divisions met afgeronde hoeken. Na een tijdje experimenteren kwam ik er achter dat ik dit alleen zou kunnen doen door gebruik te maken van divisions binnen de divisie die elk hun eigen achtergrond hadden. Elke achtergrond is dan 7 bij 7 pixels groot en ronden de punten af door middel van transparantie.
De code (werkend met Firefox/Opera op http://jorik.zeepost.nl/corner/index.html):
Er is echter één probleem en dat is IE. In Internet Explorer werkt het niet naar behoren. Het werkt wel in Firefox of Opera.
Firefox / Opera:
Firefox / Opera met border rond de hoeken:
Internet Explorer:
Internet Explorer met border rond de hoeken:
Ik vraag me dus af wat de reden is dat IE de divisions zo groot maakt dat de randen niet meer kloppen. Iemand nog suggesties?
De code (werkend met Firefox/Opera op http://jorik.zeepost.nl/corner/index.html):
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>HTML</title> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1"> <link href="header.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"> <div id="corner_top_left"> </div> <div id="corner_top_right"> </div> <div id="corner_bottom_left"> </div> <div id="corner_bottom_right"> </div> <div id="header_content"> <br> Titel <br><br><br> Navigatie </div> </div> </body> </html> |
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
| body { background-color: white; margin: 10px; padding: 0px; font-family: Courier New, Arial, Helvetica, Sans-Serif; font-size: 1em; color: black } #header { position: relative; float: none; border: 0px solid #000000; background: #c0c0c0; padding: 0px; width: auto; height: 120px; } #corner_top_left { position: absolute; top: 0px; left: 0px; width: 7px; height: 7px; border: 0px solid #000000; margin: 0px; background: url("Afbeeldingen/corner top left.gif") no-repeat; padding: 0px; } #corner_top_right { position: absolute; top: 0px; right: 0px; width: 7px; height: 7px; border: 0px solid #000000; margin: 0px; background: url("Afbeeldingen/corner top right.gif") no-repeat; padding: 0px; } #corner_bottom_left { position: absolute; left: 0px; bottom: 0px; width: 7px; height: 7px; border: 0px solid #000000; margin: 0px; background: url("Afbeeldingen/corner bottom left.gif") no-repeat; padding: 0px; } #corner_bottom_right { position: absolute; right: 0px; bottom: 0px; width: 7px; height: 7px; border: 0px solid #000000; margin: 0px; background: url("Afbeeldingen/corner bottom right.gif") no-repeat; padding: 0px; } #header_content { position: relative; border: 0px solid #FFFFFF; margin: 0px; padding: 0px; text-align: center; } |
Er is echter één probleem en dat is IE. In Internet Explorer werkt het niet naar behoren. Het werkt wel in Firefox of Opera.
Firefox / Opera:
Firefox / Opera met border rond de hoeken:
Internet Explorer:
Internet Explorer met border rond de hoeken:
Ik vraag me dus af wat de reden is dat IE de divisions zo groot maakt dat de randen niet meer kloppen. Iemand nog suggesties?
"Only two things are infinite, the universe and human stupidity, and I'm not sure about the former."
"Peace cannot be kept by force. It can only be achieved by understanding."
Albert Einstein
:strip_exif()/u/8825/tweakersNEW.gif?f=community)
/u/7685/ruinmytune-60x60.png?f=community)
:strip_exif()/u/21721/avatar.gif?f=community){kind=avatar}
) :strip_exif()/u/99026/nicava.gif?f=community)
Niet dat dat nu de oplossing is. Maar ik kan niets anders verzinnen. Nu maar hopen dat IE v7 dit wel gaat ondersteunen. 