S
Sebastian Fey
hi,
im displaying little admonition-images (all 50px*50px) at the right of
<p>-tags by using
<img style="float:right">...
<p style="margin-right:70px">...
it works really fine, but when i to do the same in a listitem. the text
is now not longer aligned to the top of the image, but to the bottom!
this .html is created from XML by XSLT. so its impossible to give the first
<p> a special style, eg display:inline,
(btw if there is a way in CSS1 to access the first-child my problem is
solved )
i really tried everything, but im a newbe to CSS, so i hope anyone here can
help. im really fed up with this *******
thx a lot
-seb
here you can see the problem:
http://mitglied.lycos.de/buergerkonvent/test/li_prob.html
<html>
<style type="text/css">
div.admonright {margin-right:70px;}
p {margin-right:70px;}
img.admonright {float:right;}
</style>
<body>
<div>
<img class="admonright" src="../../common%20icons/tip.jpg">
<p>this is a para with a admonition-image at the right. works fine here. the
text is aligned to the top of the image! but look at the list below ... same
code, but aligning differs!</p>
<p>normal para anything this does is not to float to the very right, cause
this area is reserved to admonition-images</p>
</div>
<ul>
<li>
<p>normal item, aligned to the bullet, as it should be - looks great</p>
</li>
<li>
<img class="admonright" src="../../common%20icons/tip.jpg" />
<p>noooo i want to be aligned to my beloved bullet!</p>
<p>this is almost the same code as in the div above, but here the text is
aligned to the bottom of the image. anything i do, it will stay here.
shit!!</p>
</li>
</ul>
</body>
</html>
im displaying little admonition-images (all 50px*50px) at the right of
<p>-tags by using
<img style="float:right">...
<p style="margin-right:70px">...
it works really fine, but when i to do the same in a listitem. the text
is now not longer aligned to the top of the image, but to the bottom!
this .html is created from XML by XSLT. so its impossible to give the first
<p> a special style, eg display:inline,
(btw if there is a way in CSS1 to access the first-child my problem is
solved )
i really tried everything, but im a newbe to CSS, so i hope anyone here can
help. im really fed up with this *******
thx a lot
-seb
here you can see the problem:
http://mitglied.lycos.de/buergerkonvent/test/li_prob.html
<html>
<style type="text/css">
div.admonright {margin-right:70px;}
p {margin-right:70px;}
img.admonright {float:right;}
</style>
<body>
<div>
<img class="admonright" src="../../common%20icons/tip.jpg">
<p>this is a para with a admonition-image at the right. works fine here. the
text is aligned to the top of the image! but look at the list below ... same
code, but aligning differs!</p>
<p>normal para anything this does is not to float to the very right, cause
this area is reserved to admonition-images</p>
</div>
<ul>
<li>
<p>normal item, aligned to the bullet, as it should be - looks great
</p></li>
<li>
<img class="admonright" src="../../common%20icons/tip.jpg" />
<p>noooo i want to be aligned to my beloved bullet!</p>
<p>this is almost the same code as in the div above, but here the text is
aligned to the bottom of the image. anything i do, it will stay here.
shit!!</p>
</li>
</ul>
</body>
</html>