---

Jeg har en simpel side med tre div's. En ydre som centrerer siden
og to inden i denne. Om de to indre gælder:
Den første indeholder et simpelt billede, den anden har et lidt
tekst (p og ul) og baggrundsfarven hvid. Men af en eller anden
grund overlapper de en smule, med mindre, at jeg sætter en
passende margin eller padding. Hvilket virker dybt ulogisk (eller
også er jeg bare dum).
Se
http://steffengrondahl.dk/rodekasse/divproblem.html

NB: Se godt efter. Det er kun nogle få pixels, men det er alt
rigeligt.

PS: Siden validerer som xhtml strict, så det er vist ikke der, at
fejlen ligger. Måske den indlejrede css? Og det er tildyneladende
underordnet om billedet ligger pakket ind i en div eller ej.

PPS: Som jeg skriver undrer jeg mig også over hvorfor min p skal
have en top-margin på 0 for at undgå et gab mellem de to indre
div's. Jeg synes ikke at det er logisk.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Kig evt på
http://steffengrondahl.dk/rodekasse/divproblem2.html

Her har jeg fjernet lidt overflødig stylesheet (en masse padding og
margin som ikke er nødvendig).

Steffen Grøndahl wrote in dk.edb.internet.webdesign.html:
> Jeg har en simpel side med tre div's. En ydre som centrerer siden
> og to inden i denne. Om de to indre gælder:
> Den første indeholder et simpelt billede, den anden har et lidt
> tekst (p og ul) og baggrundsfarven hvid. Men af en eller anden
> grund overlapper de en smule, med mindre, at jeg sætter en
> passende margin eller padding. Hvilket virker dybt ulogisk (eller
> også er jeg bare dum).
> Se
> http://steffengrondahl.dk/rodekasse/divproblem.html
>
> NB: Se godt efter. Det er kun nogle få pixels, men det er alt
> rigeligt.
>
> PS: Siden validerer som xhtml strict, så det er vist ikke der, at
> fejlen ligger. Måske den indlejrede css? Og det er tildyneladende
> underordnet om billedet ligger pakket ind i en div eller ej.
>
> PPS: Som jeg skriver undrer jeg mig også over hvorfor min p skal
> have en top-margin på 0 for at undgå et gab mellem de to indre
> div's. Jeg synes ikke at det er logisk.
>
> --
> Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
> - Pædagogiske tutorials på dansk
> - Kom godt i gang med koderne
> KLIK HER! => http://www.html.dk/tutorials


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Steffen Grøndahl skrev:

>> PS: Siden validerer som xhtml strict, så det er vist ikke der, at
>> fejlen ligger. Måske den indlejrede css? Og det er tildyneladende
>> underordnet om billedet ligger pakket ind i en div eller ej.
>>
>> PPS: Som jeg skriver undrer jeg mig også over hvorfor min p skal
>> have en top-margin på 0 for at undgå et gab mellem de to indre
>> div's. Jeg synes ikke at det er logisk.

Du ved ikke på forhånd noget om
elementers borders, margin og padding.
En forsikring mod dette er følgende
formdeklaration:
*{margin:0;padding:0;border:0;}
Men det hjælper lissom ikke noget når
du i den grad blander et indlejret
stylesheets formregler med inline-styles
(brug af style-attributten).

Først nå du har nulstillet alt er
det tid at bekymre sig om overlapning
hvis det overhovedet findes.
--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Steffen Grøndahl skrev:
>
> >> PS: Siden validerer som xhtml strict, så det er vist ikke der, at
> >> fejlen ligger. Måske den indlejrede css? Og det er tildyneladende
> >> underordnet om billedet ligger pakket ind i en div eller ej.
> >>
> >> PPS: Som jeg skriver undrer jeg mig også over hvorfor min p skal
> >> have en top-margin på 0 for at undgå et gab mellem de to indre
> >> div's. Jeg synes ikke at det er logisk.
>
> Du ved ikke på forhånd noget om
> elementers borders, margin og padding.
> En forsikring mod dette er følgende
> formdeklaration:
> *{margin:0;padding:0;border:0;}
> Men det hjælper lissom ikke noget når
> du i den grad blander et indlejret
> stylesheets formregler med inline-styles
> (brug af style-attributten).
>
> Først nå du har nulstillet alt er
> det tid at bekymre sig om overlapning
> hvis det overhovedet findes.
> --
> Med venlig hilsen
> Jørgen Farum Jensen
> http://webdesign101.dk
> ..

