SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple CSS related query

    Hi,

    I feel the question I am having is pretty simple but as I am new to Web Designing, I have no clue how this would be done,

    My Query is like this:

    I have a table

    <style>
    .vbar { background: #ffffff url(bullet.png) 0 0 repeat-y; padding-top:16px;}
    </style>

    <table>
    <tr>
    <td class=vbar>&nbsp;</td>
    </tr>
    </table>

    This places the bullet I need all along in vertical manner.

    However the wierd part is depending upon the height I mention the image (bullet.png) sometimes shows up incomplete at the bottom of the table,

    I would preferably need a complete image or no image at all,

    Any help highly appreciated,

    Thank you,
    M Max..

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi mmaxtor! Welcome to SitePoint!

    Quote Originally Posted by mmaxtor View Post
    depending upon the height I mention ...
    If you are setting heights, you will need to make them multiples of the image height; otherwise you will see partial bits of the image at the bottom. Background images are unaware of the height of an element.

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ralph,

    Thank you so very much for instant reply,

    If you are setting heights,
    The irony is that I am not setting the heights, they expand as per the content ..

    Any other way round??

    Thank you,
    M Max..

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, setting heights is not a good idea, really, but it sounded like you might be doing it from what you said above.

    To be honest, I can't think of another solution. I'm sure others will comment, though, and there are a lot of creative/knowledgeable people in this forum, so stay tuned!

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes this can be seen in many websites.

    this is the way background images work.

    vineet

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    We'd probably need to see what effect you were going for to hep further.

    If the bullet is supposed to be aligned with some text then you would be better applying it to each element and then it will only show if that element is present.

    If its' just a repeating graphic for effect then you can't make it stop exactly (although css3 should address this issue with the round property). For now you would need to ensure your page stops at the right height which you may be able to do by adjusting the line-height and margins of the elements you are using but I don't think it will give a decent result.

    You could do it with some js to work out the size and adjust accordingly.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •