PDA

Volledige versie bekijken : Weergave probleem van list-items in IE


Phyrexian
%Europe/Berlin %635 %2006, 16:14
Hello iedereen,

ik doe de webontwikkeling van de volgende website voor een klant. http://www.exelmans.be/private_insurer/

Wanneer je de website bekijkt in Firefox (of Safari, ...) worden de list-items <li> perfect weergegeven (op de 1ste pagina na de intro-pagina).

In Internet Explorer zijn er echter weergave problemen. Er ontstaan witte gaten in de text waar zich die <li> tags bevinden.

Enig idee hoe dit komt?

gegroet,

Bart

mknol
%Europe/Berlin %685 %2006, 17:27
geen float en position:absolute gebruiken lijkt me al voldoende

#content li {
display: list-item;
float: none;
position: relative;
list-style-position: outside;
list-style-type: disc;
font:normal 10pt Georgia, "Times New Roman", Times, serif;
line-height: 14pt;
text-align: left;
color: #0A1E60;
/*background-color:#FFFFFF;*/
border-bottom: 1px solid #FFFFFF;
width: 550px;
/* white-space: normal; */
visibility: visible;
overflow: visible;
}

Phyrexian
%Europe/Berlin %707 %2006, 17:58
Bedankt mknol2000, dat lost het weergave probleem op blijkbaar.
IE toont echter géén 'bullets', Firefox wel...


Wat is er verkeerd aan dit?


#content li {
list-style-position: outside;
list-style-type: disc;
}

mknol
%Europe/Berlin %327 %2006, 08:51
Volgens mij moet je die bullets op de UL plaatsen (en ik plaats er zelf altijd een margin bij):

#content ul {
margin-left:2em;
list-style-position: outside;
list-style-type: disc;
}

Sterker nog, ik denk als je onderstaande code weghaald, dat het al correcter wordt weergegeven:

#content ul {
padding: 0;
margin: 0;
/* list-style: none; */
top: 1em;
left: 0;
}

Een handige naslagpagina:
http://www.w3schools.com/css/css_list.asp

Phyrexian
%Europe/Berlin %409 %2006, 10:49
Nogmaals bedankt. Dat lost het op.
Blijkbaar kan Firefox om met negatieve marges bij die <ul> tags. Internet Explorer niet.

Thanks!

mech7
%Europe/Berlin %411 %2006, 10:52
IE Gaat in het algemeen slecht om met negatieve marges..

Phyrexian
%Europe/Berlin %464 %2006, 12:08
Ik had even te vroeg gejuicht...


Bullet-points worden nu getoond. MAAR!
Internet Explorer zet ze echter voor de laatste lijn (wanneer een <li> meer dan één tekstregel heeft) terwijl ze natuurlijk voor de eerste lijn horen te staan.

Why the hell?
Vergelijk even onderstaande pagina's in IE en Firefox en dan zie je wat'k bedoel.
http://www.exelmans.be/private_insurer/fr/main.html


Alvast bedankt voor de hulp,

Bart

mknol
%Europe/Berlin %484 %2006, 12:37
check dit bestand:
http://www.exelmans.be/private_insurer/fr/dropdown.css

maak er dit van

/* CSS Document */

/* Structure
<li> (fender) [li]
<ul> [li ul]
<li> (strat) </li> [li ul li]
</ul>
</li>

*/


#nav a { /* topmenu items */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #0A1E60;
}

#nav a:hover { /* topmenu items */
text-decoration: none;
color: #B70005;
}


#nav li li a { /* submenu items */
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
text-align: left;
/* line-height: 14pt; */
background-color: #FFFFFF;
padding: 0px 10px 0px 10px;
/* border-bottom: 1px solid #CCCCCC; */
white-space: nowrap;
}

#nav li li a:hover {
color: #B70005; /* rood */
background-color: #E0E6EF;
}

#nav ul {
list-style: none;
padding: 0;
margin: 0;
}

#nav li { /* topmenu items */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
line-height: 20pt;
color: #000000;
float: left;
position: relative;
width: 158px;
text-align: center;
cursor: default;
background-color: #FFFFFF;
border-bottom: 1px solid #D6DBE4;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}



#nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: url(images/ddbg3.gif) bottom left no-repeat; /* IMPORTANT for IE activity!! */
}

#nav li ul li {
text-align: left;
}

#nav li>ul {
top: auto;
left: auto;
}

#nav li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

#nav li:hover ul, #nav li.over ul {
display: block;
}






.arrow {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 8pt;
color: #B70005;
}

.width275 {
width: 275px;
}
.width225 {
width: 225px;
}



Dit bestand defineert nl. ook de UL en de LI. Dat conflicteerd waarschijnlijk. Ik heb er overal #nav voor gedaan.

Phyrexian
%Europe/Berlin %534 %2006, 13:49
Hmmz. Dit fokt m'n dropdown navigatie op.
EN het lost de verkeerde plaatsing van de bullet-points niet op...
Toch bedankt?

mknol
%Europe/Berlin %648 %2006, 16:33
Hmmz. Dit fokt m'n dropdown navigatie op.
EN het lost de verkeerde plaatsing van de bullet-points niet op...
Toch bedankt?
Tja, ik heb een hoop dingen genoemd, meer zou ik even niet weten..?

Phyrexian
%Europe/Berlin %683 %2006, 17:24
Geen probleem hoor...
Ik heb net gelezen dat er aan deze verkeerde plaatsing niets te doen valt.

http://www.satzansatz.de/cssd/onhavinglayout.html [bij lists]