[CSS/IE] Stijlen van list item gaat fout. - Softwareontwikkeling

vrijdag 7 juli 2006 17:24

Acties:

Topicstarter

Ik heb wederom een probleem. Ik probeer een unordered list te stijlen met css. In Firefox gaat dat zonder problemen, maar in IE gaat het fout.

Ik heb een paar items waartussen ik een streepje wil zetten. Daarvoor gebruik ik een aparte list item. Als ik die een hoogte geef, dan wordt hasLayout al getriggerd, en die kan ik niet gebruiken. De fontsize naar 1px veranderen en overflow: hidden; heeft ook geen effect. Hij blijft maar even groot. Dit is de code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>List</title>
<style type="text/css">

div
{
    position: absolute;
    top: 100px;
    left: 100px;
    border: 1px solid black;
    background: #CCCCCC;
}

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

li.item
{
    margin: 0;
    padding: 2px;
}

li.separator
{
    padding: 0;
    margin: 2px;
    border-top: 1px solid black;
}

* html li.separator
{
    overflow: hidden;
    font-size: 1px;
    height: 1px;
}

</style>
    </head>
    <body>
        <div>
            <ul>
                <li class="item"><a href="#">Link 1</a></li>
                <li class="item"><a href="#">Link 2</a></li>
                <li class="item"><a href="#">Link 3</a></li>
                <li class="separator"></li>
                <li class="item"><a href="#">Link 5</a></li>
            </ul>
        </div>
    </body>
</html>

Ik heb zitten zoeken, en ben onder andere op dat artikel over hasLayout in IE gekomen. Verder heb ik niet echt nuttige info kunnen vinden.

Ik heb de pagina behoren bij deze code even op mijn server gezet.

Is hier een oplossing voor?

[ Voor 15% gewijzigd door Michali op 07-07-2006 17:24 ]

Noushka's Magnificent Dream | Unity

vrijdag 7 juli 2006 17:34

Acties:

Verwijderd

code:

1	.seperate { border-bottom: 1px solid black; }

vrijdag 7 juli 2006 17:37

Acties:

BasieP

Verwijderd schreef op vrijdag 07 juli 2006 @ 17:34:
code:
1
.seperate { border-bottom: 1px solid black; }

en dan onder je laatste element een border hebben (die je trouwens wel kan wegwerken op een nette manier)
@TS: ik vind het idee om apparte list items te gebruiken als veredelde border niet zo heel erg netjes eigenlijk. ik zou idd ook een border-bottom doen

edit:
ff aan't prutsen geweest, en dit is EEN oplossing (die trouwens goed werkt)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>List</title>
        <style type="text/css">

        div
        {
            position: absolute;
            top: 100px;
            left: 100px;
            border: 1px solid black;
            background: #CCCCCC;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        li.item {
            padding: 2px;
        }

        li.separator {
            padding-bottom: 4px;
            border-bottom: 1px solid black;
            margin-bottom: 2px;
        }

        </style>
    </head>
    <body>
        <div>
            <ul>

                <li class="item"><a href="#">Link 1</a></li>
                <li class="item"><a href="#">Link 2</a></li>
                <li class="item separator"><a href="#">Link 3</a></li>
                <li class="item"><a href="#">Link 4</a></li>
            </ul>
        </div>

    </body>
</html>

sterker nog, nu ik zo kijk, ik zie geen verschil tussen jouw versie in FF en de mijne, alleen werkt deze wel in IE

[ Voor 88% gewijzigd door BasieP op 07-07-2006 17:50 ]

This message was sent on 100% recyclable electrons.

vrijdag 7 juli 2006 18:12

Acties:

Michali

Topicstarter

Verwijderd schreef op vrijdag 07 juli 2006 @ 17:34:
code:
1
.seperate { border-bottom: 1px solid black; }

Geen optie, omdat ik er echt een element voor nodig heb. (Dat ivm. het genereren van zulke lijsten door een script.) En zulke smilies mag je wel weglaten van mij, zo'n drama was mijn startpost nou ook weer niet.

De gegeven oplossing had ik ook al bedacht, maar dat is niet echt een oplossing. Met de gegeven HTML wil ik het voor elkaar krijgen. Is dat mogelijk?

[ Voor 18% gewijzigd door Michali op 07-07-2006 18:13 ]

Noushka's Magnificent Dream | Unity

vrijdag 7 juli 2006 18:27

Acties:

BasieP

leuk mensen die 1 idee voor ogen hebben, en dus alle ideeen die daar niet mee stroken direct overboord gooien..
Michali, de oplossing die ik hierboven gepost heeft werkt prima, en als je moeite hebt met het genereren van die lijsten op deze manier, wil ik je wel helpen, maar ga svp niet achteraf een boel eisen stellen aan oplossingen

@hieronder: niet liegen he

in IE ziet ie er nog ranziger uit zonder, dan met die code

[ Voor 13% gewijzigd door BasieP op 07-07-2006 18:41 ]

This message was sent on 100% recyclable electrons.

vrijdag 7 juli 2006 18:31

Acties:

uashy

Laat maar.

[ Voor 103% gewijzigd door uashy op 08-07-2006 16:25 ]

vrijdag 7 juli 2006 19:45

Acties:

Michali

Topicstarter

BasieP schreef op vrijdag 07 juli 2006 @ 18:27:
leuk mensen die 1 idee voor ogen hebben, en dus alle ideeen die daar niet mee stroken direct overboord gooien..
Michali, de oplossing die ik hierboven gepost heeft werkt prima, en als je moeite hebt met het genereren van die lijsten op deze manier, wil ik je wel helpen, maar ga svp niet achteraf een boel eisen stellen aan oplossingen

Volgens mij begrijp je me verkeerd. Voor mij is het geen oplossing, omdat ik het niet kan toepassen. Waarom zou ik geen eisen aan de oplossing mogen stellen? Lijkt me een beetje onzin. Ik had het misschien in de startpost moeten zetten, dat is een ander verhaal, maar ik mag toch wel zeggen dat de gegeven oplossing voor mij niet bruikbaar is? Wat is daar het probleem dan van?

Ik heb verder geen moeite met het genereren van lijsten op deze manier, ik zit alleen vast aan een vaste set HTML die ik moet stijlen. Ik was benieuwd of dit op te lossen is met de HTML die gegeven is. De oplossing werkt idd. verder goed, als ik de HTML zou kunnen aanpassen.

Noushka's Magnificent Dream | Unity

zaterdag 8 juli 2006 00:19

Acties:

Verwijderd

In plaats van een extra LI te genereren kun je toch gewoon een extra class genereren?

zaterdag 8 juli 2006 12:43

Acties: