Toon posts:

[html & css] problemen met border in ie

Pagina: 1
Acties:

vrijdag 30 december 2005 15:19

Acties:
  • wilcodl
  • Registratie: September 2004
  • Laatst online: 30-03 22:55

wilcodl

Topicstarter
Ik ben bezig met een website, op die site heb ik ook een gastenboek. In dat gastenboek word een dashed border weergegeven onder de datum van plaatsing van het bericht. het probleem is dat bij het naar beneden scrollen in internet explorer die border ook aan de rechter en linker kant van de site word weergegeven, buiten het gastenboek. Ook wordt de dashed worder om het menu gedeeltelijk solid.
De site is hier te bekijken: http://81.206.236.112/wilcodl/index.php?page=gastenboek

Dit is de html code (ingekort):
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

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

<html>
<head>
   <title>Welkom op www.wilcodl.nl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="gastenboek.css"></head>

<body>
<div id="header"><h1 id="pagetitle">Titel</h1></div>
<div class="content">
<center><a href='index.php?page=toevoegen'>Berichtje plaatsen</a> :: <a href='index.php?page=gastenboek'>Alle berichten</a><br><br>Er staan <span class="gb_color">19</span> berichten in het gastenboek.<br><br><a href='index.php?page=gastenboek&amp;n=0'>&laquo; Vorige</a> [<a href='index.php?page=gastenboek&amp;n=0'>1</a>]  [<a href='index.php?page=gastenboek&amp;n=1'>2</a>] Volgende &raquo;</center><div class="gb_border">
    <div class="gb_naam">Wilco</div>
    <div class="gb_images"><a href='http://www.msnopschool.nl.nu' target=_blank>
[img]'images/pics/huis.gif'[/img]</a> <a href='mailto:wilcodl@gmail.com'>
[img]'images/pics/mail.gif'[/img]</a></div>
    <div class="gb_datum"><span class="gb_color">Geplaatst op: </span>27-12-2005 12:50:08</div>
    <div class="gb_bericht">Nog een!!!</div>
</div>
<div class="gb_border">
    <div class="gb_naam">Wilco de Lange</div>
    <div class="gb_images"> </div>
    <div class="gb_datum"><span class="gb_color">Geplaatst op: </span>27-12-2005 12:47:25</div>
    <div class="gb_bericht">Testbericht</div>
</div>
<div class="gb_border">
    <div class="gb_naam">Wilco de Lange</div>
    <div class="gb_images"> </div>
    <div class="gb_datum"><span class="gb_color">Geplaatst op: </span>3-12-2005 12:02:23</div>
    <div class="gb_bericht">test</div>
</div>
<center><a href='index.php?page=gastenboek&amp;n=0'>&laquo; Vorige</a> [<a href='index.php?page=gastenboek&amp;n=0'>1</a>]  [<a href='index.php?page=gastenboek&amp;n=1'>2</a>] Volgende &raquo;</center></div>

<div class="content">
   <h2>Lorem Ipsum</h2>
   <p>Sed tellus ipsum, faucibus ut, vulputate sit amet, vehicula dapibus, est. Vivamus elit. Integer  .</p>
</div>

<div class="content">
   <p><a href="http://www.gigadesign.be/contact.php" title="Bedank mij eens">&lt;&nbsp;:: Contacteer de ontwerper &nbsp;::&nbsp;&gt;</a></p>
</div>

<div id="left">
   <h2>Navigatie:</h2>
   <p>
      <a href="index.php?page=home" title="Home">Home</a><br>
      <a href="index.php?page=websites" title="Websites">Websites</a><br>
      <a href="index.php?page=overmij" title="Over mij">Over mij</a><br>
      <a href="index.php?page=gastenboek" title="Gastenboek">Gastenboek</a><br>
      <a href="index.php?page=contact" title="Contact">Contact</a><br>
   </p>
</div>

<div id="right">
   <h2>Vanalles:</h2>
