Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > big CSS-trouble! aligning in listitem!

Reply
Thread Tools

big CSS-trouble! aligning in listitem!

 
 
Sebastian Fey
Guest
Posts: n/a
 
      07-17-2003
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/buergerkonv...t/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.
****!!</p>

</li>

</ul>

</body>

</html>



 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      07-17-2003

"Sebastian Fey" <(E-Mail Removed)> wrote in message
news:bf5rku$baj2d$(E-Mail Removed)-berlin.de...
> 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 *******


Remove the <p> etc from around the text starting with noooo. The block level
p element appears to be interfeering with the right float.

BTW do you think you can get a host that sprays more adds at me. I can still
almost tell which part of the page is yours and which is your hosts rubbish


Cheers
Richard.


 
Reply With Quote
 
 
 
 
Lauri Raittila
Guest
Posts: n/a
 
      07-17-2003
In article <bf5rku$baj2d$(E-Mail Removed)-berlin.de>, Sebastian Fey
wrote:
> 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">...


> http://mitglied.lycos.de/buergerkonv...t/li_prob.html


> 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!


Not here. Opera 7.2b1. What browser you use? Try making all possible
margins/paddings 0.

> this .html is created from XML by XSLT. so its impossible to give the first
> <p> a special style, eg display:inline,


Even more likely you should try remove P's top margin. (you don't need
top margin, as long as you have bottom margin.)

And, I think you are wrong about impossible.

> (btw if there is a way in CSS1 to access the first-child my problem is
> solved )


There isn't. And you propably mean widely supported way, not CSS1 way.

> i really tried everything, but im a newbe to CSS, so i hope anyone here can
> help. im really fed up with this *******


Don't use inline styles.

[snip invalid HTML. Please use doctype definition for full html page
snippets]


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

 
Reply With Quote
 
Jacqui or (maybe) Pete
Guest
Posts: n/a
 
      07-17-2003
In article <bf5rku$baj2d$(E-Mail Removed)-berlin.de>,
http://www.velocityreviews.com/forums/(E-Mail Removed) says...
> 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!
>

....
>
> here you can see the problem:
> http://mitglied.lycos.de/buergerkonv...t/li_prob.html
>

....snip code

Looks OK to me (I just fixed your syntax & made it html4.01 compliant):

http://porjes.haxorz.org/fright.html
 
Reply With Quote
 
Sebastian Fey
Guest
Posts: n/a
 
      07-17-2003

"Lauri Raittila" <(E-Mail Removed)> schrieb im Newsbeitrag
news:(E-Mail Removed)...
> In article <bf5rku$baj2d$(E-Mail Removed)-berlin.de>, Sebastian Fey
> wrote:
>
> > http://mitglied.lycos.de/buergerkonv...t/li_prob.html

>
> > 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!

>
> Not here. Opera 7.2b1. What browser you use? Try making all possible
> margins/paddings 0.
>


im using IE6, and this the only browser we support.

> > this .html is created from XML by XSLT. so its impossible to give the

first
> > <p> a special style, eg display:inline,

>
> Even more likely you should try remove P's top margin. (you don't need
> top margin, as long as you have bottom margin.)
>


well, nice! i tried this before to set the top-margin to 0...useless!
after your response i gave it a new try and... see this evil workaround =)

li.admon p {margin-top: -1em; /*!! im fed up with this **** and will use it
like this!!*/
margin-right:70px;}

so thank u very much



> And, I think you are wrong about impossible.
>

right "nichts ist unmöglich"


THX!


 
Reply With Quote
 
Sebastian Fey
Guest
Posts: n/a
 
      07-17-2003

"Jacqui or (maybe) Pete" <(E-Mail Removed)> schrieb im Newsbeitrag
news:(E-Mail Removed)...
> In article <bf5rku$baj2d$(E-Mail Removed)-berlin.de>,
> (E-Mail Removed) says...
> > 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!
> >

> ...
> >
> > here you can see the problem:
> > http://mitglied.lycos.de/buergerkonv...t/li_prob.html
> >


thx pete ... but this looks just the same as mine - IN IE6(!)
but i found a workaround!

thx




> ...snip code
>
> Looks OK to me (I just fixed your syntax & made it html4.01 compliant):
>
> http://porjes.haxorz.org/fright.html



 
Reply With Quote
 
Chris Harris
Guest
Posts: n/a
 
      07-17-2003
> > > 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!

> >
> > Not here. Opera 7.2b1. What browser you use? Try making all possible
> > margins/paddings 0.
> >

>
> im using IE6, and this the only browser we support.


I presume that you are having a laugh !! Not funny, but rather silly


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
GIDS 2009 .Net:: Save Big, Win Big, Learn Big: Act Before Dec 29 2008 Shaguf ASP .Net 0 12-26-2008 09:29 AM
GIDS 2009 .Net:: Save Big, Win Big, Learn Big: Act Before Dec 29 2008 Shaguf ASP .Net Web Controls 0 12-26-2008 06:11 AM
GIDS 2009 Java:: Save Big, Win Big, Learn Big: Act Before Dec 29 2008 Shaguf Python 0 12-24-2008 07:35 AM
GIDS 2009 Java:: Save Big, Win Big, Learn Big: Act Before Dec 29 2008 Shaguf Ruby 0 12-24-2008 05:07 AM
Big JARs = Big Problems? kk_oop@yahoo.com Java 11 09-18-2005 05:54 PM



Advertisments