[HTML&CSS] Wegvallende tekst in IE, mozilla wel goed - Softwareontwikkeling

maandag 12 mei 2003 18:07

Acties:

Topicstarter

Ik zit met een vaag probleem. Ik wil de pagina zoveel mogelijk met div's op zetten, maar nu zit ik met het volgende probleem in IE6 (Andere browsers dan IE6 en Mozilla heb ik hier niet):

Zo wordt de pagina geladen:
Afbeeldingslocatie: http://www.mogdiscount.nl/bug/loaded.jpg

Afbeeldingslocatie: http://www.mogdiscount.nl/bug/loaded.jpg

Na selecteren:
Afbeeldingslocatie: http://www.mogdiscount.nl/bug/selected.jpg

Klik je de selectie nu weg dan hou je de tekst wel over:
Afbeeldingslocatie: http://www.mogdiscount.nl/bug/naselect.jpg

Afbeeldingslocatie: http://www.mogdiscount.nl/bug/mozilla.jpg

Een stukje code:

HTML:

      <h1>Aanbiedingen</h1>
<div>
<div style="float:left; width:45%;margin-top: 5px; background-color: blue;"><h2>Aanbiedingen</h2></div>
<div style="float:right; width:45%; margin-top: 5px;background-color: yellow;"><h2>Gebruikte systemen</h2></div>

</div>
<h1>Aanbiedingen</h1>    </div>

de stylesheet:

HTML:

body { margin: 0px; background-color: #1465B2;}
DIV {margin: 0px;padding: 0px;}
body, div {font-family: verdana; font-size:0.95em; overflow-x:hidden; overflow-y:auto;}

/* ************************************
 * Pagina indeling *
 ************************************ */

#lijn1{position:absolute; left:775px; top:0px;bottom:0px; width:2px;  z-index:6; background-color: #FFFFFF; layer-background-color: #FFFFFF;}
#lijn1hidden{position:absolute; left:775px; top:0px;bottom:0px; width:2px;height:100%;  z-index:5; background-color: #FFFFFF; layer-background-color: #FFFFFF;}
#lijn2 {position:absolute; left:0px; top:133px; width:100%; height:1px; z-index:6; background-color: #FFFFFF; layer-background-color: #FFFFFF;font-size:0px;}
#lijn2hidden {position:absolute; left:0px; top:133px; width:100%; height:1px; z-index:5; background-color: #FFFFFF; layer-background-color: #FFFFFF;font-size:0px;}
#topbg1 {position:absolute; left:0px; top:0px; width:100%; height:36px; z-index:1; background-color: #387EC3; layer-background-color: #387EC3;}
#topimg {position:absolute; left:0px; top:0px; z-index:5;}

/* ************************************
 * classes voor boxen *
 ************************************ */
.roundedCornerSpacer {margin: 0px; padding: 0px; border: 0px;clear: both;font-size: 1px; line-height: 1px;}
.borderTL, .borderTR, .borderBL, .borderBR {width: 8px; height: 8px;padding: 0px; border: 0px;z-index: 99;}
.borderTL, .borderBL { float: left;  clear: both; }
.borderTR, .borderBR { float: right; clear: right; }
.borderTL { margin:  -3px  0px  0px -6px; }
.borderTR { margin:  -3px -6px  0px  0px; }
.borderBL { margin: -8px  -3px  0px  -3px; }
.borderBR { margin: -8px  -3px  0px  0px; }

/* Marges in alle browsers goed: */
html>body .borderTL { margin:  -3px  0px  0px -3px; }
html>body .borderTR { margin:  -3px -3px  0px  0px; }
html>body .borderBL { margin: -8px  0px  0px  0px; }
html>body .borderBR { margin: -8px  0px  0px  -3px; }

.content1 , .content2 {margin: 0px;padding: 0px;border: 3px solid #FCB414;background-color: #ffffff;color: #000000;}

/* ************************************
 * Pagina items *
 ************************************ */

/* Menu */
.menu { position: absolute;top: 180px;width: 135px;margin-top: 0px;margin-bottom: 30px;margin-left: 0px;margin-right: 0px;padding: 0px;border: 0px;text-align: left;left: 5px;}
.men h1 {font-family: verdana; font-size:0.95em;font-weight: bold;text-align: center; margin-bottom: 5px; margin-top: 5px; color:black;}
.men a:link,.men A:visited,.men A:active {display:block;width: 90%;border: 1px solid #FCB414;text-align: center;margin-left: 5px;color:#1465B2;text-decoration: none;margin-top: 2px;}
.men a:hover {display:block;width: 90%;border: 1px solid #FCB414;text-align: center;margin-left: 5px;margin-top: 2px;color:#FFFFFF;background-color: #1465B2;font-weight: bold;text-decoration: none;}

/* Lokatie balk & tijd */
#location {position:absolute; left:5px; top:145px; width:765px; height:20px; z-index:7;border: 1px solid #FCB414;background-color: #387EC3; layer-background-color: #387EC3; padding: 2px; font-size:0.70em; color: #FCB414;}
html>body #location {height: 15px; width: 759px;}
#location a:link,#location A:visited,#location A:active {color:#FFFFFF; display: inline;border: 0px;}
#location a:hover {color: #FCB414; font-weight: bold; display: inline;border: 0px;background-color: #387EC3; layer-background-color: #387EC3;}

/* Main */

.main { position: absolute; top: 180px;width: 620px;margin-top: 0px;margin-bottom: 30px;margin-left: 0px;margin-right: 0px;padding: 0px;border: 0px;text-align: left;left: 150px;}

.mainContent {margin: 2px; z-index:0;}

.main h1 {font-family: verdana; font-size:0.95em;font-weight: bold;text-align: center;margin-bottom: 5px;margin-top: 5px; z-index:10;}
.main h2 {font-family: verdana; font-size:0.95em;font-weight: bold;text-align: center;margin-bottom: 5px;margin-top: 5px;}

A:link,A:visited,A:active {display:inline;border: 1px solid #FCB414;text-align: center;color:#1465B2;text-decoration: none;}

A:hover {display:inline;text-align: center;color:#FFFFFF;background-color: #1465B2;text-decoration: none;}

/* Copyright */

#copyright { font-family: verdana; font-size:0.59em;color:#ffffff;text-align:center;}

Om de hele broncode van de pagina zelf hier te posten vind ik een beetje over dreven. Deze kun je natuurlijk via onderstaande link wel bekijken.

Iemand enig idee waarom dit fout gaat en de titel regel niet te lezen is als de pagina net geladen is? Heb al van alles geprobeerd, wanneer ik de beide layer's met de float weg haal is het goed, maar dat schiet niet echt op als ik twee kolomen wil hebben. Ook een div om de titel zelf heen helpt niet, als ik deze dan float maak werkt het wel, maar springt de onderste float naar boven

Pagina is zelf te bekijken op http://www.mogdiscount.nl/index.php?page=index

Sorry voor de slechte layout, maar liever zo dan een onoverzichtelijk rij van gegevens.

maandag 12 mei 2003 18:40

Acties: