SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with padding right noWrap text IE6

    Hi
    I can not seem to get the padding-right working in the following situation (quirk-mode and IE6):

    .test
    {
    padding-right:20px;
    width:100px;
    background-color:lightBlue;
    overflow:hidden;
    }
    <div noWrap class="test">test div with padding</div>

    The text is larger than 100px, this causes the loss of the padding-right. So the text just goes on to the edge of the div, io stopping at 20px from the edge. I need a div with fixed size and a right-padding for the text, must be noWrap, and overflow:hidden. Any ideas? thanks

  2. #2
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    thx for reply. I think I should give more info:
    I have the following code:
    Code:
    <html>
    <head>
    <style>
    
    .test
    {
        padding-right:20px;
        width:100px;
        background-color:lightBlue;
        overflow:hidden;
        white-space: nowrap;
        background-image:url(http://lookup.gif);
        background-repeat: no-repeat;
        background-position:right;
        background-attachment:fixed;
    }
    </style>
    </head>
        
    <body>
        <div class="test">test div with padding</div>
    </body>
    </html>
    Where lookup.gif is a small icon. Independent of the width of the div and the length of the text, I do not want the text running over the background image. I hoped that by giving a padding-right, there would be a space between the right-border and the text, with a result that it seems that the image is on top. When I put the image left and use a paddig-left this works fine, but I need the image right. Thx

  3. #3
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,
    No the div must be fixed width.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Note also that in background attachment fixed the right position is in respect to the viewport and not the element is is described in. Except in IE which gets it all wrong and applies it to the element

  5. #5
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    try
    direction: rtl;
    Hi,
    that indeed works, good idea. However, now the text gets cut off at the left, and that is not what I want. It must be clipped at the right side.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And don't forget to use a proper DOCTYPE with your HTML file so that it will render properly in all the modern browsers (if the HTML and CSS are valid and have been coded properly).

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Why can't you just nest an element inside?

    Code:
    <style>
    
    .test p
    {
    	width:80px;
    	overflow:hidden;
    	white-space: nowrap;
    }
    div.test{ 
    	width:100px;
    	background:lightBlue;
    }
    
    </style>
    </head>
    <body>
    <div class="test">
    	<p>test div with padding</p>
    </div>

  8. #8
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Why can't you just nest an element inside?
    Yes, that would of course solve the problem. However, I'm using this field in a large grid (table like structure) with over 10000 cells. You can understand that render performance and memory usage is a big issue. So I have to minimize the number of tags as much as possible, so any extra tag in a field means 10000 extra tags.
    (This field is a "zoom" field, so when a user clicks on the small icon in the cell another page is opened, where he can select a different value.)

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You can understand that render performance and memory usage is a big issue.
    Yes - I can see that would be a problem but I can't see how this will work otherwise

  10. #10
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, I'm starting to realize that as well. Have to think of something else. I think I'll just show the background-image when the field has the focus. It's not as nice as I would like to have it, but it will solve my problem.
    Thanks for all the help.

  11. #11
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi all4nerds,
    Thanks. The way it is displayed is exactly what I need. But you propose an extra tag, which I desperately want to avoid. I have serious performance and memory usage issues.
    This field appear 10000+ times on my page, so any tag i can avoid is a big gain.

  12. #12
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    In my case x would be a row with several fields:
    Code:
    <div class="x">	
            <div class="test"></div>
            <div class="test"></div>
            <div class="test"></div>
            <div class="test"></div>
    </div>
    So not every field has its own container


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
  •