Toon posts:

[CSS] List-item buiten div laten vallen (IE-foutje)

Pagina: 1
Acties:

Verwijderd

Topicstarter
Goed, ik zit hier met een probleem wat waarschijnlijk vrij simpel is, maar waar ik na een dikke twee uur kutten en zoeken totaal niets mee opschiet.

Om te beginnen, hier een paar screenshots.
De eerste is zoals de pagina hoort te zijn, en zoals ie ook wordt weergegeven in Firefox.

Afbeeldingslocatie: http://www.totaalverrot.nl/dump/titles_ff.jpg

En dan, de fucked up versie in Internet Explorer 7, onder Vista:

Afbeeldingslocatie: http://www.totaalverrot.nl/dump/titles_ie.jpg

De volledige site zelf is hier te bekijken.

De pagina is opgebouwd uit twee div'jes, eentje voor het menu (de donkere, links), en eentje voor het artikel (licht, rechts). In het menu staat een list, met elke titel in een apart item. Het geselecteerde item (of ja, het artikel wat wordt weergegeven) krijgt een andere klasse mee, die de achtergrondkleur veranderd en het list-item zo breed maakt dat ie tegen de div van het artikel aanvalt.

Zoals je ziet gaat dit in FF prima, alleen in IE valt het list-item weg onder de menu-div.
De breedte van het list-item heb ik uitgedrukt in harde pixels, als ik er procenten voor in de plaats zet gaat dat in FF wederom goed, en IE trekt 'm ook door zoals het hoort, alleen gooit ie dan de div met het artikel erin naar beneden, onder het menu.

Ik zal hieronder de CSS van het menu en de list plakken, de volledige CSS-file heb ik hier staan.

Volgens mij ga ik hier zelf niet uitkomen, is er iemand die me hiermee op de goede weg kan helpen?

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#titles {
    background-image:url(images/titleback.jpg);
    float:left;
    position:relative;
    border:1px solid #333333;
    width:300px;
    width:"320px";
    padding:10px;
    padding-right:0px;
    margin-top:10px;
    font-size:9px;
    color:#EEEEEE;
}

#titles ul {
    list-style-type:none;
    padding-left:0px;
    margin-left:0px;
    padding-right:0px;
    margin-right:0px;
    width:100%;
}

#titles ul li {
    padding-bottom:5px;
    padding-top:5px;
    padding-right:0px;
    margin-right:0px;
    width:312px;
}

#titles a {
    color:#EEEEEE;
    font-family:verdana;
    text-decoration:none;
    font-weight:bold;
    font-size:13px;
}

.selectedarticle{
    border:1px solid #363636;
    border-left:none;
    border-right:none;
    position:relative;
    left:-10px;
    width:100%;
    z-index:10;
    background-color:#AAAAAA;
    padding-left:10px;
}

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Begin eerst eens met een volledige doctype zodat je de browser in standards-compliant mode laat renderen...

Intentionally left blank


Verwijderd

Topicstarter
Juist, dat is het truucje wat ik zocht.

Baal ik soms zo van he, dat ik die kleine dingen niet weet. Het meeste lukt me wel, maar van zulke kleine fuck upjes heb ik dan weer nooit gehoord.

In ieder gevak bedankt!

  • Savantas
  • Registratie: December 2002
  • Laatst online: 28-11 18:59
Begin je je nu hier ook al op te naaien? Daar heb je je site toch voor? :+

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)


Verwijderd

Topicstarter
Haha, true.
Maar goed, soms vind ik het jammer dat ik al die computermeuk zelf heb geleerd, en dus bijvoorbeeld bovenstaande dingen, die niet echt bijzonder zijn, volledig over het hoofd zie.
Tja, zo heb ik tenminste wat bij te leren, zullen we maar zeggen ;)