big CSS-trouble! aligning in listitem!

Discussion in 'HTML' started by Sebastian Fey, Jul 17, 2003.

  1. 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>
    Sebastian Fey, Jul 17, 2003
    #1
    1. Advertising

  2. Sebastian Fey

    rf Guest

    "Sebastian Fey" <> wrote in message
    news:bf5rku$baj2d$-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.
    rf, Jul 17, 2003
    #2
    1. Advertising

  3. In article <bf5rku$baj2d$-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/buergerkonvent/test/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.
    Lauri Raittila, Jul 17, 2003
    #3
  4. In article <bf5rku$baj2d$-berlin.de>,
    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/buergerkonvent/test/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
    Jacqui or (maybe) Pete, Jul 17, 2003
    #4
  5. THX! i did it ... EVIL workaround

    "Lauri Raittila" <> schrieb im Newsbeitrag
    news:...
    > In article <bf5rku$baj2d$-berlin.de>, Sebastian Fey
    > wrote:
    >
    > > http://mitglied.lycos.de/buergerkonvent/test/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 shit 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!
    Sebastian Fey, Jul 17, 2003
    #5
  6. "Jacqui or (maybe) Pete" <> schrieb im Newsbeitrag
    news:...
    > In article <bf5rku$baj2d$-berlin.de>,
    > 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/buergerkonvent/test/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
    Sebastian Fey, Jul 17, 2003
    #6
  7. Sebastian Fey

    Chris Harris Guest

    Re: THX! i did it ... EVIL workaround

    > > > 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
    Chris Harris, Jul 17, 2003
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mad Scientist Jr
    Replies:
    2
    Views:
    429
    Mad Scientist Jr
    Jun 29, 2004
  2. Jim in Arizona
    Replies:
    7
    Views:
    904
    Badass Scotsman
    Nov 22, 2006
  3. Shaguf
    Replies:
    0
    Views:
    326
    Shaguf
    Dec 24, 2008
  4. Shaguf
    Replies:
    0
    Views:
    431
    Shaguf
    Dec 26, 2008
  5. Shaguf
    Replies:
    0
    Views:
    219
    Shaguf
    Dec 26, 2008
Loading...

Share This Page