Søg
Avatar billede dorgbar Nybegynder
23. december 2004 - 22:15 Der er 23 kommentarer

firefox / ie optimering.

jeg har et stykke kode som jeg gerne vil have giver samme resultat i ie og ffox

<div style="position: absolute; background-color: red; width: 100%; height: 110px;">
<div style="background-color: green; width: 100%; height: 80px; margin: 5px;">
</div>
</div>

det skal give ie's resultat
Avatar billede olebole Juniormester
23. december 2004 - 22:43 #1
<ole>

Koden, du viser, giver nøjagtig samme resultat i IE og FF. Årsagen til evt. forskelle ligger andre steder i din kode - prøv at lægge et link, så vi kan få rettet det hele på én gang  :)

/mvh
</bole>
Avatar billede olebole Juniormester
23. december 2004 - 22:44 #2
... og hvis der er forskelle, kan du i øvrigt roligt regne med, det er FF, der viser resultatet korrekt  :)
Avatar billede dorgbar Nybegynder
23. december 2004 - 23:40 #3
hmm er ikke kommet længere end her til den der stump kode giver to resultater
i ie laver den en grønkasse ind i en blå.
i ff ligger den grønnekasse delsvist udover den blå.

ie opfatter min kode på den måde at den grønne kasse som er 100% width skal være 100% af den blå kasse
ff opfatter det på den måde at den grønne kasse skal være 100% af hele siden.
Avatar billede olebole Juniormester
24. december 2004 - 00:41 #4
Der står formodentligt andet i dit dokument, end de fire linier  :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
</style>
</head>
<body>

<div style="position: absolute; background-color: red; width: 100%; height: 110px;">
<div style="background-color: green; width: 100%; height: 80px; margin: 5px;">
Fungerer fint  ;o)
</div>
</div>

</body>
</html>
Avatar billede dorgbar Nybegynder
24. december 2004 - 00:57 #5
hmm det fungere ikke på min computer :( ihvertfald og jeg har lige hentet den nyeste version af ffox
Avatar billede olebole Juniormester
24. december 2004 - 01:01 #6
Nu kan jeg jo ikke se din PC, så det ville måske være meget godt, hvis du beskrev, hvad du mener med "det fungere ikke på min computer"  :)
Avatar billede dorgbar Nybegynder
24. december 2004 - 01:06 #7
:) selvfølgelig.

det den gør er at den i ie laver en box inde i en anden box
hvor den i ffox laver 2 boxe der overlapper hindanden
Avatar billede olebole Juniormester
24. december 2004 - 01:07 #8
Hvis det er IE's scrollbar, du tænker på, opstår den fordi, du sætter en bredde på 100% og en margin på 5px på dit indre div. Så bliver dets bredde jo 100%+10px - og det er bredere end vinduet  ;o)
Det kommer du udenom ved at skrive:
  <div style="background-color: green; height: 80px; margin: 5px;">

Et ikke absolut positioneret div er jo et block-element og fylder derfor alligevel hele bredden.
Avatar billede olebole Juniormester
24. december 2004 - 01:09 #9
Så har du ikke kopieret min kode helt nøjagtigt. Kopier hele min kode og undlad at skrive andet i dokumentet
Avatar billede olebole Juniormester
24. december 2004 - 01:09 #10
PS: Det, der står før <html> er noget af det mest vigtige  ;o)
Avatar billede dorgbar Nybegynder
24. december 2004 - 01:17 #11
ja har jeg gjort
og nej det er firefox der blivere størere end vinduet ikke ie, den gør som den skal.
problemet er at ff opfatter de width 100% som 100% af hele siden, hvor den burde opfatte de 100% som 100% af den objekt den befinder sig i, den anden kasse.
Avatar billede olebole Juniormester
24. december 2004 - 02:34 #12
Så gør du stadig ikke, som jeg skriver. Prøv at læse min kommentar (24/12-2004 01:07:52) én gang til
Avatar billede dorgbar Nybegynder
24. december 2004 - 15:56 #13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
</style>
</head>
<body>

