problem with auto width in IE

Hi

I have this little banner menu which I want to be 100% in width (so you can resize and the middle bg resizes).

I have 5 images. 2 images on left, background which streches (repeats) and 2 images on right side.

It works great with Firefox but I have problems in IE and Opera.

My html:

<table width="100%" height="159" cellspacing=0 cellpadding=0>
<tr>
<td width="163" height="159" class="aleft"></td>
<td width="172" height="159" class="banner_left" align="left"></td>
<td height="159" class="banner_middle"></td>
<td width="186" height="159" class="banner_right"></td>
<td width="207" height="159" class="aright"></td>
</tr>
</table>

Code (markup):

and my css:

.aleft{
          background:transparent url(images/aleft.jpg) no-repeat top left;
          vertical-align:bottom;
            }
            
.aright{
          background:transparent url(images/aright.jpg) no-repeat top left;
            }

          .banner_middle{
          background: white url("images/banner_bg.jpg");
          background-repeat: repeat-x;
          background-position: center;
          width:auto;
            }

         .banner_left{
          background: white url("images/banner_left.jpg");
          background-repeat: no-repeat;
          background-position: left;
            }

          .banner_right{
          background: white url("images/banner_right.jpg");
          background-repeat: no-repeat;
          background-position: right;
            }

Code (markup):

Basically what I think the problem is, is that FF (see code below) automatically sets the width to fit into the table (table is set to 100% of the browser) and IE and Opera don't.

<td height="159" class="banner_middle"></td>

Code (markup):

I've tried with css code like width:auto etc.

In firefox it shows:


In IE:


As you can see on the FF screenshot the middle bg streches between the left and right td.

Thanks

 

anyone, please and thx

 

try adding some padding or margin settings to your .banner_left css... like:

margin-left: auto;
margin-right: auto;

or perhaps setting inner side padding for the images that creap inward.

padding-right: 250px;


etc... idk its hard to guess since you don't specify which images have which filename...

 

Thanks for your post, will try that if it works

Pictures are:

aleft.jpg



aright.jpg



banner_left.jpg



banner_right.jpg



banner_bg.jpg

http://adesco.si/sitetest/images/banner_bg.jpg

 

Thanks man, it works great.

reputation added