dp25: Lücke durch span-Element

Beitrag lesen

SELF-Forum

Lücke durch span-Element

dp25
– Informationen zu den Bewertungsregeln

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE">
<html>
<head>
<style type="text/css">
div, span, p, td     { font-family:Tahoma,Arial,sans-serif;
                       font-style:normal;
                       font-size:13px;
                     }

body                 { margin:0px;
                     }

div.div1             { width:100%;
                       background-color:#FF0000;
                       text-align:center;
                       height:63px;
                       overflow:hidden;
                     }

img.img1             { height:63px;
                       width:32px;
                     }

span.text1           { line-height:63px;
                       margin-top:10px;
                       vertical-align:top;
                     }
</style>
</head>

<body>

<div class="div1">
  <img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" class="img1">
  <span class="text1">abc</span>
</div>

</body>
</html>

Also:
Problem 1: Das "abc" soll 10 Pixel unter dem oberen Rand angezeigt werden, allerdings funktioniert dies nur im Mozilla. (zumindest nicht im IE6). Wie kann ich dies (für möglichst alle Browser) lösen??

Problem 2: Höhe des Divs>63px habe ich jetzt durch explizite Höhenangabe und overflow:hidden; gelöst ... aber ist das so die feine Art?? Wiegesagt ohne die 2 Angaben ist das DIV auch ohne Umbrücke und Einrückungen höher als 63px...(warum auch immer?)

Beitrag melden
–
Informationen zu den Bewertungsregeln