nicht angemeldet
Lücke durch span-Element
hi, ich habe folgenden (auf das Wesentliche reduzierten) Code:
<!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;
font-
}
form {
margin: 0;
}
</style>
</head>
<body style="margin:0px;">
<div style="width:100%; background-color:#FF0000;">
<div style="text-align:center;"><img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" border="0" alt="" height="181" width="882" /></div>
</div>
<div style="width:100%; background-color:#00FF00; height:50px;"><div style="text-align:center;"><img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" border="0" height="63" width="32" /><span style="line-height:63px; margin-top:10px; vertical-align:top">abc</span><img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" border="0" height="63" width="55" /></div></div>
<div style="width:100%; background-image:url('#0000FF')">
<div style="margin:auto; width:820px; overflow:visible;">
<table width="100%" border="0" style="margin:0px; background-color:#999900">
<tr><td style="width:182px; overflow:visible; vertical-align:top;">MENÜ</td>
<td style="width:638px; overflow:visible; vertical-align:top; background-color:#009999">Content</td></tr>
</table>
</div>
</div>
Ich will in der Mitte des Textes (bei abc) später dann ein Input-Element anzeigen, dass ca. 10px von oben beginnen soll. Allerdings interpretieren IE und Mozilla das "line-height:63px; margin-top:10px; vertical-align:top" auch unterschiedlich.
Habt ihr eine Idee, wie ich das hinbekomme?
Außerdem zeigt mir jeder Browser das mittlere DIV höher an als die Bilder (obwohl beides 63px hoch ist). Wisst ihr, wo der Fehler liegt und wie ich die Lücke weg bekomme?
Danke!!!
P.S. ich habe allen Code innerhalb der DIVs auf 1 Zeile, sodass Lücken durch Tabulator/Enter wie im o.g. Code ausgeschlossen sind; nur zum übersichtlicher darstellen. (Das Bild ist ein Dummybild, um das Problem zu verdeutlichen)
-
Hi,
Allerdings interpretieren IE und Mozilla das "line-height:63px; margin-top:10px; vertical-align:top" auch unterschiedlich.
wie sollten sie es denn interpretieren? vertical-align wirkt nur bei Inline- und bei Tablecell-Elementen; beide haben keine bzw. keine vertikalen Margins. Folge: Eine der beiden Angaben ist überflüssig.
Habt ihr eine Idee, wie ich das hinbekomme?
Ich kann Dir sagen, dass Dein Code unübersichtlich ist. Ich kann Dir ebenfalls sagen, dass die Tabelle mit Sicherheit fehl am Platz ist. Und ich kann Dir sagen, dass viele, wahrscheinlich alle der <img>-Tags ebenfalls im Code nichts verloren haben. Das alles führt dazu, dass ich Deine Probleme zwar nicht nachvollziehen kann, aber für zweifelhaft halte - wenn Du die offensichtlichen Fehler korrigierst, werden sie mit hoher Wahrscheinlichkeit nicht mehr existieren.
P.S. ich habe allen Code innerhalb der DIVs auf 1 Zeile, sodass Lücken durch Tabulator/Enter wie im o.g. Code ausgeschlossen sind; nur zum übersichtlicher darstellen.
Genau das macht es unübersichtllich. Und natürlich die Inline-Styles.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
<!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?)
-
mit...
span.text1 { vertical-align:43px;
}klappt so wie ich es mir vorstelle... aber von px-Angaben steht in SELFHTML nichts. ist das eine (für alle gängigen Browser) zulässige Angabe???
-
Hi,
von px-Angaben steht in SELFHTML nichts.
SelfHTML ist, so hervorragend es auch ist, nur Zweitliteratur. Verbindliche Informationen über die Standards findest Du beim Hersteller, in diesem Fall also beim W3C.
ist das eine (für alle gängigen Browser) zulässige Angabe???
Es ist eine standardkonforme Angabe. Selbstverständlich unterstützt sie _nicht_ jeder Browser, beispielsweise diejenigen nicht, die kein CSS beherrschen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-