Gå til innhold

IE behandler kode feil (margin)

hernil

Av hernil
i Programmering og webutvikling

Anbefalte innlegg

hernil

hernil

Skrevet
Skrevet

Dette er vel egentlig ingen bombe, men står fast på at IE skal være så pokkers vrang med en side jeg har. Kan noen være så snille å fortelle meg hvorfor IE ikke takler denne koden? Og ikke minst hvordan jeg kan fikse det?

 

Problemet er at "pdf-diven blir har fått en margin oppe og til venstre for at den skal være riktig posisjonert, men i IE blir det helt feil. Antar at det har noe med at alle andre nettlesere går utifra at div-en er til venstre, mens IE går utifra at den er i midten. Er det noen måte å fikse dette på? Siden det er snakk om finnes her. Det er normalt at pdf-en ikke kan lastes ned.

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> - Prosjekter</title>
<link href="prosjekter.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center">
<div id="prosjekter">
<div id="pdf"><a href="../filer/portfolio.pdf" target="_blank"><img src="../faste bilder/pdf-link.png" alt="link to pdf" width="400" height="90" border="0" /></a></div>
</div>
</div>
</body>
</html>

 

CSS

@charset "utf-8";
/* CSS Document */

#prosjekter {
background-image: url(../faste%20bilder/prosjekter_bakgrunn.png);
width: 800px;
height: 566px;
}
#pdf {
height: 90px;
width: 400px;
position: absolute;
margin-top: 210px;
margin-left: 210px;
}

Videoannonse

Videoannonse
Annonse
frisyre

frisyre

Skrevet
Skrevet (endret)

Jeg forstår ikke helt hva du prøver å gjøre, men hvis du prøver å få alt til å være midtstilt i alle browsere bør du gjøre dette;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> - Prosjekter</title>
<link href="prosjekter.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="prosjekter">

 <div id="pdf">

<a href="../filer/portfolio.pdf" target="_blank"><img src="../faste bilder/pdf-link.png" alt="link to pdf" width="400" height="90" border="0" /></a>

 </div>

</div>

</body>
</html>

 

#prosjekter {
background-image: url(../faste%20bilder/prosjekter_bakgrunn.png);
width: 800px;
height: 566px;
margin: 0 auto;
}
#pdf {
height: 90px;
width: 400px;
margin-top: 210px;
margin: 0 auto;
}

 

Tror dette er riktig, med forbehold om at jeg glemmer noe.

Endret av frisyre
hernil

hernil

Skrevet
  • Forfatter
Skrevet

Hvis du ser på siden jeg linket til så skal den klikkbare pdf-diven være over logoen. Den er det i Firefox, Opera og Chrome, men ikke i IE. Har du noen løsning på det?

4588pkdkrikue5c

4588pkdkrikue5c

Skrevet
Skrevet

Hei,

Dersom du har behov for spesialinstruksjoner for IE kan du bare gjør slik.

 

#navnpådiv {
margin:500px;
}

/* nå kommer den for ie */
* html #navnpådiv {
margin:400px;
}

Dette funker i IE6. Ikke 7 tror jeg. Dessverre.

hernil

hernil

Skrevet
  • Forfatter
Skrevet

Fikk ordna det for IE 6, noe som ikke akkurat var en prioritet, med tanke på at det gjennomsiktige png-bildet ikke blir gjennomsiktig i IE 6 uansett. Finnes det en lignende hack for IE 7 også?

4588pkdkrikue5c

4588pkdkrikue5c

Skrevet
Skrevet

Eg ville tatt stilling til IE6 var eg deg.

Det du kan gjere er å sette eit seperat stilark (css) for Internet Explorer. Sett inn dette i <head> taggane:

<!--[if IE]>
<LINK href="fil-for-ie.css" type=text/css rel=stylesheet>
<![endif]-->

<!--[if !IE]><!-->
<LINK href="for-alle-andre-browsere.css" type=text/css rel=stylesheet>
<!--<![endif]-->

 

Når det gjeld transperant PNG så finnes det ei fiks for det. Er PNG'en i CSS fila eller HTML'en? Eg har fiks for begge i tilfelle. Om du treng.

Mange bruker framleis IE6, så du burde prioritere dette.

hernil

hernil

Skrevet
  • Forfatter
Skrevet

Genial den kodesnutten, takker så mye! :D

Er dessverre mange som bruker IE 6 ja, får vel ta stilling til den foreløpig da. Tar gjerne imot fiks for png i både HTML og CSS jeg. Alltid villig til å lære.

hernil

hernil

Skrevet
  • Forfatter
Skrevet

Har noen forresten en god forklaring på hvorfor jeg ikke får mouseover tekst med denne koden?

<a href="../filer/portfolio.pdf">
<img src="../faste bilder/prosjekter_bakgrunn.png" alt="siden er under arbeid. klikk for å laste ned midlertidig portefølje (pdf)" width="800" height="562" border="0" />
</a>

Har jo bevis på at det funker her. :dontgetit:

Mr D

Mr D

Skrevet
Skrevet
Har noen forresten en god forklaring på hvorfor jeg ikke får mouseover tekst med denne koden?

<a href="../filer/portfolio.pdf">
<img src="../faste bilder/prosjekter_bakgrunn.png" alt="siden er under arbeid. klikk for å laste ned midlertidig portefølje (pdf)" width="800" height="562" border="0" />
</a>

Har jo bevis på at det funker her. :dontgetit:

Bruk title istedenfor alt. alt skal være med, men er alternativ tekst hvis bildet ikke vises.

4588pkdkrikue5c

4588pkdkrikue5c

Skrevet
Skrevet

Åja, eg forstod ikkje heilt kva du meinte? Meiner du slik at det kjem ein gul boks med tekst når du held over noko? Då er det title som gjeld, som Mr D seier her.

 

Når det gjeld fiks for transperant png i IE6 kan du gjere slik;

Last først ned denne zipfila med fiksen i.

 

Deretter skriv du inn dette på toppen av CSS fila di:

img, div { 
behavior: url(iepngfix.htc) 
}

 

Når det gjeld i HTML kan du lese om det her.

 

Eit alternativ er jo å bruke GIF bilder, men du burde få det til iallefall i CSS fila.

 

Lukke til ;)

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...