Toon posts:

[CSS/IE]Rounded corners worden soms deels getoond

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik ben al geruime tijd bezig met het semantisch correct maken van een site en ik heb daar al veel hulp van oa. dit forum van gekregen. Mijn dank daarvoor.

Maar ik zit nog met een raar probleem. Ik maak gebruik van tekstblokken (DIV's) met rounded corners en dat gaat allemaal prima. Ze worden getoond zoals ze moeten alleen in IE wordt soms het onderste plaatje maar deels getoond. Als ik dan even heen en weer scroll wordt het vaak wel weer getoond maar soms wordt dan een andere deel niet getoond. In FF heb ik dit probleem helemaal niet.
Ik snap er helemaal niets van. Is dit een bug van IE waar ik mee moet leren leven of is er een oplossing?

De site is te bekijken op:
http://www.bontepaarden.nl/nwpcs/home.php

De html voor de tekstblokken is:
code:
1
2
3
4
5
6
7
<div class="content">
  <h1>In onderhoud<hr></h1>
  <div class="contentBody">
    <div>BlaBlaBla</div>
  </div>
  <div class="contentFooter"><p>&nbsp;</p></div>
</div>


De css code is:
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
div.content {
    width: 85%;
    margin-left: 100px;
    background: #fdfd81 url("http://www.bontepaarden.nl/nwpcs/images/contentTopLeft.gif") top left no-repeat;
    min-width: 500px;
    margin-bottom: 2em;
} 
div.content h1 {
    background:  url("http://www.bontepaarden.nl/nwpcs/images/contentTopRight.gif") top right no-repeat;
    font-size:1.3em;
    padding:15px;
    padding-left:0;
    margin:0;
    position:relative;
    right:-10px;
    text-align: center;
}
div.contentBody {
    background:  url("http://www.bontepaarden.nl/nwpcs/images/contentRight.gif") top right repeat-y;
    margin:0;
    margin-top:-2em;
    padding:15px;
    padding-left:0;
    position:relative;
    right:-10px;
}
div.contentFooter {
    background:  url("http://www.bontepaarden.nl/nwpcs/images/contentBottomLeft.gif") bottom left no-repeat;
    position:relative;
    top:11px;
}
div.contentFooter p {
    background:  url("http://www.bontepaarden.nl/nwpcs/images/contentBottomRight.gif") bottom right no-repeat;
    padding:15px;
    padding-left:0;
    display:block;
    margin:-2em 0 0 0;
    position:relative;
    right:-10px;
    font-size:small;
}

  • Blaise
  • Registratie: Juni 2001
  • Niet online
Dat is een bug van IE. Soms helpt het om deze CSS: height:1%; aan het element toe te voegen. Zie http://www.webcredible.co...s/internet-explorer.shtml