Firefox en Opera willen niet van margin af onder afbeelding

[Glashelder]

Dit is waarschijnlijk weer zo'n heel simpel probleempje waar ik even niet uitkom (ik heb zo momenten dat ik weer veel sites maak, en dan weer een tijd niet, en dan vergeet je wat basis dingen ).

Het gaat om het volgende:

Internet Explorer:


Firefox:


Opera 8.53:


HTML code: http://www.dieben-online.net/
CSS: http://www.dieben-online.net/

Ik ben er inmiddels achter dat als ik geen HTML strict gebruik, dat het dan wel goed gaat. Maar ik wil wel strict gebruiken vanwege het boxmodel (IE). Eerst was de code zo:

code:

<div class="top">
[img]"http://pics.dieben-online.net/site/top.JPG"[/img]
</div>

Daar heb ik toen de enters uitgehaald. Daarna deed IE het goed, maar waarom is me een raadsel (enters zouden toch niet gerenderd mogen worden ?).

Bij wie blijft het licht branden, bij mij is het even uit gegaan

[Verwijderd]

vertical-align: bottom

overigens lijkt me dit meer iets voor een achtergrondplaatje

[ Voor 60% gewijzigd door Verwijderd op 24-04-2006 20:16 ]

[.daan]

Probeer eens in de image tag vspace="0". Dit heeft mij eens van een soortgelijk probleem afgeholpen.

edit:
Howel, dat was met meerdere plaatjes onder elkaar. Maar je kunt het altijd proberen...

[ Voor 42% gewijzigd door .daan op 24-04-2006 20:18 ]

[Glashelder]

En hoe had je dat ongeveer in gedachten? Als ik het in de CSS stop zodat het geld voor de div waarin de afbeelding staat, dan werkt het niet.
Toch bedankt voor het meedenken

edit: image als background werkt..maar ben toch wel benieuwd wat het nou was..
Ik snap het niet, maar als ik nu een vaste hoogte instel dan werkt het ook goed..dat werkte net niet

Mja opgelost, bedankt

[ Voor 40% gewijzigd door Glashelder op 24-04-2006 20:22 ]

[RuudBurger]

de parent object van de image moet je
line-height:0;
meegeven..

<div class="top"> dus

[ Voor 16% gewijzigd door RuudBurger op 24-04-2006 20:22 ]

[MachoM]

Tja, maak er ook eens valide XHTML van:

code:

<div class="top">
[img]"http://pics.dieben-online.net/site/top.JPG"[/img]
</div>

Let op de "/".

[ Voor 28% gewijzigd door MachoM op 24-04-2006 20:24 ]

[Verwijderd]

mensen, testen jullie zelf wel voor jullie blaten?
of lezen? het gaat hier om gewoon html 4.01 strict.

oplossing is dus gewoon die vertical-align, op de img uiteraard.

[Cubix]

Controleer ook of je img als block wordt getoond, en niet als in-line.

Als blockelement gedraagt het zich zoals elk ander blockelement.

Ik zie nu dat je het plaatje nu als achtergrond hebt genomen...

[ Voor 20% gewijzigd door Cubix op 24-04-2006 20:30 ]

[RuudBurger]

Verwijderd schreef op maandag 24 april 2006 @ 20:27:
mensen, testen jullie zelf wel voor jullie blaten?
of lezen? het gaat hier om gewoon html 4.01 strict.

oplossing is dus gewoon die vertical-align, op de img uiteraard.

weet niet wat je nou loop te zeiken, maar line-height:0; op de class top lost het probleem op.
Je kan iid ook vertical-align op de img doen. maar dan moet je een extra tag in je css aanmaken. 3 keer zoveel data voor het zelfde resultaat als je het mij vraagt.
Wie liep er ook alweer te blaten?

[Verwijderd]

Cubix schreef op maandag 24 april 2006 @ 20:30:
Als blockelement gedraagt het zich zoals elk ander blockelement.

offtopic:

[Verwijderd]

Sillymidget schreef op maandag 24 april 2006 @ 20:36:
[...]


weet niet wat je nou loop te zeiken, maar line-height:0; op de class top lost het probleem op.
Je kan iid ook vertical-align op de img doen. maar dan moet je een extra tag in je css aanmaken. 3 keer zoveel data voor het zelfde resultaat als je het mij vraagt.
Wie liep er ook alweer te blaten?

Ok, je hebt gelijk, ik was wellicht wat kort door de bocht, want je hebt gewoon ook gelijk dat dat een oplossing is (geldt ook voor het block verhaal). Ik wordt wat simpel van de vele non-oplossingen hier op GoT de laatste tijd (niet jouw post dus)

[ Voor 3% gewijzigd door Verwijderd op 24-04-2006 21:15 ]

[crisp]

Cascading Stylesheet:

div.top img { vertical-align:bottom; }

hoezo 3x zoveel data?

Dat is imho ook gewoon de beste oplossing aangezien je daarmee de oorzaak van het probleem (default uitlijning van replaced elements op de baseline) aanpakt.
Oplossingen met line-height of display:block zijn enkel symptoom-bestrijding.

MachoM schreef op maandag 24 april 2006 @ 20:23:
Tja, maak er ook eens valide XHTML van:
[...]

Kijk eens goed naar de highlighting en bedenk daarbij dat XHTML als text/html voor de browser gewoon HTML is; gelukkig bieden browsers geen support voor SGML's SHORTTAG features, hoewel die wel onderdeel vormen van de HTML specificatie:

HTML:

<div class="top">
<img src="http://pics.dieben-online.net/site/top.JPG" alt="logo" />
</div>

Let op de "/" - die sluit de tag af waardoor ">" in feite gewoon content is

[MachoM]

Sorry dat dit niet duidelijk was, maar de "/" was niet echt een oplossing voor het probleem, meer een algemene opmerking over de code.

@mophor: De topicstarter meldt trouwens niet of het over HTML 4.01 gaat.

@crisp: Dat de browser zo naïef is, wil niet zeggen dat de coder zo naïef moet zijn.

[Verwijderd]

MachoM schreef op maandag 24 april 2006 @ 23:43:
@mophor: De topicstarter meldt trouwens niet of het over HTML 4.01 gaat.

Staat gewoon in de broncode hoor.. de Doctype.

[MachoM]

Daar heb je een punt.

[crisp]

MachoM schreef op maandag 24 april 2006 @ 23:43:
@crisp: Dat de browser zo naïef is, wil niet zeggen dat de coder zo naïef moet zijn.

XHTML aanraden zonder precies te weten wat daarvan de gevolgen en consequenties zijn is pas naïef. Strict genomen is het resultaat van XHTML-syntax in een HTML omgeving niet hetzelfde als in een echte XML omgeving. In het ergste geval is het zelfs invalid HTML, denk aan:

HTML:

<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

[Verwijderd]

en waar het echt vaak de boot in gaat is in dit geval:

HTML:

<script type="text/javascript" src="js.js" />

Het script element wordt op deze manier niet afgesloten, wat dus in IE resulteert in een compleet blanco pagina. Komt dus doordat je xhtml code wordt gelezen als html.