Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

list-style-image wel in IE niet in FF

None
16 antwoorden
  • Hallo allemaal, de list-style-image in IE dus wel te zien maar niet in FF daar krijg ik een ruitje te zien hier het voorbeeld http://www.kcst.nl/schilder/
    krijg het niet voor elkaar, het zal wel weer iets heel eenvoudigs zijn.
    met googelen kwam ik tegen dat je dat list-style-position:inside moet gebruiken maar dat helpt ook niet.
    wie weet het wel?
  • probeer dit eens:[code:1:7e997591dd]<ul class="navbar">
    <li class="menu-lijst"><a class="menukl" href="index.htm">Home</a>
    <li class="menu-lijst"><a class="menu" href="index.htm">Binnenwerk</a>
    <li class="menu-lijst"><a class="menu" href="index.htm">Buitenwerk</a>

    <li class="menu-lijst"><a class="menu" href="index.htm">Specialisaties</a>
    <li class="menu-lijst"><a class="menu" href="index.htm">Diversen</a>
    <li class="menu-lijst"><a class="menu" href="index.htm">Contact</a>
    </ul>[/code:1:7e997591dd] de css: [code:1:7e997591dd] li.menu-lijst{ list-style-image: url(plaatje.png);[/code:1:7e997591dd]

    volgens mij moet dit werken, kan het niet zo gauw uittesten, zit op een computer bij een vriend van mij
  • Dat werkt idd wel maar ik wil er een ander plaatje voor hebben bij een hover en dat heb ik zo gedaan




    [code:1:b9f3ea1f0f]
    a.menu:link {
    color: #000;
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik01.gif");
    }
    a.menu:visited {
    color: #000;
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik01.gif");
    }
    a.menu:hover {
    color: #FF80FF;
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik02.gif");
    }
    a.menu:active {
    color: #C00000;
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik02.gif");
    }
    [/code:1:b9f3ea1f0f]
    en dat werkt dus niet, in FF
  • dus ik zou daar niet zo gauw een oplossing op weten, dat zal ik straks over een uurtje misschien wel kunnen, al sik thuis ben. anders moet je met javascript gaan werken, wat je (waarschijnlijk) liever niet doet, ik persoonlijk niet.
  • Nee als het niet hoeft met javascript dan liever niet, dan zoek ik wel wat ander in css, maar dit moet dus net iets anders voor FF denk ik.
    Maar bedankt voor het meedenken.
    dit is de hele css [code:1:7381a3de70]
    body{
    margin: 0;
    padding:180px 20px 25px 280px;
    background-color: #FFF;
    /*background-image:url("images/auto01wm.jpg");
    background-repeat: no-repeat;
    background-attachment:fixed ;
    background-position:320px 220px;*/
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:11pt;
    text-align:justify;
    }
    * html body {
    padding-right: 0;
    }
    div#header{
    z-index:2;
    background-color: #FFF;
    position:absolute;
    background-repeat:no-repeat;
    top:0;
    left:220px;
    right:0;
    width:auto;
    height:180px;
    }
    * html div#header {
    width:110%;
    }

    .logo{
    text-align:center;
    margin-top:0;
    }
    div#left-sidebar{
    z-index:1;
    position:absolute;
    background-repeat: no-repeat;
    background-attachment:fixed ;
    top:0;
    left:0;
    width:260px;
    height:100%;
    background-color:#FFF;
    }
    .lsb-hm{
    background-image:url("images/navb_home01.jpg");
    }
    div#footer{
    z-index:0;
    position:absolute;
    margin:0;
    padding:0;
    background-color:#FFF;
    bottom: -1px;
    left:260px;
    right: 0;
    width:auto;
    height:25px;
    }
    * html div#footer {
    width:100%;
    }
    .info{
    color:#000;
    font-family:Arial,Verdana,Helvetica, "sans serif";
    text-align: center;
    margin-top:4px;
    font-style:none;
    font-size: 11pt;
    font-weight: bold;
    }
    .stip{
    color:#FF0000;
    font-size: 12pt;
    }
    th{
    font-family:Arial,Verdana,Helvetica, "sans serif";
    vertical-align:middle;
    font-size:11pt;
    font-weight:bold;
    text-align:left;
    color:#000000;
    }
    td{
    font-family:Arial,Verdana,Helvetica, "sans serif";
    vertical-align:middle;
    font-size:10pt;
    font-weight:normal;
    text-align:left;
    color:#000000;
    }
    h1,h2,h3{
    color:#C00000;
    }
    h4,h5,h6{
    color:#000066;
    }
    h1{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:24pt;
    font-weight: bold;
    }
    h2{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:18pt;
    font-weight: bold;
    }
    h3{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:14pt;
    font-weight: bold;
    }
    h4{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:12pt;
    font-weight: bold;
    }
    h5{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:10pt;
    font-weight: bold;
    }
    h6{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:8pt;
    font-weight: bold;
    }
    ul.navbar {
    padding: 120px 0 0 70px;
    margin: 0;
    position: fixed;
    top: 0;
    left: 20px;
    width: 160px;
    }
    ul.navbar li {
    margin: 2px;
    padding: 0;
    }
    ul.navbar a {
    text-decoration: none;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    .left{
    float:left;
    margin: 0 10px 5px 0;
    }
    .right{
    float:right;
    margin: 0 0 5px 10px;
    }
    .mid{
    text-align:center;
    }
    .versie{
    z-index:1;
    color:#000066;
    background-color:#E4EEF8;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size: 7pt;
    font-weight: normal;
    text-align:left;
    }
    .laatst{
    z-index:1;
    color:#000080;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size: 8pt;
    font-weight: normal;
    }
    .menukl{
    color:#E00;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik02.gif");
    }
    a.menu:link {
    color: #000;
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik01.gif");
    }
    a.menu:visited {
    color: #000;
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik01.gif");
    }
    a.menu:hover {
    color: #FF80FF;
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik02.gif");
    }
    a.menu:active {
    color: #C00000;
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik02.gif");
    }
    a.tekst:link {
    color:#0000FF;
    font-weight: normal;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    a.tekst:visited {
    color:#0000FF;
    font-weight: normal;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    a.tekst:hover {
    color:#C00000;
    font-weight: normal;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    a.tekst:active {
    color:#C000C0;
    font-weight: normal;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    @media screen{
    body>div#header{
    position:fixed;
    }
    body>div#left-sidebar{
    position:fixed;
    }
    body>div#footer{
    position:fixed;
    }
    }
    * html body{
    overflow:hidden;
    }
    * html div#content{
    padding-right:60px;
    height:100%;
    overflow:auto;
    }
    * html div#left-sidebar{
    height:100%;
    overflow:auto;
    }
    [/code:1:7381a3de70]
  • ik zou iig even de il-tags sluiten
    maar volgens mij doet ie t dan nog steeds niet
  • list-style-image werkt niet op a, maar op ul of li. Dat het in IE wel werkt is een bug, maar gelukkig kun je die gebruiken, want IE doet niks met li:hover enzo. Om het dus in beide werkend te maken moet je iets doen als:

    [code:1:6a8333df80].navbar li {
    list-style-image: url(1.gif);
    }
    .navbar li:hover, .navbar a:hover {
    list-style-image: url(2.gif);
    }[/code:1:6a8333df80]
  • Ok bedankt, ga ik mee aan de slag.
    Ik laat nog wel weten wat het geworden is.
  • Je kunt eventueel ook zoiets gebruiken:
    [code:1:74f0b1a7fb]a.menu:link {
    display: block;
    padding-left: 42px;
    height: 33px;
    color: #000000;
    font-size: 13pt;
    font-weight: bold;
    background: url('images/verfblik01.gif') center left no-repeat;
    }
    a.menu:hover {
    color: #FF80FF;
    background: url('images/verfblik02.gif');
    }
    a.menu:active {
    color: #C00000;
    }[/code:1:74f0b1a7fb]
  • [quote:9817fa1e14="redmar"] [[..]] [/quote:9817fa1e14]zit je dan niet met dat de eerste tekst van de link over dat plaatje heen gaat ?
  • Nee, je gebruikt padding-left om dat te voorkomen. Aantal pixels is afhankelijk van breedte van de afbeelding en eventueel stukje witruimte tussen plaatje en tekst
  • die oplossing van redmar kreeg ik niet goed draaiend.
    Die van :ben: wel alleen nog een maar, in IE heb ik plaatje 2 bij een geselecteerde pagina is dat er nog bij te proggen voor FF?
    voor IE heb ik het bij .menukl gezet, FF houd zig aan de navbar li en dus plaatje 1, daar heb ik nog geen oplossing voor gevonden.
    Maar wel iedereen alvast bedankt.
  • ik zal nog even voor de duidelijkheid de nieuwe css plaatsen
    [code:1:8ef9f2d2e0]
    body{
    margin: 0;
    padding:180px 20px 25px 280px;
    background-color: #FFF;
    /*background-image:url("images/auto01wm.jpg");
    background-repeat: no-repeat;
    background-attachment:fixed ;
    background-position:320px 220px;*/
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:11pt;
    text-align:justify;
    }
    * html body {
    padding-right: 0;
    }
    div#header{
    z-index:2;
    background-color: #FFF;
    position:absolute;
    background-repeat:no-repeat;
    top:0;
    left:260px;
    right:0;
    width:auto;
    height:180px;
    }
    * html div#header {
    width:110%;
    }

    .logo{
    text-align:center;
    margin-top:0;
    }
    div#left-sidebar{
    z-index:1;
    position:absolute;
    background-repeat: no-repeat;
    background-attachment:fixed ;
    top:0;
    left:0;
    width:260px;
    height:100%;
    background-color:#FFF;
    }
    .lsb-hm{
    background-image:url("images/navb_home02.jpg");
    }
    div#footer{
    z-index:0;
    position:absolute;
    margin:0;
    padding:0;
    background-color:#FFF;
    bottom: -1px;
    left:260px;
    right: 0;
    width:auto;
    height:25px;
    }
    * html div#footer {
    width:100%;
    }
    .info{
    color:#000;
    font-family:Arial,Verdana,Helvetica, "sans serif";
    text-align: center;
    margin-top:4px;
    font-style:none;
    font-size: 11pt;
    font-weight: bold;
    }
    .stip{
    color:#FF0000;
    font-size: 12pt;
    }
    th{
    font-family:Arial,Verdana,Helvetica, "sans serif";
    vertical-align:middle;
    font-size:11pt;
    font-weight:bold;
    text-align:left;
    color:#000000;
    }
    td{
    font-family:Arial,Verdana,Helvetica, "sans serif";
    vertical-align:middle;
    font-size:10pt;
    font-weight:normal;
    text-align:left;
    color:#000000;
    }
    h1,h2,h3{
    color:#C00000;
    }
    h4,h5,h6{
    color:#000066;
    }
    h1{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:24pt;
    font-weight: bold;
    }
    h2{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:18pt;
    font-weight: bold;
    }
    h3{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:14pt;
    font-weight: bold;
    }
    h4{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:12pt;
    font-weight: bold;
    }
    h5{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:10pt;
    font-weight: bold;
    }
    h6{
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size:8pt;
    font-weight: bold;
    }
    ul.navbar {
    padding: 120px 0 0 70px;
    margin: 0;
    position: fixed;
    top: 0;
    left: 20px;
    width: 160px;
    }
    ul.navbar li {
    margin: 2px;
    padding: 0;
    list-style-image: url("images/verfblik01.gif");
    }
    ul.navbar li:hover, ul.navbar a:hover {
    list-style-image: url("images/verfblik02.gif");
    }
    ul.navbar a {
    text-decoration: none;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    .left{
    float:left;
    margin: 0 10px 5px 0;
    }
    .right{
    float:right;
    margin: 0 0 5px 10px;
    }
    .mid{
    text-align:center;
    }
    .versie{
    z-index:1;
    color:#000066;
    background-color:#E4EEF8;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size: 7pt;
    font-weight: normal;
    text-align:left;
    }
    .laatst{
    z-index:1;
    color:#000080;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size: 8pt;
    font-weight: normal;
    }
    .menukl {
    color:#E00;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    font-size: 13pt;
    font-weight: bold;
    list-style-image: url("images/verfblik02.gif");
    }
    a.menu:link {
    color: #000;
    font-size: 13pt;
    font-weight: bold;
    }
    a.menu:visited {
    color: #000;
    font-size: 13pt;
    font-weight: bold;
    }
    a.menu:hover {
    color: #FF80FF;
    font-size: 13pt;
    font-weight: bold;
    }
    a.menu:active {
    color: #C00000;
    font-size: 13pt;
    font-weight: bold;
    }
    a.tekst:link {
    color:#0000FF;
    font-weight: normal;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    a.tekst:visited {
    color:#0000FF;
    font-weight: normal;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    a.tekst:hover {
    color:#C00000;
    font-weight: normal;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    a.tekst:active {
    color:#C000C0;
    font-weight: normal;
    font-family:Arial,Verdana,Helvetica,"sans serif";
    }
    @media screen{
    body>div#header{
    position:fixed;
    }
    body>div#left-sidebar{
    position:fixed;
    }
    body>div#footer{
    position:fixed;
    }
    }
    * html body{
    overflow:hidden;
    }
    * html div#content{
    padding-right:60px;
    height:100%;
    overflow:auto;
    }
    * html div#left-sidebar{
    height:100%;
    overflow:auto;
    }
    [/code:1:8ef9f2d2e0]
  • Als je die li nou s een aparte class geeft. Dus:
    [code:1:4e4c2ca7da]<ul class="navbar">
    <li class="menukl"><a class="menukl" href="index.htm">Home</a>
    <li><a class="menu" href="index.htm">Binnenwerk</a>
    <li><a class="menu" href="index.htm">Buitenwerk</a>

    <li><a class="menu" href="index.htm">Specialisaties</a>
    <li><a class="menu" href="index.htm">Diversen</a>
    <li><a class="menu" href="index.htm">Contact</a>
    </ul>[/code:1:4e4c2ca7da]
    Misschien moet je dan ook nog toeveogen:
    [code:1:4e4c2ca7da]
    ul.navbar li.menukl {
    margin: 2px;
    padding: 0;
    list-style-image: url("images/verfblik02.gif");
    }[/code:1:4e4c2ca7da]maar mssn is dat wel niet nodig?

    NB: niet getest! maar zoiets zou t moeten zijn :wink:
  • [quote:5162270aac]die oplossing van redmar kreeg ik niet goed draaiend.[/quote:5162270aac]
    Wat gaat er mis? Wellicht had ik in mijn snelheid en zonder testen van dat stukje wat omgedraaid. Ik heb het principe zelf namelijk zonder problemen zelf ook gebruikt op http://www.redmar.nl
    Controleer ook even mijn CSS daar anders en pas dat eens aan aan je wensen:
    [code:1:5162270aac]a.menu {
    display: block;
    padding-left: 25px;
    width: 149px;
    background: url('img/a_menu_bg.gif') no-repeat left center;
    color: #362408;
    font-size: 14pt;
    font-weight: bold;
    text-decoration: none;
    }
    a.menu:hover {
    background: url('img/a_menu_bg2.gif') no-repeat left center;
    color: #FFFFCC;
    }[/code:1:5162270aac]
    //Edit: deze manier werkt probleemloos en zonder verschil in zowel IE als FF.
  • De oplossing van marientje werkt! Geweldig.
    Maar ik ga toch ook de oplossing van redmar opnieuw proberen.
    Bedankt, jullie horen nog (of zien nog)

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.