Den tror jeg ikke på. Jeg har nu fjernet inlines-styles og problemet er
der stadig, se
http://steffengrondahl.dk/rodekasse/divproblem3.html

Til gengæld har jeg opdaget, at problemet forsvinder, hvis jeg vælger et
billede med højden 16px (smider lidt mere hvidt i bunden af billedet).
Så med mindre, at nogen har en anden genial løsning bliver det min - jeg
sidder så bare og undrer mig over hvorfor diverse browsere har problemer
med billeder på under 16px, men det får måske en klokke til at ringe hos
nogen?
Anyay - tak for hjælpen


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Steffen Grøndahl udtrykte præcist:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>> Steffen Grøndahl skrev:
>>
>>>> PS: Siden validerer som xhtml strict, så det er vist ikke der, at
>>>> fejlen ligger. Måske den indlejrede css? Og det er tildyneladende
>>>> underordnet om billedet ligger pakket ind i en div eller ej.
>>>>
>>>> PPS: Som jeg skriver undrer jeg mig også over hvorfor min p skal
>>>> have en top-margin på 0 for at undgå et gab mellem de to indre
>>>> div's. Jeg synes ikke at det er logisk.
>>
>> Du ved ikke på forhånd noget om
>> elementers borders, margin og padding.
>> En forsikring mod dette er følgende
>> formdeklaration:
>> *{margin:0;padding:0;border:0;}
>> Men det hjælper lissom ikke noget når
>> du i den grad blander et indlejret
>> stylesheets formregler med inline-styles
>> (brug af style-attributten).
>>
>> Først nå du har nulstillet alt er
>> det tid at bekymre sig om overlapning
>> hvis det overhovedet findes.
>> --
>> Med venlig hilsen
>> Jørgen Farum Jensen
>> http://webdesign101.dk
>> ..
>
> Den tror jeg ikke på. Jeg har nu fjernet inlines-styles og problemet er
> der stadig, se
> http://steffengrondahl.dk/rodekasse/divproblem3.html
>
> Til gengæld har jeg opdaget, at problemet forsvinder, hvis jeg vælger et
> billede med højden 16px (smider lidt mere hvidt i bunden af billedet).
> Så med mindre, at nogen har en anden genial løsning bliver det min - jeg
> sidder så bare og undrer mig over hvorfor diverse browsere har problemer
> med billeder på under 16px, men det får måske en klokke til at ringe hos
> nogen?
> Anyay - tak for hjælpen

Sæt font-size : 0px; på den div der indeholder billedet.
Nogle browsere har problemer med whitespace, specielt når designeren
mener der ingenting skal stå, og de har det med at gøre plads til en
linie med tekst. Mit gæt er, at en tekst i div'en ville have fyldt de
16px, du taler om. Browseren gør plads til den, selvom der ingen er,
fordi der er whitespace.
Du kan evt prøve at skrive hele div'en på een linie, uden whitespace.
Det burde også fixe problemet.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote:

> Sæt font-size : 0px; på den div der indeholder billedet.
> Nogle browsere har problemer med whitespace, specielt når designeren
> mener der ingenting skal stå, og de har det med at gøre plads til en
> linie med tekst.

Den problemstilling har jeg være inde i, dog måske ikke identisk.
Men IE lavede lort for mig hvis man brugte 0px, så der brugte jeg 1px i
stedet.

