[css] probleem whitespace opgelost

[Gersomvg]

Beste mensen,

Ik geef vaak de voorkeur aan het bouwen van tabellen of div's met ronde randen. Dat doe ik op de volgende manier:



Ik zet dus een plaatje boven de tabel of div. Het enigste probleem is dat er tussen het plaatje en de tabel/div een whitespace van 3px komt. Je kan dit wel oplossen met de volgende code:

Cascading Stylesheet:

.plaatje{
margin-bottom:-3px;
}

Helaas zit het plaatje in firefox dan 3px over de tabel.
Ik heb na veel proberen deze code gevonden waarbij hij het wel doet:

Cascading Stylesheet:

.plaatje{
margin-bottom:-3px;
padding-bottom:3px;
}

.tabelofdiv{
margin-top:-3px;
padding-top:3px;
}

Op die manier kan je de bug in IE dus vermijden. (Ik praat hier over IE 6).
Misschien was dit niet helemaal een topic waard maar ik weet dat veel mensen tegen dit probleem aanlopen dus ik wilde het even kwijt.
Misschien kunnen jullie hier anders ook even wat oplossingen voor layoutproblemen posten...
(als de moderator dit goed vindt)

[MichielioZ]

gersompie schreef op donderdag 07 december 2006 @ 15:32:
Het enigste probleem is dat er tussen het plaatje en de tabel/div een whitespace van 3px komt. Je kan dit wel oplossen met de volgende code:

Cascading Stylesheet:

.plaatje { margin-bottom:-3px; }

Helaas zit het plaatje in firefox dan 3px over de tabel.

Ok, maar waarom dan 2x padding en margin aanpassen als je ook de "underscore hack" kan gebruiken ?
Dus simpelweg :

Cascading Stylesheet:

.plaatje { _margin-bottom: -3px; }

[crisp]

Cascading Stylesheet:

.plaatje {
  vertical-align: bottom;
}

en eventueel line-height op een kleinere waarde zetten voor de cell.
Jouw oplossing is symptoom-bestrijding terwijl het probleem 'm ligt in het feit dat images default op de baseline worden uitgelijnt. Maar sowieso zou je hiervoor een background-image moeten gebruiken en geen <img>-element

[Verwijderd]

1. Heb je misschien een stuk voorbeeldcode voor ons? Dan kunnen we zien hoe die whitespace ontstaat.

2. Is het misschien een betere oplossing om dat plaatje met ronde hoekjes als background in de div te zetten?

3. Misschien dat dit het probleem van de whitespace is? Die enter geeft soms problemen bij plaatjes.

HTML:

<img src="plaatje.jpg" />
<div>..</div>

Oplossing:

HTML:

<img src="plaatje.jpg" /><div>..</div>

[Gersomvg]

Bij een background bestand is het heel lastig om de tabel+plaatje border te geven omdat de background binnen de border van de tabel zit. Misschien kan het wel op die manier maar ik denk dat je dan moeilijker moet doen als op deze manier

[Gersomvg]

Aan die enter ligt het niet

edit:
Bij plaatjes kleiner als 300px breed kan je het idd oplossen door een <br /> maar bij grotere lukt het met niet.

[ Voor 68% gewijzigd door Gersomvg op 07-12-2006 15:52 ]

[XWB]

MichielioZ schreef op donderdag 07 december 2006 @ 15:39:
[...]


Ok, maar waarom dan 2x padding en margin aanpassen als je ook de "underscore hack" kan gebruiken ?
Dus simpelweg :

Cascading Stylesheet:

.plaatje { _margin-bottom: -3px; }

De underscore hack werkt alleen in quirksmode als ik me niet vergis, je kan beter de * html hack gebruiken (of een apparte stylesheet voor IE).

Cascading Stylesheet:

* html .plaatje { margin-bottom: -3px; }

en eventueel line-height op een kleinere waarde zetten voor de cell.

Klopt, ik had eens een soortgelijk probleem opgelost door line-height op 0 te zetten. Ik geloof dat font-size: 0 ook werkt.

