---

Jeg har et problem med at der kommer luft under billederne (4-5 px), se
denne testside:

http://valentin-consult.dk/test/billedtest.html

Fejlen optræder i Opera 9.24, Firefox 2.0.0.9, Safari 3.04, men ikke i IE
6.0. Jeg har ikke prøvet i IE 7.0.


Her har jeg så prøvet at lege med fontstørrelse/lineheight og denne *ene*
kombination fjerner luften, men er naturligvis ingen holdbar løsning:

http://valentin-consult.dk/test/billedtest2.html

Har i noget bud på hvad problemet kan være, og en løsning?

Mvh. Stig

---

"Stig Holmberg" <noone@nowhwere.com> skrev :

>Jeg har et problem med at der kommer luft under billederne (4-5 px), se
>denne testside:

Prøv med:


img {
   margin: 0px; vertical-align: bottom
}

--
Kerim
»Søger nogen en anden religion end Islam, skal den ikke modtages
af Ham, og han skal i det kommende liv være blandt taberne.«
(Sura 3, vers 87)

---

"Kerim Ellentoft" <kerim@mail.tele.invalid> skrev i en meddelelse
news:i97jk3te9qt26pblromu9u5tog7sr5p2c5@dtext.news.tele.dk...
> "Stig Holmberg" <noone@nowhwere.com> skrev :
>
>>Jeg har et problem med at der kommer luft under billederne (4-5 px), se
>>denne testside:
>
> Prøv med:
>
>
> img {
> margin: 0px; vertical-align: bottom
> }
>
> --
> Kerim

Tak for dit råd!, det hjalp som det kan ses her:

http://valentin-consult.dk/test/billedtest3.html

Måske du også har en idé til hvad jeg skal gøre ved at der ikke er luft
mellem paragrafferne grundet:

p {
margin: 0px;
}

Hvis jeg fjerner margin: 0px; får jeg jo luft over og under billederne.

Man kan jo lave ekstra returns for at få luften (<p>&nbsp;</p>) men måske
der findes en bedre måde?

Mvh. Stig

---

> Måske du også har en idé til hvad jeg skal gøre ved at der ikke er luft
> mellem paragrafferne grundet:
>
> p {
> margin: 0px;
> }

Jeg går ud fra dette:
1) Du vil normalt ikke have luft over- og under <p>
2) Du vil gerne have det under billeder.

I så fald:

<img src="noget.jpg" ...>
<div class="billedtekst">
<p>Din tekst.</p>
<p>Mere tekst</p>
</div>

CSS:
div.billedtekst {
padding: 5px;
}

eller evt.
div.billedtekst {
padding: 8px 4px 8px 4px;
}

Sidstnævnte giver luft på 8px i top og bund og 4px i siderne.
Rækkefølgen er top-right-bottom-left - altså samme vej som uret.

Forskellen på padding og margin er, om luften er i- eller udenfor elementet
(i dette tilfælde div.billedtekst).

---

"Philip Nunnegaard" <philip@fjerndettehitsurf.dk> skrev i en meddelelse
news:4749aa95$0$2109$edfadb0f@dtext02.news.tele.dk...
>> Måske du også har en idé til hvad jeg skal gøre ved at der ikke er luft
>> mellem paragrafferne grundet:
>>
>> p {
>> margin: 0px;
>> }
>
> Jeg går ud fra dette:
> 1) Du vil normalt ikke have luft over- og under <p>
> 2) Du vil gerne have det under billeder.

Nej lige omvendt faktisk

Jeg vil gerne styre *hvormeget* luft der er under billederne, og det har
Kerims svar vist hvordan jeg gør, det er noget med hvordan billederne
positionerer sig i forhold til liniehøjden når de er indeholdt i en
paragraf, hvilket jo er nødvendigt for ikke at få validerings-fejl.

Samtidig vil jeg gerne have det sådan at der er luft over og under
paragrafferne, som f.eks.:

<p>noget tekst</p>
luft her...
<p>noget tekst</p>

Men her skal den nye linie starte uden mellemliggende luft:

<p>noget tekst<br />
ikke luft her...
<p>noget tekst</p>

Når jeg har sat <p> til at have 0 i margin er det fordi at billederne jo er
omsluttet af en paragraf og der ønsker jeg ikke så meget luft.

Alle de andre paragrammer må gerne opføre sig "normalt".

Håber jeg fik forklaret det godt nok.


> I så fald:
>
> <img src="noget.jpg" ...>
> <div class="billedtekst">
> <p>Din tekst.</p>
> <p>Mere tekst</p>
> </div>
>
> CSS:
> div.billedtekst {
> padding: 5px;
> }
>
> eller evt.
> div.billedtekst {
> padding: 8px 4px 8px 4px;
> }
>
> Sidstnævnte giver luft på 8px i top og bund og 4px i siderne.
> Rækkefølgen er top-right-bottom-left - altså samme vej som uret.
>
> Forskellen på padding og margin er, om luften er i- eller udenfor
> elementet (i dette tilfælde div.billedtekst).

