nicht angemeldet
Hi
Ich baue gerade eine Seite deren Hauptteil aus drei verschiedenen Textabsaetzen beseteht, die sich immer wieder wiederholen. (Die Formatierung, nicht der Inhalt)
Im Moment habe ich die drei Boxen als div definiert und dem ersten und dem letzten die gleiche Formatierung gegeben. Das mittlere ist genau entgegengesetzt definiert.
Wenn ich nun die Texte, die aus einer Datenbank kommen, vom Script darstellen lasse, sind die ersten drei Boxen korrekt ausgerichtet, bei den folgenden Wiederholungen jedoch ist jeweils die erste Box um ca 150px nach rechts verschoben. Die anderen Boxen sitzen wieder korrekt.
Ein Bild wies aussieht gibts auch:
http://212.185.195.29/Image2.jpg
Vielleicht kann mir jemand sagen woran es liegt, ich dachte erst es wäre diese Treppchengeschichte, aber das passiert ja nur mit dem IE. Hier ists genau umgekehrt... Der Code validiert sowohl im CSS Validator als auch im HTML Validator.
Getestet mit diesen Browsern:
Firefox (Fehler tritt auf)
Konqueror (Fehler tritt auf)
IE6 (Fehler tritt nicht auf)
Der dazugehörige CSS sieht so aus:
-----*snip*-----
div.contentfeld {
background-color:#FFFFFF;
color:#000000;
font-size:0.9em;
width:740px;
margin-left:300px;
margin-right:0px;
margin-top:10px;
margin-bottom:0px;
}
div.fliesstext1 {
background-color:#FF0000;
color:#000000;
width:740px;
height:77px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:30px;
}
div.fliesstext2 {
background-color:#00FFFF;
color:#000000;
width:740px;
height:77px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:30px;
}
div.fliesstext3 {
background-color:#FFFF00;
color:#000000;
width:740px;
height:77px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:30px;
}
p.abs1 {
text-align:left;
}
p.abs2 {
text-align:right;
}
p.abs3 {
text-align:left;
}
img.abs1 {
float:left;
margin-left:0px;
margin-right:15px;
margin-top:0px;
margin-bottom:50px;
}
img.abs2 {
float:right;
margin-left:15px;
margin-right:0px;
margin-top:0px;
margin-bottom:50px;
}
img.abs3 {
float:left;
margin-left:0px;
margin-right:15px;
margin-top:0px;
margin-bottom:50px;
}
----*snap*----
Der dazugehörige HTML sieht dann so aus:
----*snip*----
<!-- Contentfeld -->
<div class="contentfeld">
<div class="fliesstext1">
<img class="abs1" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">
<p class="abs1">
<b class="abs1">head1</b><br>
This document validates as CSS!
To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>
</div>
<div class="fliesstext2">
<img class="abs2" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">
<p class="abs2">
<b class="abs2">head2</b><br>
This document validates as CSS! To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>
</div>
<div class="fliesstext3">
<img class="abs3" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">
<p class="abs3">
<b class="abs3">head3</b><br>
This document validates as CSS! To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>
</div>
<div class="fliesstext1">
<img class="abs1" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">
<p class="abs1">
<b class="abs1">head4</b><br>
This document validates as CSS! To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>
</div>
...
...
...
...
...
<div class="fliesstext3">
<img class="abs3" src="/media/test.jpg" alt="/media/test.jpg" width="150px" height="75px">
<p class="abs3">
<b class="abs3">head9</b><br>
This document validates as CSS! To show your readers that you've taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page:
</p>
</div>
</div>
----*snap*----
Die komplette Seite ist unter http://ib-munteanu.dynamik.sytes.net erreichbar.
Gruss, Echelon