1

I am using a sliding doors effect to show a variable-width content box. The effect works fine, but the problem is that the padding-right required to make the effect eats up part of the content area:

http://screencast.com/t/s9dTT1wU

I need my content to go all the way from the left edge of the graphic to the right edge. I have to support old IE so I can't use negative margins, and I can't use text-indent because i need full HTML content on the interior, not just text. The CSS is:

.Quote.Outer
{
    float: left;
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutRight.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 50px;
    height: 81px;
}

.Quote.Inner
{
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutLeft.png);
    background-position: left center;
    background-repeat: no-repeat;
    height: 81px;
    outline: solid 1px hotpink;
}

and the markup is:

<div class="Quote Outer">

    <div class="Quote Inner">html content here</div>

</div>

I was surprised to find no one else discussing this drawback of sliding doors. Is there a reasonable cross-browser solution for this?

Jim Noble
  • 492
  • 6
  • 12
  • 1
    Can you post a [JS Fiddle](http://jsfiddle.net/) to demonstrate what you're doing? With HTML and CSS (and the relevant images)? This isn't a 'drawback of sliding doors,' but only of your implementation of the technique, I think. – David Thomas Feb 10 '12 at 20:49

1 Answers1

1

You simply need another layer to allow for left padding.

DEMO HERE

Or add padding to the inner div:

DEMO HERE

Another option is to use positioning to simply move the inner content to the right a bit to reduce the padding appearance. But you really don't want to try and make the content container fill the entire image base. This causes issues with resizing, which is the point of sliding doors.

DEMO HERE

You could always edit the images so that the 50 pixels of padding is reduced.

Scott
  • 21,475
  • 8
  • 43
  • 55
  • Thanks for the answer, but i need to effectively remove the empty space on the right, not add space on the left. – Jim Noble Feb 10 '12 at 20:59
  • Well, with sliding doors, you can't really overwrite that padding. The best you can do is reduce the images so you don't need so much padding on one end. Any attempt to circumvent the padding, other than the demos I posted, would break the auto-grow aspect of the code. – Scott Feb 10 '12 at 22:28