[html/css/php] Verdwenen div

[Excibular]

Ik heb een beetje een vreemd probleem en ik heb geen idee waar ik de oplossing moet zoeken.
Ik heb een layout gemaakt op basis van http://www.thurbroeders.n...-columns-layout/3cl_1.htm (met fixed sidebars)
De header en de sidebar a gebruik ik voor navigatie. Dit zijn lists die ik dmv php en een database genereer.
De tekst komt ook uit die database en wordt geladen in de div content.

Nou heb ik het volgende probleem, Internet Explorer laat niet altijd de div content zien.
Op de meeste pagina's gaat het goed echter op twee pagina's gaat hij de mist in en laat hij de div content niet zien (dmv view source weet ik dat de tekst wel wordt opgehaald en ook netjes in de div wordt gezet).

Als ik mijn css aanpas en content een lengte of een breedte meegeef dan werkt het op alle pagina's. Alleen dat is niet wat ik wil. Weet iemand waar ik deoplossing moet zoeken?

Bijgaand heb ik voor de zekerheid ook maar even mijn css code geplakt.

code:

body {
    background: #FFF;
    margin: 0px;
    color: #333;
    font-size: 0.8em;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    text-align: center;
  }

#container {
    border: 0px solid gray;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    text-align:left;
    background: #FFF;
    border: 1px solid gray;
    }
#Layer2 {
    position:relative;
    width:100%;
    height:40px;
    background-color: #00337F;
    margin: 0px;
    padding: 0px;   
}
#Layer3 {
    position:relative;
    width:100%;
    height:60px;
    text-align:left;}
#banner {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid gray;
    text-align: center;
    height:120px;
    padding: 0px;
    }

#content {
    margin-right: 275px; 
    margin-left: 175px; 
    margin-bottom: 10px;
    border: 1px solid gray;
    overflow:visible;
    }

#sidebar-a {
    float: left;
    width: 150px; 
    height: 300px;
    margin: 0px 5px 20px 0px;
    padding: 0px;
    text-align: right;
    }

#sidebar-b {
    float: right;
    width: 225px; 
    margin: 0px 0px 20px 5px;
    padding: 10px;
    border: 1px solid gray;
    }

#footer {
    clear: both;
    height: 20px;
    padding: 10px;
    border: 1px solid gray;
    text-align:center;
    background-color: #00337F;
    }

[Verwijderd]

Bijgaand hoort een live voorbeeld.

[Excibular]

Verwijderd schreef op zaterdag 15 april 2006 @ 12:23:
Bijgaand hoort een live voorbeeld.

Ik ga wel even proberen off ik die ergens vanavond online kan zettten. Ik heb op dit moment even geen ruimte.

Ik vroeg me af of iemand een keer eerder een soortgelijk probleem heeft gehad en in welke richting ik dit moet zoeken. Ik denk dus dat het aan mijn css ligt omdat hij wel werkt me gedefinieerde width en height.

[ Voor 30% gewijzigd door Excibular op 15-04-2006 14:35 ]

[crisp]

ExCibular schreef op zaterdag 15 april 2006 @ 11:38:
Als ik mijn css aanpas en content een lengte of een breedte meegeef dan werkt het op alle pagina's. Alleen dat is niet wat ik wil. Weet iemand waar ik deoplossing moet zoeken?

Klinkt weer als een hasLayout bug van IE; ik denk dat je het in dit geval het makkelijkst op kan lossen door in IE je content-div een minimale height te geven, bijvoorbeeld height: 1% - IE rekt 'm toch wel verder uit

[Excibular]

crisp schreef op zaterdag 15 april 2006 @ 16:23:
[...]

Klinkt weer als een hasLayout bug van IE; ik denk dat je het in dit geval het makkelijkst op kan lossen door in IE je content-div een minimale height te geven, bijvoorbeeld height: 1% - IE rekt 'm toch wel verder uit

Dat is inderdaad het probleem. Het liet een aantal pagina's wel zien omdat daar een overflow werd getriggered. Dit geldt niet voor 2 paginas en die waren daarom niet zichbaar.

De Holly Hack 1% height aangeven werkt alleen niet voor mij. Want dan gaat een gedeelte van de text over de footer heen. Daarom gebruik ik zoom:1; dit lost het probleem voor mij. Helaas gaat dit tenkoste van IE 5 ondersteuning. Voor deze groep moet ik nog even een oplossing verzinnen. Overflow:auto; deed ook de truc bij mij op IE maar dat zorgde wel voor ongewenste neven effecten in Firefox.

[JHS]

Ik zou dan ook geen hacks gebruiken, maar gewoon (netjes) een conditional comment .

[X-Lars]

Een position:relative; wil ook wel eens helpen (i.p.v. height:1%;).