Jeg kan ikke huske hvor og hvordan, men tilsyneladende opfatter IE det som
tomt, altså helt tomt.

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen skrev:
> Birger Sørensen wrote:
>
>> Sæt font-size : 0px; på den div der indeholder billedet.
>> Nogle browsere har problemer med whitespace, specielt når designeren
>> mener der ingenting skal stå, og de har det med at gøre plads til en
>> linie med tekst.
>
> Den problemstilling har jeg være inde i, dog måske ikke identisk.
> Men IE lavede lort for mig hvis man brugte 0px, så der brugte jeg 1px i
> stedet.
>
> Jeg kan ikke huske hvor og hvordan, men tilsyneladende opfatter IE det som
> tomt, altså helt tomt.

Jeg har nu ikke haft problemer med 0px.
Bruger det hvor float skal cleares. Er det ikke et element, der
egentlig hører til, sættes en div med clear : both; - og den laver i
nogle browsere en tom linie, der har tekst-højden. Derfor får den også
font-size : 0px; med.
Jeg har ikke observeret problemer med det - checker så heller ikke i
IE6. Synd for dem der ikke kan eller vil opdatere - men jeg mener ikke
kloden skal stoppe sin rotation, for deres skyld.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote:

> Jeg har ikke observeret problemer med det - checker så heller ikke i
> IE6.

Det var nu IE8, der lavede 'nummeret', men never mind.

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen har bragt dette til os:
> Birger Sørensen wrote:
>
>> Jeg har ikke observeret problemer med det - checker så heller ikke i
>> IE6.
>
> Det var nu IE8, der lavede 'nummeret', men never mind.

Jeg har ikke observeret problemet i IE8. Hvilket ikke betyder at et
ikke er der

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> Stig Johansen har bragt dette til os:
> > Birger Sørensen wrote:
> >
> >> Jeg har ikke observeret problemer med det - checker så heller ikke i
> >> IE6.
> >
> > Det var nu IE8, der lavede 'nummeret', men never mind.
>
> Jeg har ikke observeret problemet i IE8. Hvilket ikke betyder at et
> ikke er der
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>

Tusind tak - det ser ud som om font-size er forklaringen. Browseren gør
plads til at der kan stå tekst i top-div'en (selvom der intet står og jeg
gør den inline), men da den kun er 10px høj og default skriften er 16px,
ja så rykker den top-div'en 6 px ned og dermed ned oven i bottom-div (men
"heldigvis" med et større z-index).
Og jeg behøver tilsyneladende ikke engang sætte font-size helt ned til 0px
i dette tilfælde, bare det ikke er større end 10px. Men - som du skriver -
for tomme div's der bare bruges til at clear'e en float, er det relevant
med 0px font-size.

Et stort mysterium er løst. Super Jeg havde mildest taget ingen idé om
at det var font-size, der var synderen.

Mvh Steffen

PS: Jeg har heller ikke problemer med 0px i IE8.


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Birger Sørensen wrote:

> Stig Johansen har bragt dette til os:
>>
>> Det var nu IE8, der lavede 'nummeret', men never mind.
>
> Jeg har ikke observeret problemet i IE8. Hvilket ikke betyder at et
> ikke er der

Jeg har vist også blandet et par ting sammen.
Det problem med 0px var noget andet.

Her var der tale om, at jeg havde en f.eks. <td><a..>S</a></td>
Egentlig skal der ikke stå S, da der er et baggrundsbillede, der viser
funktionen, så der bruger jeg color:transparent.

Det virker dog ikke i IE, så der satte jeg font-size til 0px, og dér
forsvandt min klikbare <a>.

Jeg har ikke IE 8 mere, men jeg kan se jeg har lavet en CC på LTE IE7 af
samme årsag.

