Toon posts:

[CSS] 'body img', background niet in IE

Pagina: 1
Acties:

Verwijderd

Topicstarter
In een div met class 'logbody' (maakt deel uit van een Pivot weblog) wil ik afbeeldingen een speciale rand meegeven door ze in mijn stylesheet een padding van 9px en een achtergrond te geven. De afbeeldingen zelf zijn 125x125 px. Stukje CSS dat het moet doen:
code:
1
2
3
4
5
6
7
.logbody img {
    background: url("/img/2.0/bg_image.gif") repeat-x;
    background-color: #000000;
    width: 125px;
    height: 125px;
    padding: 9px;
}

Stukje HTML, met 'style' en 'class' die Pivot automatisch meegeeft:
code:
1
<img src="/weblog/images/20060720afbeelding.jpg" style="float:right;margin-left:10px;margin-bottom:5px;border:0px solid" title="" alt="" class="pivot-image" />

Allemaal leuk en aardig, in Firefox werkt het prima, maar (hoe kan het ook anders) IE ligt dwars en geeft alleen het originele plaatje van 125x125 weer. Wat doe ik fout?

  • Reinier
  • Registratie: Februari 2000
  • Laatst online: 19:23

Reinier

\o/

Wat gebeurt er als je al die CSS statements aan img.pivot-image hangt in plaats van aan .logbody img?

Verwijderd

Topicstarter
Ik zie dat de stylesheet waar 'pivot-image' in voorkomt helemaal niet aan mijn pagina wordt gehangen, enkel mijn eigen sheet. Die class kan dus praktisch weg.

  • sjaakaq
  • Registratie: September 2003
  • Laatst online: 01-01 14:07

sjaakaq

It might get loud

De styling van images in Pivot is altijd nogal een gezeik. Volgens mij wordt zelfs door bepaalde stukken PHP van Pivot je image stijl botweg "tenietgedaan"... Maar goed, mij is het ooit zo gelukt (meen ik):

Cascading Stylesheet:
1
2
.pivot-image: {padding: 9px; background: #123;}
.logbody img: {padding: 9px !important; background: #123 !important;}


Oftewel: dubbel declareren en ook nog met !important.

leoaq.fm // Jeune Loop


Verwijderd

Topicstarter
Hm, dat haalt ook niets uit. Overigens staat .pivot-image in 'pivot-style.css' en is nog leeg. Daarnaast wordt pivot-style.css helemaal niet gelinkt in het bestand. Ook !important levert niets op..

Verwijderd

Topicstarter
Volgende poging; afbeelding een eigen class geven.
Cascading Stylesheet:
1
2
3
4
5
6
7
8
.logimg {
    background: url("/img/2.0/bg_image.gif") repeat-x;
    background-color: #000000;
    width: 125px;
    height: 125px;
    padding: 9px;
    float: right;
}

HTML:
1
<img src="/weblog/images/20060720afbeelding.jpg" class="logimg" title="" alt="" />

Ook dit werkt gewoon in FF, maar IE pakt nu alleen de 'float: right' goed op. Het lijkt er dus op dat het puur de padding en background zijn die 'ie niet trekt. Terwijl ik hetzelfde principe op andere websites prima werkend heb gezien..
Pagina: 1