Float - afstand til billeder i forskellige browsere?

Tags:    html css

Kære brugere

Det kan godt være, at det umiddelbart virker som et underligt spørgsmål, men er der nogen, som umiddelbart kan svare mig på følgende:

Hvis man float'er et billede i forhold til en tekst, som f.eks. dette:

<img src="billeder/test.jpg" style="float:left;">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Da giver det forskellige resultater alt efter om man bruger Firefox eller IE. Det er tilnærmelsesvis det samme, bortset fra, at IE laver en afstand på 2 pixels til teksten højrefor og Firefox laver en afstand på 0 pixels.

Hvorfor sker dette? Kan det omgås?

Jeg ved godt at man bare kan lave float for både tekst og billede og definere width, men jeg ønsker en metode, som nødvendigvis kun tilføjes til det ene element (ud af 1. billedet og 2. teksten) - i dette tilfælde billedet.



9 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 3 karma
Sorter efter stemmer Sorter efter dato
Kære brugere

Det kan godt være, at det umiddelbart virker som et underligt spørgsmål, men er der nogen, som umiddelbart kan svare mig på følgende:

Hvis man float'er et billede i forhold til en tekst, som f.eks. dette:

<img src="billeder/test.jpg" style="float:left;">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Da giver det forskellige resultater alt efter om man bruger Firefox eller IE. Det er tilnærmelsesvis det samme, bortset fra, at IE laver en afstand på 2 pixels til teksten højrefor og Firefox laver en afstand på 0 pixels.

Hvorfor sker dette? Kan det omgås?

Jeg ved godt at man bare kan lave float for både tekst og billede og definere width, men jeg ønsker en metode, som nødvendigvis kun tilføjes til det ene element (ud af 1. billedet og 2. teksten) - i dette tilfælde billedet.


Jeg ved ikke helt hvad det er der sker, men jeg tror det har noget at gøre med at IE vidst ikke overholder standarderne eller sådan noget, men jeg er ikke helt sikker...

Men, har du prøvet med margin?
Fold kodeboks ind/udKode 


Hilsen
Jan S.

[Redigeret d. 08/02-06 23:52:57 af Jan S.]




Jeg ved ikke helt hvad det er der sker, men jeg tror det har noget at gøre med at IE vidst ikke overholder standarderne eller sådan noget, men jeg er ikke helt sikker...

Men, har du prøvet med margin?
Fold kodeboks ind/udKode 


Hilsen
Jan S.

[Redigeret d. 08/02-06 23:52:57 af Jan S.]


Ja du har nok ret mht. standarderne, men hører naturligvis gerne alle forslag trods det aspekt.

Jeg kan naturligvis godt tilføje en margin, men det hjælper ikke så meget i sidste ende. En margin på 2px betyder jo blot at teksten flyttes 2 pixels fra billedet i Firefox og 4 pixels fra billedet i IE.

Det er jo problematisk i forhold til et browserkompatibelt design.


Det er din DTD, eller mangel på samme, der gør at browserne fortolker din kode forskelligt.
Sørg for at få den fixet, hvorefter dine elementer vil reagere ens i forbindelse med såvel margin som padding.


Hey - det var satans!



Fold kodeboks ind/udKode 


Brug dog tables...

Med venlig hilsen
Christian Jeppesen
Freelance Programmør





Jeg ved ikke helt hvad det er der sker, men jeg tror det har noget at gøre med at IE vidst ikke overholder standarderne eller sådan noget, men jeg er ikke helt sikker...

Men, har du prøvet med margin?
Fold kodeboks ind/udKode 


Hilsen
Jan S.

[Redigeret d. 08/02-06 23:52:57 af Jan S.]


Ja du har nok ret mht. standarderne, men hører naturligvis gerne alle forslag trods det aspekt.

Jeg kan naturligvis godt tilføje en margin, men det hjælper ikke så meget i sidste ende. En margin på 2px betyder jo blot at teksten flyttes 2 pixels fra billedet i Firefox og 4 pixels fra billedet i IE.

Det er jo problematisk i forhold til et browserkompatibelt design.




Det er din DTD, eller mangel på samme, der gør at browserne fortolker din kode forskelligt.
Sørg for at få den fixet, hvorefter dine elementer vil reagere ens i forbindelse med såvel margin som padding.

Hey - det var satans!


Jeg kan ikke se, hvorfor det skulle hænge sammen med min doctype. Lige nu er den defineret som
Fold kodeboks ind/udKode 


Jeg kan se at du svarer på mit indlæg, hvor jeg skriver at der flyttes 4px i IE og 2 i Firefox. Det er _ikke_ her problematikken ligger. Læs eventuelt fra starten igen.

Problemet er, at der er en margin på 2px mellem billede og tekst i IE og 0 i Firefox - når intet er defineret. Hvis jeg så tilføjer en margin på 2 pixel, så lægger den blot 2 pixel til hver af de allerede eksisterende afstande og det giver 4px i IE og 2px i Firefox.

[Redigeret d. 09/02-06 13:40:28 af morten jensen]




Det er din DTD, eller mangel på samme, der gør at browserne fortolker din kode forskelligt.
Sørg for at få den fixet, hvorefter dine elementer vil reagere ens i forbindelse med såvel margin som padding.

Hey - det var satans!


Jeg kan ikke se, hvorfor det skulle hænge sammen med min doctype. Lige nu er den defineret som
Fold kodeboks ind/udKode 


Jeg kan se at du svarer på mit indlæg, hvor jeg skriver at der flyttes 4px i IE og 2 i Firefox. Det er _ikke_ her problematikken ligger. Læs eventuelt fra starten igen.

Problemet er, at der er en margin på 2px mellem billede og tekst i IE og 0 i Firefox - når intet er defineret. Hvis jeg så tilføjer en margin på 2 pixel, så lægger den blot 2 pixel til hver af de allerede eksisterende afstande og det giver 4px i IE og 2px i Firefox.

[Redigeret d. 09/02-06 13:40:28 af morten jensen]


Har du tjekket om det virker med en ændring af padding?
M.V.H.
Loke Dupont aka colde





Har du tjekket om det virker med en ændring af padding?
M.V.H.
Loke Dupont aka colde


Det giver intet resultat med padding, såvel som margin. Som jeg ser det er det et problem med IE, der automatisk tilføjer en lille afstand når man bruger float:left;

Prøv eventuelt at tage en helt tom side og indsæt kodelinjen jeg har angivet foroven. Se så siden i Firefox og IE og i kan tydeligt se, at der er forskellig afstand mellem bilelde og tekst i de forskellige browsere.



Er der ingen der har et forslag til en løsning? Kan man eventuelt bruge en anden metode eller få float afstanden til at reagere på samme måde i browserne?



Fold kodeboks ind/udKode 


Brug dog tables...

Med venlig hilsen
Christian Jeppesen
Freelance Programmør


Det kan jeg desværre ikke. Jeg skal redige i en template fra en php baseret interface, og jeg kan ikke umiddelbart gøre det i tabeller, da de forskellige tekster og billeder ligger i forskellige opdelte elementer.



t