[IE/Firefox] ul, li probleem, veel wit ruimte in IE - Softwareontwikkeling

dinsdag 11 december 2007 11:16

Acties:

Topicstarter

Het probleem

HTML:

<ul>
       <li id="1">
        <img class="navItem" src="images/1.gif" alt="1" />
       </li>
       <li id="2">
        <img class="navItem" src="images/2.gif" alt="2" />
       </li>
       <li id="3">
        <img class="navItem" src="images/3.gif" alt="3" />
       </li>

</ul>

Met de volgende css:

Cascading Stylesheet:

ul{
    margin:0px;
    padding-left:0px;
    list-style-type:none;
    display:block;
}
li{
    margin:0px;
    list-style-type:none;
    display:block;
}
.navItem {
    border-width:0px;
    margin-top:12px;
    display: block;
}

Het probleem is dat in firefox alles netjes onder elkaar komt met 12 marge top zoals ik het wil,
in IE echter krijg ik een probleem vanaf het moment dat ik padding:0px toevoeg (deze heb ik nodig om alles mooi uit te lijnen)
In IE krijg ik dan een witruimte van ongeveer 40px tussen elke <li>

Iemand een oplossing?
kwam de volgende site tegen met hetzelfde probleem:
http://www.flashfiles.nl/forum/topic.asp?topic_id=56985

Helaas is het met display blokc niet opgelost bij mij

Modelbouw - Alles over modelbouw, van RC tot diorama

dinsdag 11 december 2007 11:21

Acties:

TeeDee

CQB 241

Welke IE? Kan het de double margin bug zijn? Het numeriek benoemen van je ID's is nu ook niet echt handig. (Mag afaik niet eens).

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 11 december 2007 11:26

Acties:

Sjoerd

Topicstarter

TeeDee schreef op dinsdag 11 december 2007 @ 11:21:
Welke IE? Kan het de double margin bug zijn? Het numeriek benoemen van je ID's is nu ook niet echt handig. (Mag afaik niet eens).

Ik ga is even kijken naar die bug, het numeriek benoemen had ik nu snel gedaan om het wat overzichtelijker te maken in het echt heeft het gewoon een naam als home, contact,

foutje...

het gaat overiges om IE7

[ Voor 3% gewijzigd door Sjoerd op 11-12-2007 11:26 ]

Modelbouw - Alles over modelbouw, van RC tot diorama

dinsdag 11 december 2007 11:26

Acties:

Puck

W32.Deadcode.A

Probeer het volgende eens (verwijderen van breaks):

HTML:

<ul>
       <li id="1"><img class="navItem" src="images/1.gif" alt="1" /></li>
       <li id="2"><img class="navItem" src="images/2.gif" alt="2" /></li>
       <li id="3"><img class="navItem" src="images/3.gif" alt="3" /></li>
</ul>

Arrived anxious, left bored

dinsdag 11 december 2007 11:40

Acties:

Sjoerd

Topicstarter

Excuses voor de mensen die er al hebben over nagedacht het probleem ligt nog ergens anders

HTML:

<ul>
       <li id="1"><a href="#"><img class="navItem" src="images/1.gif" alt="1" /></a></li>
       <li id="2"><img class="navItem" src="images/2.gif" alt="2" /></li>
       <li id="3"><img class="navItem" src="images/3.gif" alt="3" /></li>
</ul>

enkel de li's in mijn site die ook een link bevatten blijken problemen te geven... de <a href buiten de li zetten helpt niet

Modelbouw - Alles over modelbouw, van RC tot diorama

dinsdag 11 december 2007 11:43

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Zoals onze highlighter al aangeeft zijn numerieke id's sowieso niet toegestaan

[ Voor 26% gewijzigd door RobIII op 11-12-2007 11:45 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 11 december 2007 11:43

Acties:

Pendaco

Vogon Poetry FTW!

Vanwaar de 'display:block' ?
<ul> en <li> zijn van 'nature' al block elementen.

Verder zou een online voorbeeldje wel het een en ander al kunnen uitsluiten

dinsdag 11 december 2007 11:50

Acties:

TeeDee

CQB 241

Zet inderdaad iets online. Dan is er wat makkelijker te checken.

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 11 december 2007 11:51

Acties:

Sjoerd

Topicstarter

ik heb momenteel geen ftp acces, maar hier even een gestripte pagina met het probleem (werkt ook zonder dat de images aanwezig zijn)

HTML:

<html>
<head><title>test</title>
<style>
ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
}
li{
    margin:0px;
    padding:0px;
    list-style-type:none;
}
.navItem {
    border-width:0px;
    margin-top:12px;
    display: block;
}
</style>
</head>
<body>
<ul>
    <li id="home"><img class="navItem" src="images/home.gif" alt="home" /></li>
    <li id="wie"><img class="navItem" src="images/wie.gif" alt="wie" /></li>
   <!-- hier doet het probleem zich voor-->
    <li id="wat"><a href="test">
        <img class="navItem" src="images/wat.gif" alt="wat" />
    </a></li>
   
    <li id="contact"><img class="navItem" src="images/contact" alt="contact" /></li>
