Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer IE6 / IE7 Layout problem with a curved box and a slice

    Hi All,

    I have a problem with <a href="http://magazine.foxybingo.com/" target="_blank">a curved box on my page.</a>

    There are three components - the top curve, the div for the background (with a slice) and the bottom curve.

    When I add them together, it renders fine in FF, but in IE6/IE7 there is an annoying gap between the main body div and the bottom curve.

    <a href="http://www.barbaryonline.com/jw/personal/ie6css.png" target="_blank">See screenshot</a>

    here is the relevant HTML

    <code>
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/fbm_sidebar_top.gif"><div id="fbm_sidebar"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/fbm_sidebar_btm.gif">
    </code>

    And here is the relevant CSS

    <code>
    img {
    border:0px none;
    }
    * {
    margin:0px;
    padding:0px;
    }

    body {
    font-family:Verdana,Arial,sans-serif;
    }
    #fbm_sidebar {
    background:transparent url(images/fbm_sidebar_slice.gif) repeat-y scroll 0%;
    height:200px;
    width:146px;
    }
    </code>

    Any ideas as to why this is behaving strangely in IE people?

    It validates and uses
    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    </code>

    Any help greatly appreciated!

    thanks

    jon whittlestone

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    34
    Thanks
    0
    Thanked 7 Times in 7 Posts
    use div tag instead of <img />

    <div style="height:10px;widows:146px;background:url(../../fbm_sidebar_btm.gif) no-repeat;"></div>


    gud day
    rams

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up solved, thanks!

    thanks i opted for a similar solution and just styled the image to Block

    <img src="<?php bloginfo('stylesheet_directory');
    ?>/images/fbm_sidebar_btm.gif" style="display: block;" >


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •