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;
}

Lenke til kommentar

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
Lenke til kommentar
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.

Lenke til kommentar
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:

Lenke til kommentar
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.

Lenke til kommentar
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 ;)

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
×
×
  • Opprett ny...