problem with auto width in IE

Discussion in 'HTML & Website Design' started by bbrez1, Aug 14, 2008.

  1. #1
    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:
    [​IMG]

    In IE:
    [​IMG]

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

    Thanks :)
     
    bbrez1, Aug 14, 2008 IP
  2. bbrez1

    bbrez1 Banned

    Messages:
    208
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    anyone, please and thx :)
     
    bbrez1, Aug 14, 2008 IP
  3. kanter

    kanter Banned

    Messages:
    72
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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...
     
    kanter, Aug 15, 2008 IP
    bbrez1 likes this.
  4. bbrez1

    bbrez1 Banned

    Messages:
    208
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    bbrez1, Aug 17, 2008 IP
  5. bbrez1

    bbrez1 Banned

    Messages:
    208
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks man, it works great.

    reputation added :D
     
    bbrez1, Aug 17, 2008 IP