<div style="position: absolute; background-color: red; width: 100%; height: 110px;">
<div style="background-color: green; width: 100%; height: 80px; margin: 5px;">
Fungerer fint  ;o)
</div>
</div>

</body>
</html>


det der stykke kode opføre sig ikke ligedan i ffox og i ie
Avatar billede roenving Novice
24. december 2004 - 16:01 #14
Hvis du fjerner bredden på den indre div, er det kun IEs skygge scrollbar, som ændrer fortolkningen ...

Så sådan er de fuldstændig identiske:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow:hidden;
}
</style>
</head>
<body>

<div style="position: absolute; background-color: red; width: 100%; height: 110px;">
<div style="background-color: green; height: 80px; margin: 5px;">
Fungerer fint  ;o)
</div>
</div>

</body>
</html>
Avatar billede dorgbar Nybegynder
24. december 2004 - 16:05 #15
nu har jeg fået det til at virke, ved at fjerne width: 100%;, grunden til at jeg kan få det til at virke er at en div altid vil fylde det ud den er indeni vandret. men hvis jeg nu vil have den til at fylde det ud lodret hvad gør jeg så?

<div style="position: absolute; background-color: red; height: 100%; width: 100%">
<div style="background-color: green; margin: 5px; height: 100%;">

i denne kode overlapper ffox lodret.

forresten må du gerne oprette et svar :) nu hvor du har svaret på det oprindelige spørgsmål
Avatar billede roenving Novice
24. december 2004 - 16:06 #16
Ved ikke at sætte height på den yderste !-)
Avatar billede dorgbar Nybegynder
24. december 2004 - 16:11 #17
hmm så kommer den kun til at være en linje høj :(
Avatar billede roenving Novice
24. december 2004 - 16:14 #18
Øh, ikke hos mig, fordi den skal blive så høj som indholdet, og indholdet er jo en 80px høj div + en margin på 5px, dvs. ialt 90px !-)

-- og det er iøvrigt fuldstændig ens i både IE og Mozilla !-)
Avatar billede olebole Juniormester
24. december 2004 - 16:19 #19
Hvis du læste, hvad folk skriver til dig, ville du vide, du har fået svaret forlængst:
(24/12-2004 00:41:18) og (24/12-2004 01:07:52) - hvad jeg også skrev til dig i (24/12-2004 02:34:01) ... og alligevel spørger du (24/12-2004 15:56:04)  ;o)
Avatar billede knudgert Nybegynder
24. december 2004 - 16:19 #20
En testside med det, du får fejl i, ville absolut øge svarmuligheden.
Avatar billede dorgbar Nybegynder
25. december 2004 - 02:08 #21
roenving <-- ideen er at den skal være skalerbar, så hvis du resizer vinduet, så skal siden følge med. derfor bliver jeg nød til at bruge % og så skal jeg have ffox til at opføre sig ligesom ie, og ikke overlappe den yderste box
olebole <--- jeg spørger ikke jeg konstratere
knudgert <--- skal have at vide hvad der er galt med denne kode siden den er anderledes i ffox end i ie

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow:hidden;
}
</style>
</head>
<body>

<div style="position: absolute; background-color: red; height: 100%; width: 100%">
<div style="background-color: green; margin: 5px; height: 100%;">
Fungerer fint  ;o)
</div>
</div>

</body>
</html>
Avatar billede dorgbar Nybegynder
25. december 2004 - 02:09 #22
konstatere*
Avatar billede roenving Novice
25. december 2004 - 02:10 #23
Der er det galt, at IE laver en fejl med css-standarderne !-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:14 Sætte billeder ind i google sheets ark ud fra elev nummer Af lurup i Excel
16/0822:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
16/0812:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
White papers
Flere white papers »