unerklärlicher abstand bei eigener DTD

Hallo Wissende, mich plagt da ein für mich unerklärliches Problem.

Ich habe ein ganz normales div, in dem ich ein ganz normales img einbinde.

Das Div hat einen Border von 1px dotted #000000, das img ist 126px groß und das div ist „plötzlich“ 131px groß, mit einem abstand noch oben hin zum fuß des bildes.

Ich hab schon viel hin und her probiert ich komme aber zu keiner lösung hab mit css schon alle paddings und margins auf 0 gesetzt.

Das Problem tritt aber nur auf wenn ich (m)eine eigene DTD benutze, ich verstehe den Zusammenhang überhaupt nicht!

Ich bin für jeden tipp sehr dankbar!

HTML:

<?xml version="1.0" ?>sarz.de TEST

DTD:
CSS:

html, body, img
{
padding:0px;
margin:0px;
border:0px;
}

#head, #top, #links, #mitte, #rechts, #foot
{
border:1px dotted #000000;
}

#links, #mitte, #rechts
{
float:left;
}

#head
{
padding:0px;
}

.clear
{
clear:both;
}

Hi,

wenn ich dein Beispiel in Firefox 3 anschaue, hat das img-Element die CSS-Eigenschaft „display: inline“ (nachprüfbar mit dem DOM Inspector). Dadurch entsteht dieser weiße Rand, in dem die Unterlängen der Buchstaben Platz finden (könnten). (Schreib einfach mal ein paar "g"s direkt neben dein Bild, dann siehst du, was ich meine.)

Wenn du dein Header-Bild als Block darstellen lässt, verschwindet der Rand:

#head img {
 display: block;
}

Gruß,

Andreas

danke! OWT
s.o.