Problem with padding right noWrap text IE6

**Quark** · Sep 26, 2006 02:17

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

**Quark** · Sep 26, 2006 02:51

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

**Quark** · Sep 26, 2006 03:16

hi,
No the div must be fixed width.

**Paul O'B** · Sep 26, 2006 04:03

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

**Quark** · Sep 26, 2006 04:24

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.

**Dan Schulz** · Sep 26, 2006 04:40

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).

**Paul O'B** · Sep 26, 2006 04:46

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>

**Quark** · Sep 26, 2006 04:58

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.)

**Paul O'B** · Sep 26, 2006 05:15

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

**Quark** · Sep 26, 2006 05:24

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.

**Quark** · Sep 26, 2006 05:39

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.

**Quark** · Sep 26, 2006 06:33

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

User Tag List

Thread: Problem with padding right noWrap text IE6

Thread Tools

Display

Problem with padding right noWrap text IE6

Bookmarks

Bookmarks

Posting Permissions