Gå til innhold

div problem i IE7

anaton

Av anaton
i Programmering og webutvikling

Anbefalte innlegg

anaton

anaton

Skrevet
Skrevet

Hei,

 

jeg har litt problemer med noen div bokser i IE7. Div boksene fungerer fint i Firefox og Opera. Jeg har laget et eksempel script:

 

<html>

<head>

<title></title>

<style type="text/css">

div.boks1

{

background-color: blue;

}

div.boks3

{

width: 400px;

height: 200px;

background-color: black;

}

</style>

</head>

<body>

<div class="boks3">

<div class="boks1">

<img src="http://www.vg.no/gfk/front/vglogo.gif" />

</div>

</div>

</body>

</html>

 

Hvis dere åpner denne siden i IE7 vil dere oppdage at det kommer en blå linje under VG logoen, men den er der ikke i Firefox.

 

Så spørsmålet er hvordan får jeg bort den blå linjen i IE7?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)

Hehe, ja, bildet var visst tilgjengelig på nett... :blush:

 

Det hjelper å fjerne linjeskiftet mellom bilde-elementet og den etterfølgende </div>-taggen. Uten at det er en god løsning.

 

Det fungerte forresten ved å sette display:block på bildet hos meg. Utgangspunktet for problemet er at img-elementet er et inline element.

Endret av balletryne
Lenke til kommentar
anaton

anaton

Skrevet
  • Forfatter
Skrevet

det fungerte å fjerne det linjeskiftet, takk for tipset! :)

 

men hvor satte du da display:block hvis det fungerte hos deg? jeg har skrevet det inn i både img tagen og i div tagen i style-sheeten. bildet reagerer forresten på andre kommandoer fra display, blant annet inline.

Lenke til kommentar
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)

Det fungerer både ved å legge inn følgende i style-elementet

 

img
{
   display: block;
}

og ved å putte følgende i img-elementet

 

style="display:block"

Det at img-elementet kan påvirkes av andre display-statements har med adresseringspresedens å gjøre (http://www.w3.org/TR/REC-CSS2/cascade.html).

 

Årsaken til selve problemet er at når bildet vises som en inline element må det naturligvis justeres i forhold til teksten rundt, inkludert linjehøyde osv. Teksten du har rundt er det linjeskiftet som automatisk blir gjort om til et mellomrom av nettleseren i en inline-sammenheng. IE har tydeligvis en annen måte å justere bilder i forhold til tekst enn andre nettlesere. Ved å sette alt som block og ved å ikke har noe annen tekst rundt blir whitespace ignorert.

Endret av balletryne
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...