Det var i det hele taget noget bøvl med at få lavet en klikbar 'tom' celle
med baggrundsbillede, så det har jeg lykkelig glemt.

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen formulerede spørgsmålet:
> Birger Sørensen wrote:
>
>> Stig Johansen har bragt dette til os:
>>>
>>> Det var nu IE8, der lavede 'nummeret', men never mind.
>>
>> Jeg har ikke observeret problemet i IE8. Hvilket ikke betyder at et
>> ikke er der
>
> Jeg har vist også blandet et par ting sammen.
> Det problem med 0px var noget andet.
>
> Her var der tale om, at jeg havde en f.eks. <td><a..>S</a></td>
> Egentlig skal der ikke stå S, da der er et baggrundsbillede, der viser
> funktionen, så der bruger jeg color:transparent.
>
> Det virker dog ikke i IE, så der satte jeg font-size til 0px, og dér
> forsvandt min klikbare <a>.
>
> Jeg har ikke IE 8 mere, men jeg kan se jeg har lavet en CC på LTE IE7 af
> samme årsag.
>
> Det var i det hele taget noget bøvl med at få lavet en klikbar 'tom' celle
> med baggrundsbillede, så det har jeg lykkelig glemt.

Jo, RAM'en degraderer med alderen - og du er ikke alene om det...

Jeg sidder og pusler med at fremtvinge noget billed-upload, med
tilhørende beskæring (og scalering), som skal efterfølges af noget med
at udpege personer på billederne (slægtsbog/stamtavle).
Der har jeg brug for tomme klikbare områder.
Og det virker fint i FF og IE8.
Men jeg har en fornemmelse af, at i hvert fald halvdelen af familien
bruger 7'eren. Og der virker det ikke.
Til gengæld virker det i IE7, med en gennemsigtig gif som baggrund på
de tomme div'er, der skal være klikbare.
Tilsyneladende er der ingenting overhovedet i en tom div i IE7. Ikke
engang cursoren bliver vist rigtigt - kun på borderen. Men med et
gennemsigtigt baggrundsbillede, virker det.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den 22-02-2010 23:31, Stig Johansen skrev:

> Her var der tale om, at jeg havde en f.eks.<td><a..>S</a></td>
> Egentlig skal der ikke stå S, da der er et baggrundsbillede, der viser
> funktionen, så der bruger jeg color:transparent.
>
> Det virker dog ikke i IE, så der satte jeg font-size til 0px, og dér
> forsvandt min klikbare<a>.
>
> Jeg har ikke IE 8 mere, men jeg kan se jeg har lavet en CC på LTE IE7 af
> samme årsag.
>
> Det var i det hele taget noget bøvl med at få lavet en klikbar 'tom' celle
> med baggrundsbillede, så det har jeg lykkelig glemt.

Har du prøvet at give den a en display: inline-block eller block? Jeg
mener, der er et eller andet med IE6 og inline-block, som jeg har
udnyttet før. Derudover kan du have brug for at sætte line-height til
1%. En anden metode er at rykke indholdet af a allerhelvedes langt til
venstre, men stadig bevare selve "klik-feltet". Den har nogle bagdele,
som jeg ikke kan huske, dog, men jeg er næsten sikker på det kan laves
uden CC.

Har du URL til siden, skal jeg lave nogle forsøg, hvis du vil.


MVH
Rune Jensen

---

"Rune Jensen" <runeofdenmark@gmail.com> wrote in message
news:4b831212$0$4825$456a7185@news.cirque.dk...
> Den 22-02-2010 23:31, Stig Johansen skrev:
>
> >
> > Det var i det hele taget noget bøvl med at få lavet en klikbar 'tom'
celle
> > med baggrundsbillede, så det har jeg lykkelig glemt.
>
> Har du prøvet at give den a en display: inline-block eller block?
Det husker jeg ikke rigtigt.

> Jeg
> mener, der er et eller andet med IE6 og inline-block, som jeg har
> udnyttet før.

