IE6 Border Bug <>$%(any ideas?

Discussion in 'HTML' started by silco@uk2.net, Nov 28, 2006.

  1. Guest

    Hi Everyone..
    hope you can help!

    I have a IE6 browser bug,
    most of the common fixes tell me to use relative on my container divs.

    This fixed some problems but now I have a left border problem and a top
    riogh corner problem

    here is the code:

    /* ********************************** */

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    />
    <title>Untitled Document</title>

    <style>
    div.promo-wrap-top{
    position:relative;
    height: 13px;
    padding: 0px;
    border-left: 1px solid #a6a6a6;
    border-right: 1px solid #a6a6a6;
    border-top: 1px solid #a6a6a6;
    }
    div.promo-wrap-middle-sml{
    position:relative;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    }
    div.info-container{
    position:relative;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: -9px;
    margin-bottom: 4px;
    }
    div.prod-card-leftcol{
    float: left;
    }
    div.clear{
    clear: both;
    }
    div.box-bottom-product-card{
    position:relative;
    height: 13px;
    border-left: 1px solid #a6a6a6;
    border-right: 1px solid #a6a6a6;
    border-bottom: 1px solid #a6a6a6;
    margin-top: -14px;
    margin-right: 1px;
    }
    </style>
    </head>

    <body>

    <div class="promo-wrap-top"></div>
    <div class="promo-wrap-middle-sml">
    <div class="info-container">
    <div class="prod-card-leftcol"><img
    src="images/NETSite/1x1blue.gif" width="200" height="500" border="0"
    /></div>
    <div class="prod-card-rightcol">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
    rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
    ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
    est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
    eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
    zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
    dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div class="clear"></div>
    </div>
    </div>
    <div class="box-bottom-product-card"></div>

    </body>
    </html>


    cheers!
     
    , Nov 28, 2006
    #1
    1. Advertising

  2. cwdjrxyz Guest

    wrote:
    > Hi Everyone..
    > hope you can help!
    >
    > I have a IE6 browser bug,
    > most of the common fixes tell me to use relative on my container divs.
    >
    > This fixed some problems but now I have a left border problem and a top
    > riogh corner problem


    Yes, IE6 has quite a few CSS bugs. And it appears that many remain for
    IE7. I usually write valid code that works on most browsers. If IE acts
    up, I then often patch for it with a conditional IE comment. In this
    way I do not have to distort correct code for the several standards
    compliant browsers just because Microsoft apparently can not make a
    compliant browser.

    A problem for IE6 and IE7 I just found yesterday was that IE displaced
    an absolute top position by 22px, compared with 7 other compliant
    browsers that got things correct. I first positioned absolutely a gif
    of a picture frame having a transparent center that I made with
    PaintShop. I then absolutely positioned 4 video players, that can be
    switched on and off, absolutely so that they appeared centered in the
    frame. Seven of my recent browsers got it right, but IE6 and IE7
    positioned the players 22 px too high on the page, so that they were
    not centered in the frame. The page still works on IE, but just looks a
    little tacky. I used a Microsoft conditional comment to overcome the
    problem, which is:

    <!--[if IE]>
    <script type="text/javascript">
    var tp=102 // top location of player as written
    var ieht=tp+22 // top player location corrected for IE bug
    document.getElementById('p1').style.top=ieht+'px';
    document.getElementById('p2').style.top=ieht+'px';
    document.getElementById('p3').style.top=ieht+'px';
    document.getElementById('p4').style.top=ieht+'px';
    </script>
    <![endif]-->

    If the response for IE7 had been correct, then there is another IE
    conditional that will be seen only up to a certain version of IE that
    could be used. My page uses extensive script, so using script for the
    correction is no problem. However, if there had been no other script on
    the page, the above correction would just be ignored if someone had
    script turned off, and the page would still work, but just be a bit
    tacky.
     
    cwdjrxyz, Nov 29, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,276
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,375
    Martin Jay
    Jun 8, 2006
  3. Doug Lerner
    Replies:
    5
    Views:
    124
    Richard Cornford
    Jan 22, 2006
  4. Johannes Kiehl

    IE6 bug? form.focus() breaks border style

    Johannes Kiehl, Feb 11, 2006, in forum: Javascript
    Replies:
    4
    Views:
    163
    BootNic
    Feb 12, 2006
  5. Steve
    Replies:
    3
    Views:
    136
    Steve
    Sep 15, 2006
Loading...

Share This Page