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]
vBulletin® v3.8.1, Copyright ©2000-2012, Jelsoft Enterprises Ltd.