Abstand im Firefox (Div, Float)
Marcel
- design/layout
Hi...
...nu muss ich hier auch mal um Rat fragen, denn finde den "Fehler" nicht.
Und zwar zeigen der Firefox, Opera, Safari einen Abstand vom ersten img (das line.png) zum darüberliegenden 'div' an, wobei beim rechts angeordneten Bild keiner dargstellt wird. Der IE (6) macht dies nicht. Dort sind beide Bilder auf der gleichen Höhe. Der abstand beträgt ca 20 Pixel, um mal eine Größenordnung anzugeben. Generell passt die Darstellung (nicht komplett zerhackt).
Eine Beispielseite, welche ich bei der Problemlösungsuche gefunden hab, zeigt dieses Phänomen nicht. Wie kommt dieser Abstand zustande?
Müssten nicht beide Bilder (line.png, pic_01.jpg) nicht auf der selben Höhe liegen? Was übersehe ich?
Habe schon mit Padding rumprobiert, validiert ist das ganze...und nu hab ich keine Idee mehr...danke schonmal für eure Hilfe..
gruß
marcel
<div>...darüberliegende...komplette Seitenbreite</div>
<div class="normal">
<div><img alt="line (1K)" src="graphic/line.png" style="height:5px; width:580px;"></div>
<div><img alt="home (1K)" src="graphic/home.png" style="height:30px; width:150px; margin-left: 400px;"></div>
<div class="content">
<div>..content...</div>
<div style="margin-top: 0.5em;">...content...</div>
<div><a href="download.htm"><img alt="blub (22K)" src="graphic/vorhanden.png" style=" height:250px; width:450px; padding: 50px;"></a></div>
</div>
</div>
<div class="bg">
<img alt="pic_01 (38K)" src="graphic/pic_01.jpg" style="height: 500px; width: 250px;">
</div>
Hier der zugehörige CSS-Code:
.normal { float:left;
margin-left: 20px;
width: 500px; }
.bg { text-align: right;
margin-right: 10px;}
.content -> enthält reine Font-Formatierung
Moin
uiuiui... was für ne DIV-Suppe
Entferne erstmal alle überflüssige DIVs:
Was hälst du davon:
<div>...darüberliegende...komplette Seitenbreite</div>
<div class="normal">
<img alt="line (1K)" src="graphic/line.png" style="height:5px; width:580px;">
<img alt="home (1K)" src="graphic/home.png" style="height:30px; width:150px; margin-left: 400px;">
<div class="content">
..content...
<p style="margin-top: 0.5em;">...content...</p>
<a href="download.htm"><img alt="blub (22K)" src="graphic/vorhanden.png" style=" height:250px; width:450px; padding: 50px;"></a>
</div>
</div>
Da kommt erstmal Ordnung in den Code. Du kannst auch IMG mit CSS formatieren, ohne DIV-Tags drumherum zu ziehen. Auch andere HTML-Elemente neben DIVs dürfen gern zum Einsatz kommen.
Was dein Problem betrifft, konnte ich dieses leider nicht nachvollziehen. Hast du eventuell eine URL für uns?
Gruß Bobby
Moin
uiuiui... was für ne DIV-Suppe
Entferne erstmal alle überflüssige DIVs:
Was hälst du davon:
.....
Da kommt erstmal Ordnung in den Code. Du kannst auch IMG mit CSS formatieren, ohne DIV-Tags drumherum zu ziehen. Auch andere HTML-Elemente neben DIVs dürfen gern zum Einsatz kommen.Was dein Problem betrifft, konnte ich dieses leider nicht nachvollziehen. Hast du eventuell eine URL für uns?
Gruß Bobby
Hmm..ja, gebe zu, war sehr großzügig, was die Divs betrifft ;)
URL gibbet leider (noch) nicht, liegt hier alles noch lokal auf der Platte...
Habe nun ein wenig aufgeräumt @Div und siehe da: nu zeigen sie es alle "falsch" an...aber wenigstens einheitlich ^^
Das reicht mir schon, denn jetzt kann ich der ungewünschten Darstellung entgegenwirken..
Dank dir
Moin
Habe nun ein wenig aufgeräumt @Div und siehe da: nu zeigen sie es alle "falsch" an...aber wenigstens einheitlich ^^
LACH... Denke auch an den richtigen DOCTYPE...
Das reicht mir schon, denn jetzt kann ich der ungewünschten Darstellung entgegenwirken..
Naja... Weniger ist manchmal mehr... und man behält den Überblick
Gruß Bobby
Moin
Habe nun ein wenig aufgeräumt @Div und siehe da: nu zeigen sie es alle "falsch" an...aber wenigstens einheitlich ^^
LACH... Denke auch an den richtigen DOCTYPE...
Das reicht mir schon, denn jetzt kann ich der ungewünschten Darstellung entgegenwirken..
Naja... Weniger ist manchmal mehr... und man behält den Überblick
Gruß Bobby
Werde ich mir zu Herzen nehmen...
und Doctype is gesetzt (Strict)...