Jeg har ikke nævnt IE_6_ (SVJH), men _IE_ generelt.

> Har du URL til siden, skal jeg lave nogle forsøg, hvis du vil.

Ja, URL til eksempel:
http://w-o-p-r.dk/notes/show.base.asp?d=hjemmesideskolen%5Fphp&v=Steps

men du behøver ikke lave forsøg, for der er forskellige problemstillinger ud
over det med font-size, herunder:

* padding: FF laver 'mærkelige' ting.
* cursor: Opera fatter ikke cursor (cursor:url(..))

Mht. CC, så er det det her:
<!--[if gte IE 7]>
<style type="text/css">
th a { padding: 50% ;}
tr td+th {
font-size: 1px ;
</style>
<![endif]-->

og det gør, at IE6 ikke fatter eks. th+td, så det vises, men IE7+8 fatter
det, men fatter ikke color:transparent, så dermed font-size 1px, og ikke
0px.

--
Med venlig hilsen/Best regards
Stig Johansen

---

Stig Johansen skrev:

> Jeg har ikke IE 8 mere

Det får du snart igen. Til sommer kan du ikke
opdatere din Windows 2000 mere - så skal du
endelig have nyt styresystem - det bliver sikkert
Windows 7, og så er du helt fri for at teste i IE6,
det er vi andre holdt op med for år tilbage

http://fdim.dk/Statistik/teknik/browserbarometer
siger 5,6% for IE6, mens Windows 2000 siger
0,2%.

Muligheden for at skifte til IE8 er altså ret stor,
hvorfor så bruge så meget energi på at få noget
til at fungere i IE6?

--
Allan Vebel
http://vebel.dk | http://html-faq.dk

---

Allan Vebel wrote:

> Det får du snart igen.

Tror du ;)

> Til sommer kan du ikke
> opdatere din Windows 2000 mere - så skal du
> endelig have nyt styresystem -

Det er vist kun MS, der synes jeg _skal_, fir jeg har ikke opdateret, og har
ikke brug for opdatering af mine Win2K maskiner.

(Inkluderer ogsp Win2K advances server samt MS SQLServer 2K ).

> det bliver sikkert
> Windows 7, og så er du helt fri for at teste i IE6,
> det er vi andre holdt op med for år tilbage

Det er altså _ikke_ mig, der har nævnt om IE6 i denne tråd.

> Muligheden for at skifte til IE8 er altså ret stor,
> hvorfor så bruge så meget energi på at få noget
> til at fungere i IE6?

Det gør jeg da heller ikke.
Mine temperaturoversigter virker heller ikke i IE6 - og hvad så?

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen skrev:

> har ikke brug for opdatering af mine Win2K
> maskiner.

Jeg forstår bare ikke at nogen bruger så forældet
software.

> Det er altså _ikke_ mig, der har nævnt om IE6
> i denne tråd.

Måske ikke, men du har nævnt IE6 i mange andre
tråde.

Mange gør en masse for at slippe af med IE6, og
nu er det endelig muligt at se helt bort fra den, det
er efterhånden kun dig der bruger den, og tager
hensyn til den

Lad IE6 dø, som Netscape 4 efterhånden døde ud,
det tog en krig.

Tager det også en krig at få dig til at skifte til en
nyere styresystem?

--
Allan Vebel
http://vebel.dk | http://html-faq.dk

---

Allan Vebel wrote:

> Jeg forstår bare ikke at nogen bruger så forældet
> software.

Hvad mener du med 'forældet'?
Software bliver ikke 'slidt' eller 'mugner' som fysiske ting, så mine
systemer er lige så friske som da jeg installerede dem.

> Måske ikke, men du har nævnt IE6 i mange andre
> tråde.

Jeg kunne nøjes med at skrive IE, men for en god ordens skyld nævner jeg
versionen.

> Mange gør en masse for at slippe af med IE6, og
> nu er det endelig muligt at se helt bort fra den, det
> er efterhånden kun dig der bruger den, og tager
> hensyn til den