[ Voor 16% gewijzigd door XWB op 07-12-2006 16:42 ]

[Gersomvg]

Hoe doen maken jullie dan een tabel met ronde randen én border terwijl het plaatje in de achtergrond zit?? Lijkt me wel interessant.

[Victor]

Als ik me niet vergis is display: block is ook een oplossing.

En als dat lastig is, vertical-align: middle.

[moozzuzz]

gersompie schreef op donderdag 07 december 2006 @ 15:43:
Bij een background bestand is het heel lastig om de tabel+plaatje border te geven omdat de background binnen de border van de tabel zit.

Ik dacht dat je kan werken met "negatieve" posities om te positioneren in samenwerking met een margin-top (voor je border prob) --> de achtergrond wordt niet getoond buiten de box (duh!)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
<html><head><title>test</title><body>

<div id="container">
<div id="container_inner">t<br>e<br>s<br>t<br><br>m<br>e<br><br>tested
</div>
</div>

</body></html>

JavaScript:

#container {
width: 582;
background-image: url('http://www.gersom.nl/got/div.png');
background-repeat: no-repeat;
background-position: 50% 0;
margin: 0;
padding: 0;
}
#container_inner {
margin-top: 63;
border: 1 solid red;
}

Teleurgesteld omdat het niet werkte met één tag en wat css, leek me dit ook een goede oplossing? Evt. kan de buitenste container vervangen worden door een body{} (die moet toch altijd gestyled worden!), maar bij werd de 50% en de margin:0,auto verkeerd berekend.

JavaScript:

body {
width: 582px;
text-align: center;
background-image: url('./test.png');
background-repeat: no-repeat;
background-position: 50% 0;
margin: 0 auto;
}
#container_inner {
text-align: justify;
margin-top: 63px;
background: #abcdef;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
<html><head><title>test</title><body>

<div id="container_inner">t<br>e<br>s<br>t<br><br>m<br>e<br><br>tested
</div>

</body></html>

[moozzuzz]

gersompie schreef op donderdag 07 december 2006 @ 17:25:
Hoe doen maken jullie dan een tabel met ronde randen én border terwijl het plaatje in de achtergrond zit?? Lijkt me wel interessant.

Header-cel die alle collumns overspant?

[Gersomvg]

Werkt dat ook bij een div??? Als je trouwens die ronde hoeken als achtergrond doet werkt het niet als je ze ook van onder wil (Alle hoeken rond). Dan moet je de achtergrond afhankelijk van de hoogte van de tabel/div gaan uitrekken en dan kloppen de verhoudingen niet meer.

[moozzuzz]

Ik zou die achtergrond dan in de container_inner steken met een beetje extra padding-bottom (en onderaan positioneren). Neen?

[crisp]

CSS3 beschrijft iig een methode voor meerdere background-images op 1 element. Ik meen dat Safari daar al een tijdje ondersteuning voor biedt. Opera en Firefox zullen dus ook wel volgen in de nabije toekomst, en IE over een jaartje of 20

[Verwijderd]

What about:

Image binnen de div vertical-align: top;
text zet je weet tussen een div die je een margin-top geeft van de hoogte van je image.

Dus:

DIV#1
IMAGE

DIV #2

TEXT

/DIV
/DIV

Ik denk dat dit wel goed zou moeten werken, en is best simpel.

[Gersomvg]

Aangezien je niet meerdere plaatjes in de background kan zetten (nog niet) hou ik het maar bij m'n oude vertrouwde image boven de div.

[1st_Ro]

Ik doe eigenlijk altijd hetzelfde als ZktaS, maar ik gooi er meestal nog een DIV omheen voor positionering (float,margin etc.)

Voor mij werkt het tot nu toe het beste en gemakkelijkst. Geen gedoe met 3px shifts etc.

Just my 2cts

[Gersomvg]

Oke, maar ik houd het graag makkelijk
Kbedoel dat mijn code wel korter is...