Men tak for din respons.

Mvh. Stig

---

>> Jeg går ud fra dette:
>> 1) Du vil normalt ikke have luft over- og under <p>
>> 2) Du vil gerne have det under billeder.
>
> Nej lige omvendt faktisk
>
> Jeg vil gerne styre *hvormeget* luft der er under billederne, og det har
> Kerims svar vist hvordan jeg gør, det er noget med hvordan billederne
> positionerer sig i forhold til liniehøjden når de er indeholdt i en
> paragraf, hvilket jo er nødvendigt for ikke at få validerings-fejl.

Så prøv dette i stedet:

div.billedtekst {
padding: 5px;
}

div.billedtekst p {
margin-bottom: 5px;
}

Dette gør, at der kommer 5px luft under paragrafferne (ikke over - og dermed
ikke over den første)
- men kun ved de paragraffer, der er i div'en med klasse "billedtekst".

Du kan dermed styre de normale paragraffer og dem i div'en hver for sig.

Alternativ måde:

p {
normal formdeklaration
}

p.foerste {
margin:0;
}

<p class="foerste">Første afsnit...</p>
<p>Næste afsnit her</p>

---

"Philip Nunnegaard" <philip@fjerndettehitsurf.dk> skrev i en meddelelse
news:4749f4cb$0$2086$edfadb0f@dtext02.news.tele.dk...
>>> Jeg går ud fra dette:
>>> 1) Du vil normalt ikke have luft over- og under <p>
>>> 2) Du vil gerne have det under billeder.
>>
>> Nej lige omvendt faktisk
>>
>> Jeg vil gerne styre *hvormeget* luft der er under billederne, og det har
>> Kerims svar vist hvordan jeg gør, det er noget med hvordan billederne
>> positionerer sig i forhold til liniehøjden når de er indeholdt i en
>> paragraf, hvilket jo er nødvendigt for ikke at få validerings-fejl.
>
> Så prøv dette i stedet:
>
> div.billedtekst {
> padding: 5px;
> }
>
> div.billedtekst p {
> margin-bottom: 5px;
> }
>
> Dette gør, at der kommer 5px luft under paragrafferne (ikke over - og
> dermed ikke over den første)
> - men kun ved de paragraffer, der er i div'en med klasse "billedtekst".
>
> Du kan dermed styre de normale paragraffer og dem i div'en hver for sig.
>
> Alternativ måde:
>
> p {
> normal formdeklaration
> }
>
> p.foerste {
> margin:0;
> }
>
> <p class="foerste">Første afsnit...</p>
> <p>Næste afsnit her</p>

Jeg er med på hvad du mener, men det er ikke teksten inde i div' erne der er
problemet, det er den tekst der (i dette tilfælde) ligger direkte på
body'en, og det gør jo både de paragraffer der omslutter billederne og alle
de øvrige paragraffer - de er på samme niveau. Det er nok mig der har
udtrykt mig lidt tåget, men her i eksempel 4 har jeg brugt dit råd med at
lave en klasse til formålet:

http://valentin-consult.dk/test/billedtest4.html

Og klassen fjerner margin på de paragraffer der omslutter billederne, mens
resten er med normal margin så der kommer den ønskede luft mellem afsnittene
(de nederste 3 på siden).

Tak for hjælpen!

Mvh. Stig

---

Philip Nunnegaard wrote:
> padding: 8px 4px 8px 4px;

Bonus info!
Som også kan skrives
padding: 8px 4px;

Betyder 8px top og bund, 4 px venstre og højre

---

>> padding: 8px 4px 8px 4px;
>
> Bonus info!
> Som også kan skrives
> padding: 8px 4px;
>
> Betyder 8px top og bund, 4 px venstre og højre

Tak for tippet.
Det var jeg ikke klar over.

---

On Mon, 26 Nov 2007 21:40:02 +0100, "Philip Nunnegaard"
<philip@fjerndettehitsurf.dk> wrote:

>>> padding: 8px 4px 8px 4px;
>>
>> Bonus info!
>> Som også kan skrives
>> padding: 8px 4px;
>>
>> Betyder 8px top og bund, 4 px venstre og højre
>
>Tak for tippet.
>Det var jeg ikke klar over.

For at fuldende, så er reglen, at manglende angivelser overtages fra
modstående side - én angivelse overtages af alle sider.

padding: 8px 4px 6px;
Svarer til:
padding: 8px 4px 6px 4px;

padding: 8px;
Svarer til:
padding: 8px 8px 8px 8px;

Og det gælder også for margin og border.


Mvh. Jørn

--
Jørn Andersen,
Brønshøj