Jeg tager ikke hensyn til IE6 speifikt, men IE generelt.
De særheder der eksisterer, specielt i javascript/DOM gælder skam også nyere
IE'er.
Så det handler om at tage hensyn til IE generelt, og ikke specifikt IE6.
Det er stadig det samme med eventhandling, XMLHTTPrequest m.m.

> Tager det også en krig at få dig til at skifte til en
> nyere styresystem?

Ja, og ikke mindst eventuelle 'opgraderinger' af andre systemer, hvor jeg
gætter på jeg har for ca. 50.000 betalte programmer.

Du ser det muligvis som et 'nyere' styresystem, hvor jeg ser det som en
degenerering.

Win2K er nok det bedste og mest stabile styresystem MS har kavet indtil
videre.

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen skrev:

> Hvad mener du med 'forældet'?

At Microsoft holder op med at opdatere produktet
til sommer - og at det ikke er muligt at installere
andet end IE6 som den nyeste MS-browser.

> Så det handler om at tage hensyn til IE generelt,
> og ikke specifikt IE6. Det er stadig det samme
> med eventhandling, XMLHTTPrequest m.m.

Det var nu mest css jeg tænkte på - her har IE6 en
del ulemper i forhold til IE7 og IE8.

> Win2K er nok det bedste og mest stabile styresystem
> MS har kavet indtil videre.

Det er vi enige om - jeg har også brugt 2K gennem en
lang årrække, men med en virksomhed i web-branchen,
kan jeg ikke leve med ældre systemer, jeg er nødt til at
se det samme som kunderne.

--
Allan Vebel
http://vebel.dk | http://html-faq.dk

---

Allan Vebel wrote:

> Stig Johansen skrev:
>
>> Hvad mener du med 'forældet'?
>
> At Microsoft holder op med at opdatere produktet
> til sommer - og at det ikke er muligt at installere
> andet end IE6 som den nyeste MS-browser.

Nu har jeg sådan set ikke brug for, eller har brugt MS browser siden ca.
2002, så det rager mig en høstblomst.

Jeg har heldigvis nyeste Firefox og Opera i de tilfælde hvor min Konqueror
ikke slår til.

> Det var nu mest css jeg tænkte på - her har IE6 en
> del ulemper i forhold til IE7 og IE8.

Jeg er ikke den store CSS haj, og mener ikke jeg udtaler mig ret meget om
det emne.

Men jeg har bemærket med den smule jeg har rodet med, at det har meget stor
betydning om man kører xhtml strict.

Jeg tror ikke jeg har noget CSS, der er IE6 specifikt, men jeg går ikke så
meget op i om det ser ens ud, da brugere som regel ikke har to browsere( og
sammenligner).

Min interesse er dog på serverside området,

> Det er vi enige om - jeg har også brugt 2K gennem en
> lang årrække, men med en virksomhed i web-branchen,
> kan jeg ikke leve med ældre systemer, jeg er nødt til at
> se det samme som kunderne.

Hvis 'kunderne' bruger en standardoverholdende browser, så er det vel
ligegyldigt hvilket OS der ligger bag?

('kunderne'=brugerne, og ikke den betalende 'kunde').

--
Med venlig hilsen
Stig Johansen

---

Stig Johansen skrev:

> Hvis 'kunderne' bruger en standardoverholdende
> browser, så er det vel ligegyldigt hvilket OS der
> ligger bag?

Nej, ikke helt. Jeg har ofte set forskel på IE6 i 2K
og IE6 i XP, her kan man ikke regne med noget
som helst.

> jeg går ikke så meget op i om det ser ens ud, da
> brugere som regel ikke har to browsere( og
> sammenligner).

Det er den slags jeg går op i

--
Allan Vebel
http://vebel.dk | http://html-faq.dk

---