<a href="http://validator.w3.org/check?uri=referer" target="blank">
<p style="text-align: center;">[img]"images/html401.gif"[/img]</p></a>
<br><a href="http://jigsaw.w3.org/css-validator" target="blank">
<p style="text-align: center;">[img]"images/css20.gif"[/img]</p></a>
</div>

</body>
</html>


De stylesheet code van het gastenboek:
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

.gb_color { color: #FF9900; }
.gb_border {
    position: relative;
    width: 400px;
    margin: 15px auto 15px auto;
    padding: 0px;
    border: 1px solid #000;
    }
.gb_naam {
    position: absolute;
    top: 3px;
    left: 3px;
    }
.gb_images {
    position: absolute;
    top: 3px;
    right: 3px;
    }
.gb_datum {
    margin: 22px 5px 0px 5px;
    padding-bottom: 5px;
    font-size: 8pt;
    border-bottom: 1px dashed #000;
    }
.gb_bericht { margin: 5px 10px; }


en algemene css code:
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

body {
    color: #333;
    background-color: #FFF;
    margin: 10px;
    padding: 0px;
    font: 12px verdana, arial, helvetica, sans-serif;
    }
h1 {
   margin: 0px 0px 15px 0px;
   padding: 0px;
   font-size: 28px;
   font-weight: 900;
   color: #ccc;
   }
h2 {
   font: bold 12px/14px verdana, arial, helvetica, sans-serif;
   margin: 0px 0px 10px 0px;
   padding: 0px;
   }
#header {
   margin: 0px;
   padding: 0px;
   background-color:#ccc;
   border:1px solid black;
   height: 100px;
   }
p {
   font: 12px/20px verdana, arial, helvetica, sans-serif;
   margin: 0px 0px 0px 0px;
   padding: 0px;
   }

#left a {
   color: #09c;
   display: block;
   border: 1px solid #000;
   text-align: center;
   font-size: 11px;
   font-family: verdana, arial, helvetica, sans-serif;
   font-weight: 600;
   text-decoration: none;
   }
a:link {color: #09c;}
a:visited {color: #07a;}
a:hover {background-color: #eee;}
div#left a:hover {background-color: #fff;}

.content {
   position: relative;
   width: auto;
   min-width: 120px;
   margin: 10px 210px 20px 170px;
   border: 1px solid #000;
   background-color: white;
   padding: 10px;
   z-index: 3;
   }
#pagetitle {
   margin: 0;
   padding: 10px 10px 0 0;
   text-align: right;
   font-size: 300%;
   color: #669900; }

#left {
   position: absolute;
   width: 128px;
   top: 125px;
   left: 20px;
   border: 1px dashed #000;
   background-color: #eee;
   padding: 10px;
   z-index: 2;
   }

#right {
   position: absolute;
   width: 168px;
   top: 125px;
   right: 20px;
   border: 1px dashed #000;
   background-color: #eee;
   padding: 10px;
   z-index: 1;
   }


Iemand een idee?

vrijdag 30 december 2005 21:04

Acties:
  • Alain
  • Registratie: Oktober 2002
  • Niet online

Alain

Als je bij .gb_datum 'position: relative;' invult ben je die gestippelde strepen op de achtergrond iig kwijt. ;)

You don't have to be crazy to do this job, but it helps ....

vrijdag 30 december 2005 21:29

Acties:
  • wilcodl
  • Registratie: September 2004
  • Laatst online: 30-03 22:55

wilcodl

Topicstarter
Bedankt AlainS, het werkt! Heeft iemand een idee hoe het komt dat bij het menu na het scrollen de verticale border die dashed is gedeeltelijk solid word?
bvd

vrijdag 30 december 2005 22:03

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 15-04 09:54

André

Analytics dude

Renderbugje in IE, die kan gewoon niet fatsoenlijk met een dashed/dotted border omgaan :)
Reageer