</ul>
</body>
</html>

Modelbouw - Alles over modelbouw, van RC tot diorama

dinsdag 11 december 2007 11:59

Acties:

TeeDee

CQB 241

Het weghalen van display:block op .navItem zorgt er bij mij voor dat er geen gekke dingen naar voren komen.

Denk je ook nog even aan je DOCTYPE?

[ Voor 15% gewijzigd door TeeDee op 11-12-2007 11:59 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 11 december 2007 12:13

Acties:

Sjoerd

Topicstarter

TeeDee schreef op dinsdag 11 december 2007 @ 11:59:
Het weghalen van display:block op .navItem zorgt er bij mij voor dat er geen gekke dingen naar voren komen.

Denk je ook nog even aan je DOCTYPE?

dat is hem inderdaad!

geen idee waarom ik hem er toendertijds had gezet... $_/-\o_$

Modelbouw - Alles over modelbouw, van RC tot diorama

dinsdag 11 december 2007 12:17

Acties:

Cartman!

Heb je nu je doctype weggehaald of begrijp ik je verkeerd? Want al je hem weggehaald hebt is dat niet de oplossing die je wilt hebben.

Waarom zet je niet margin en padding van je ul en li allemaal op 0 behalve de padding-top van de li, als je die op 12px zet zou het volgens mij moeten weken.

dinsdag 11 december 2007 13:53

Acties:

MueR

Admin Devschuur® & Discord

is niet lief

IE kan moeite hebben met het volgende..

Witruimte tussen je <a> en <img> tag
Witruimte tussen je <li> tag, content en </li> tag.
Het niet specificeren van een (geldig) DOCTYPE
Random andere dingen, het blijft IE..

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 11 december 2007 14:47

Acties:

Cartman!

MueR schreef op dinsdag 11 december 2007 @ 13:53:
IE kan moeite hebben met het volgende..
Witruimte tussen je <a> en <img> tag
Witruimte tussen je <li> tag, content en </li> tag.
Het niet specificeren van een (geldig) DOCTYPE
Random andere dingen, het blijft IE..

En wat heeft de TS aan deze info die algemeen bekend is dan

Oplossingen worden gewoon gegeven om het op n normale manier op te lossen.

dinsdag 11 december 2007 14:56

Acties:

H004

Omdat dat precies de reden is waarom IE6 witruimtes tussen listelementen en block-items plaatst. IE6 ziet de afsluitende </li> dan niet meer en parst de witregels tot het volgende list-element. Paddings en margins op 0 zetten, zoals jij aangeeft lossen dat probleem absoluut niet op. Dit is gewoon een bekende bug van IE6.

dinsdag 11 december 2007 16:14

Acties:

Cartman!

In dit geval heeft padding en margin idd weinig zin omdat ik het voorbeeld niet volledig bekeken had, dat klopt. Maar MueR post gewoon enkele bekende bugs van IE6 zonder daarbij een oplossing te vermelden en dan heb je er nog niks aan. Ook met whitespace weghalen kom je er nog niet namelijk. Te zien in dit voorbeeld is dat je het kunt oplossen door een hoogte te geven aan je list item en een overflow hidden erop te zetten. Zover ik kan opmaken is de enige reden dat er een margin-top op de image zit om afstand tussen de li en img te creeeren. Met de volgende code werkt dit dus wel ook met overvloedige whitespace :

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>test</title>
<style type="text/css">
*
{
border:0;
padding:0;
margin:0;
}
ul{
    margin:0;
    padding:0;
    list-style-type:none;
}
li{
    margin:0;
    padding:12px 0 0 0;
}

</style>
</head>
<body>
<ul>
<li id="home"><img class="navItem" src="spacer.gif" width="50" height="50" alt="home" /></li>
<li id="wie"><img class="navItem" src="spacer.gif" width="50" height="50" alt="wie" /></li>
<li id="wat">
<a href="test">

<img class="navItem" src="spacer.gif" width="50" height="50" alt="wat" />

</a>

</li>
<li id="contact"><img class="navItem" src="spacer.gif" width="50" height="50" alt="contact" /></li>
</ul> 
</body>
</html>

Dit geeft op IE6/FF2 hetzelfde resultaat

edit:
je kunt de hoogte op de li en de overflow hidden er zelfs gewoon vanaf halen.

[ Voor 5% gewijzigd door Cartman! op 11-12-2007 16:23 ]