[css] IE doet raar met li

[rewind.]

Dit probleem ben ik nog nooit eerder tegen gekomen in firefox werkt het wel goed enkel in IE krijg ik dit:



css:

code:

#text ul {
    margin: 0;
    padding: 10px 0 10px 40px;
}

#text li {
    font: normal 0.7em/120% Verdana, Arial, Helvetica, sans-serif;
    line-height: 16px;
    list-style-type: circle;
}

html:

code:

<div id="text">
    <h2>Producten</h2>
        <p>
            Het bouwen van websites is onze kernactiviteit. Na een uitvoerig gesprek over het doel van de site en op wie de website gericht is, gaan we aan de slag. 
            Eerst worden één of enkele mogelijke ontwerpen vervaardigd op basis van de huisstijl. 
            Dat wil natuurlijk niet zeggen dat we uw briefpapier gaan namaken, maar dat we rekening houden met kleurgebruik, lettertypes, vormen en dat soort zaken. 
            Na goedkeuring kan begonnen worden met de bouw van de site. 
            U kunt dit proces van begin tot eind volgen op onze ontwikkelserver waar u inloggegevens voor krijgt.
            <br><br>
            Het proces in een notendop:
            
        </p>
        <ul>
          <li>Ter kennismaking een gesprek met het uitwisselen van ideeën</li>
          <li>Het ontwikkelen van het concept en de uitwerking</li>
          <li>Implementatie en bouwen van de site</li>
          <li>Nalopen en evalueren</li>
          <li>De website wordt opgeleverd</li>
          <li>Aanmelden bij zoekmachines</li>
        </ul>   
</div>

is dit een bekent probleem en is hier een oplossing voor ?

[ Voor 12% gewijzigd door rewind. op 09-12-2004 15:17 ]

[Willem]

Heeft te maken met de margin van het element wat er links naast staat

[rewind.]

hmm

ik zou het dus hierin moeten zoeken ?

code:

#text {
    margin: 0 150px 0 175px;
    padding: 10px 0 10px 0;
}

#image {
    float: left;
    padding: 10px 0 10px 20px;
}

[Verwijderd]

Stoney187 schreef op donderdag 09 december 2004 @ 15:26:
hmm

ik zou het dus hierin moeten zoeken ?

code:

#text {
    margin: 0 150px 0 175px;
    padding: 10px 0 10px 0;
}

#image {
    float: left;
    padding: 10px 0 10px 20px;
}

iig het element dat er links van staat (als dat zo is) dat kunnen wij niet zien..

[Jrz]

Drukt een iets anders (plaatje) het niet weg?
Hier werkt de snippet gewoon

[Willem]

Ja, het element wat er links van staat

[rewind.]

je zou idd zeggen dat het door het plaatje links ervan komt maar ik zie de fout niet.

html : http://rewind.gotdns.com/y-design/producten.php
css : http://rewind.gotdns.com/y-design/style.css

[Verwijderd]

er is ook geen fout, dit is een beroemde IE bug
http://www.positionisever...explorer/threepxtest.html

[Willem]

De linker image dus even wat extra margin-bottom meegeven
Check eens of dat wat uithaalt....

[rewind.]

willem169 schreef op donderdag 09 december 2004 @ 15:37:
De linker image dus even wat extra margin-bottom meegeven
Check eens of dat wat uithaalt....

verrek dat werkt maarja tis niet echt een oplossing ik zie nu ook net dat het bij lappen text ook zo is

[QkE]

Misschien handig voor debuggen om de achtergrond van de tekst even een kleurtje mee te geven (Mijn favo's zijn de primaire kleuren ). Dan weet je waar het ene element eindigd en het andere begint. Vind ik altijd wel handig.

[crisp]

je kan de image ook een display:inline geven naast de float - dat lost het vaak ook op

[Woudloper]

Stoney187 schreef op donderdag 09 december 2004 @ 15:43:
verrek dat werkt maarja tis niet echt een oplossing ik zie nu ook net dat het bij lappen text ook zo is

OK, maar heb je niets aan de link die mophor hierboven geeft. Daarin staat namelijk ook een oplossing gemeld voor jou probleem. Mocht je dat geen nette oplossing vinden moet je toch even voor een andere indeling gaan van je pagina of een andere oplossing qua indeling (2/3 columns layout, etc etc.)

[Willem]

't Is inderdaad niet netjes maar wel een workaround om erachter te komen dat het daadwerkelijk aan dat object ligt.

[rewind.]

ik ben nu ff bezig met de link van mophor idd

de oplossing :

code:

* html #image {
margin: 0 -3px; ma\rgin: 0;
} 

/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #image {
  margin-right: 10px;
  }
 
* html #text {
  height: 1%;
  margin-left: 0;
  }
 
/* End hide from IE5/mac */

thnx all

[ Voor 77% gewijzigd door rewind. op 09-12-2004 15:58 ]

[Verwijderd]

trouwens, in plaats van allerlei IE hacks in je css, kan je imho beter gebruik maken van conditional comments en een extra sheet (of een paar verschillende)

http://www.quirksmode.org/css/condcom.html

[ Voor 14% gewijzigd door Verwijderd op 09-12-2004 16:03 ]

[crisp]

IE5/Mac ondersteunt geen conditional comments (maar dat kan je natuurlijk ook in je voordeel gebruiken )
Maar de ma\rgin: -3px is wel een heel ranzige oplossing voor dit probleem als het waarschijnlijk met een display:inline ook weg is

[ Voor 74% gewijzigd door crisp op 09-12-2004 16:08 ]

[Verwijderd]

ja, maar in het voorbeeld hierboven gebruikt ie weer een extra hack om het te hiden voor IE mac, dus ja...

[crisp]

Maccers moeten safari, camino of firefox gebruiken; IE/Mac is echt troep...