Den 21-02-2010, skrev Steffen Grøndahl:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>> Steffen Grøndahl skrev:
>>
>>>> PS: Siden validerer som xhtml strict, så det er vist ikke der, at
>>>> fejlen ligger. Måske den indlejrede css? Og det er tildyneladende
>>>> underordnet om billedet ligger pakket ind i en div eller ej.
>>>>
>>>> PPS: Som jeg skriver undrer jeg mig også over hvorfor min p skal
>>>> have en top-margin på 0 for at undgå et gab mellem de to indre
>>>> div's. Jeg synes ikke at det er logisk.
>>
>> Du ved ikke på forhånd noget om
>> elementers borders, margin og padding.
>> En forsikring mod dette er følgende
>> formdeklaration:
>> *{margin:0;padding:0;border:0;}
>> Men det hjælper lissom ikke noget når
>> du i den grad blander et indlejret
>> stylesheets formregler med inline-styles
>> (brug af style-attributten).
>>
>> Først nå du har nulstillet alt er
>> det tid at bekymre sig om overlapning
>> hvis det overhovedet findes.
>> --
>> Med venlig hilsen
>> Jørgen Farum Jensen
>> http://webdesign101.dk
>> ..
>
> Den tror jeg ikke på. Jeg har nu fjernet inlines-styles og problemet er
> der stadig, se
> http://steffengrondahl.dk/rodekasse/divproblem3.html
>
> Til gengæld har jeg opdaget, at problemet forsvinder, hvis jeg vælger et
> billede med højden 16px (smider lidt mere hvidt i bunden af billedet).
> Så med mindre, at nogen har en anden genial løsning bliver det min - jeg
> sidder så bare og undrer mig over hvorfor diverse browsere har problemer
> med billeder på under 16px, men det får måske en klokke til at ringe hos
> nogen?
> Anyay - tak for hjælpen


Det kan godt være du ikke tror på det.
Virkeligheden er, at ingen browsere har samme default padding og
margin. Derfor er det smart, hvis man selv vil bestemme, at fjerne alle
default værdier, som Jørgen foreslår dig.
Man kan nøjes med at korrigere de elementer man bruger - men i det
lange løb, er det nemmere at fjerne alle forudindstillinger. Så ved man
i det mindste, hvad der er.
Hvis browserne kunne blive enige om at lave default værdier ens, var
det (måske) en anden sag. Men det er ret hypotetisk - for de kan
tilsyneladende ikke blive enige, eller også mener de at de *skal* sætte
deres eget præg på de sider de viser, og det er designere så nødt til
at fjerne, for at få tingene til at se ud som de er tænkt.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> Den 21-02-2010, skrev Steffen Grøndahl:
> > Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> >> Steffen Grøndahl skrev:
> >>
> >>>> PS: Siden validerer som xhtml strict, så det er vist ikke der, at
> >>>> fejlen ligger. Måske den indlejrede css? Og det er tildyneladende
> >>>> underordnet om billedet ligger pakket ind i en div eller ej.
> >>>>
> >>>> PPS: Som jeg skriver undrer jeg mig også over hvorfor min p skal
> >>>> have en top-margin på 0 for at undgå et gab mellem de to indre
> >>>> div's. Jeg synes ikke at det er logisk.
> >>
> >> Du ved ikke på forhånd noget om
> >> elementers borders, margin og padding.
> >> En forsikring mod dette er følgende
> >> formdeklaration:
> >> *{margin:0;padding:0;border:0;}
> >> Men det hjælper lissom ikke noget når
> >> du i den grad blander et indlejret
> >> stylesheets formregler med inline-styles
> >> (brug af style-attributten).
> >>
> >> Først nå du har nulstillet alt er
> >> det tid at bekymre sig om overlapning
> >> hvis det overhovedet findes.
> >> --
> >> Med venlig hilsen
> >> Jørgen Farum Jensen
> >> http://webdesign101.dk
> >> ..
> >
> > Den tror jeg ikke på. Jeg har nu fjernet inlines-styles og problemet er
> > der stadig, se
> > http://steffengrondahl.dk/rodekasse/divproblem3.html
> >
> > Til gengæld har jeg opdaget, at problemet forsvinder, hvis jeg vælger
et
> > billede med højden 16px (smider lidt mere hvidt i bunden af billedet).
> > Så med mindre, at nogen har en anden genial løsning bliver det min -
jeg
> > sidder så bare og undrer mig over hvorfor diverse browsere har
problemer
> > med billeder på under 16px, men det får måske en klokke til at ringe
hos
> > nogen?
> > Anyay - tak for hjælpen
>
>
> Det kan godt være du ikke tror på det.
> Virkeligheden er, at ingen browsere har samme default padding og
> margin. Derfor er det smart, hvis man selv vil bestemme, at fjerne alle
> default værdier, som Jørgen foreslår dig.
> Man kan nøjes med at korrigere de elementer man bruger - men i det
> lange løb, er det nemmere at fjerne alle forudindstillinger. Så ved man
> i det mindste, hvad der er.
> Hvis browserne kunne blive enige om at lave default værdier ens, var
> det (måske) en anden sag. Men det er ret hypotetisk - for de kan
> tilsyneladende ikke blive enige, eller også mener de at de *skal* sætte
> deres eget præg på de sider de viser, og det er designere så nødt til
> at fjerne, for at få tingene til at se ud som de er tænkt.
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>

