MossaMedlem sedan dec. 200123 inlägg Jag har ett problem med Firefox.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
div {padding: 0px; margin: 0px;}
img {padding: 0px; margin: 0px;}
.test {
float: left;
width: 400px;
background-color: #FF00FF;
padding-left: 10px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="test">
<img src="test.gif" style="float: right;" />
</div>
</body>
</html>
Bilden är i det här fallet 200 x 200 pixlar. Jag har härlett mitt problem till följande (utesluts en av dem försvinner "buggen"):
1) Högerflytande bild
2) Padding på diven
3) Overflow: hidden
4) Avsaknaden av height i diven
Vid visning av ovanstående kod i Firefox dyker en padding på höger sida upp, 10 pixlar bred, för den flytande bilden, trots att paddingen bara appliceras på vänster sida av div:en. Om man istället sätter padding för hela diven till 10 pixlar så blir paddingen på höger sida 20 pixlar. Sätter man vänster 10 pixlar, höger 20 pixlar blir högersidan totalt 50 pixlar (10 från vänster, 20 från höger och 20 från höger igen - den "riktiga" högra paddingen antagligen?). Gissar alltså att "gapet" på höger sida tar totala vänster+höger-paddingen, plus den egentliga paddingen som den skall ha.
Som synes i min "härledning" uppstår inte problemet om jag lägger till height i diven. Jag har inte heller lyckats applicera samma problem på något annat block- eller inline-element. Däremot kan andra element med float: right få samma spök-padding tillsammans med bilden (bilden "aktiverar" problemet). Då uppstår dessutom ytterligare en skum sak: spök-paddingen visas inte när jag laddar sidan första gången, utan dyker upp först efter en reload i samma fönster. :q
Jag har letat men inte lyckats knyta detta till någon specifik känd bugg (fast jag är ganska övertygad om att det faktiskt är det). Orkar inte härleda mer nu heller, vilka element som det gäller etc. Vad jag kan se förekommer inte denna spök-padding i IE 6 med samma "situationer".
Är det någon som kan berätta vilken bugg det handlar om eller varför problemet uppstår? Kanske är jag så slutarbetad att jag missat att detta möjligen är fullt logiskt och helt rätt och att IE istället visar fel - som det normalt brukar vara ;)
/Edit: Korrigerade koden så att den slapp bli så bred.
zcorpanMedlem sedan dec. 20042 245 inlägg Hmm... jag var först tvungen att ändra
<html>
till
<html xmlns="http://www.w3.org/1999/xhtml">
, annars såg jag bara ett XML-träd. ;)
Jag kunde inte hitta nåt i bugzilla om det här... Men det är uppenbarligen en bugg med Firefox.
Hur som helst, jag har gjort en variant av ditt test case.
GuffaMedlem sedan juni 2004533 inlägg I Opera 7.45 så ser den likadan ut som i Internet Explorer.
Netscape 6.1 uppvisar ett intressant beteende; där försvinner div-taggen helt, den får tydligen höjden noll.
I Netscape 7.2 så ser den likadan ut som i Firefox.
MossaMedlem sedan dec. 200123 inlägg
zcorpan skrev:
Hmm... jag var först tvungen att ändra
<html>
till
<html xmlns="http://www.w3.org/1999/xhtml">
, annars såg jag bara ett XML-träd. ;)
Javisst, förlåt. Försvann när jag satt och skalade av dokumentet så mycket som möjligt för att se vad som aktiverade/avaktiverade buggen etc.
zcorpan skrev:
Jag kunde inte hitta nåt i bugzilla om det här... Men det är uppenbarligen en bugg med Firefox.
Kanske är något man alltså skall rapportera in?
Guffa skrev:
I Opera 7.45 så ser den likadan ut som i Internet Explorer.
Netscape 6.1 uppvisar ett intressant beteende; där försvinner div-taggen helt, den får tydligen höjden noll.
I Netscape 7.2 så ser den likadan ut som i Firefox.
Ah, man tackar. Har inte hunnit kika själv så det underlättar!
Man hade ju annars hoppats att buggen försvunnit om man definierat height till auto (för att vara dynamisk) men det hjälpte inte.
zcorpanMedlem sedan dec. 20042 245 inlägg
Kanske är något man alltså skall rapportera in?
Ja, om det inte redan finns en bugg för det. Du får söka först. :) https://bugzilla.mozilla.org/
Man hade ju annars hoppats att buggen försvunnit om man definierat height till auto (för att vara dynamisk) men det hjälpte inte.
För vilket element? height är per defaul auto för de flesta element.
zcorpanMedlem sedan dec. 20042 245 inlägg ...det roliga är att buggen försvinner när man ändrar storleken på fönstret. :D
MossaMedlem sedan dec. 200123 inlägg
zcorpan skrev:
Kanske är något man alltså skall rapportera in?
Ja, om det inte redan finns en bugg för det. Du får söka först. :) https://bugzilla.mozilla.org/
Jo, har dock inte orkat söka/rapportera bugg. Det går ju trots allt ganska lätt att komma runt - eftersom det bara verkar gälla bilder så fungerar det när jag använder en flytande div istället, som innehåller en bild. Men det är ju inte rätt ;)
zcorpan skrev:
För vilket element? height är per defaul auto för de flesta element.
Ja, det har du ju rätt i, men det var mer ett härledningsförsök, eftersom buggen försvann om man definierade en fast höjd. Eftersom det verkar vara en bugg kan man ju inte riktigt förlita sig på defaultvärden m.m. utan den kan ju triggas av de mest unika situationerna ...
MossaMedlem sedan dec. 200123 inlägg
zcorpan skrev:
...det roliga är att buggen försvinner när man ändrar storleken på fönstret. :D
Ojoj, det var nytt! :i
Men f-n, det innebar ju nu att buggen _uppstod_ om jag använde en flytande div. När sidan laddas: inga problem. Ändrar storlek på fönstret: voila! Buggen gäller även högerflytande divar.
Jaja, detta är väl bara ett väldans bra bevis på att flytande saker till höger gör webbläsare tokiga ... §jr