Hej og atter tak, men jeg tror stadig ikke på, at det er
padding/margin/border der er årsag til problemet.
For det første ser jeg problemet i alle de browsere jeg har testet med
(undtagen en gammel Konqueror på en Tux). Og det ser meget ens ud.
For det andet ændrer det - så vidt jeg kan se - intet, at jeg nulstiller
padding og margin.
For det tredje synes jeg at forklaringen trækker i den modsatte retning -
selv med en ikke-nulstillet padding, border eller margin ville jeg ikke
forventet et overlap (med mindre selvfølgelig at vi taler om negative
defaultværdier), men derimod et gab mellem de to div's.

Når alt det er sagt, så vil jeg dog gerne vedgå at jeg er lidt
ustruktureret mht at få nulstillet padding og margin og misbruge en
blanding af inline-stylesheet og indlejret stylesheet (men er det virkelig
så problematisk - vil inline ikke altid overskrive det indlejrede og det
som måtte stå i importeret (link) css-fil?)

mvh
Steffen


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Steffen Grøndahl skrev:

> Når alt det er sagt, så vil jeg dog gerne vedgå at jeg er lidt
> ustruktureret mht at få nulstillet padding og margin og misbruge en
> blanding af inline-stylesheet og indlejret stylesheet (men er det virkelig
> så problematisk - vil inline ikke altid overskrive det indlejrede og det
> som måtte stå i importeret (link) css-fil?)

Jo, men det vanskeliggør jo læsningen
af koden - du skal søge to steder efter
to forskellige formregler der kan øve
indflydelse på et element.

På længere sigt vil inline styles jo også
vanskeliggøre genbrug af styles. Ideen med
stylesheets er jo blandt andet at samme
eksterne stylesheet kan anvendes på mange
sider.
--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

---

Oversagen skal findes top marginen af det første p-tag, da margin er
afstanden i forhold til de omkring liggende elementer, hvilket ikke
inkludere kanten for elements "forældre element" (i dette tilfælde
<div class=bottom">).

der er flere løsningen til problemet, en af de simple er at undgå at
bruge top margin på det første element i div.bottom.

Selv ville jeg vælge følgende løsning:

div#centerdiv{
margin: 0 auto;
position: relative;
width: 800px;
}

div.top {
height: 10px;
overflow: hidden;
position: absolute;
}

div.bottom {
background-color: red;
top: 10px; /* for at udligne højden af div.top */
position: relative;
}