1 Reply Latest reply: Oct 4, 2010 11:55 PM by mahendra rajeshirke RSS

    browser bug with IE

    mahendra rajeshirke Community Member

      hi all,

       

      please have a look on http://www.rocketbatteries.co.in/heavy_segment.html page, the page is having a table with green border, a div around the table, i set position relative to div and make it scrollable, it looks fine in FF, but in IE horizontal scroll bar comes, i think the table width (740px) messing in div and spreads the layout.

       

       

       

      <div class="scroll" align="left">

       

      <table border="0" align="left" cellpadding="0" cellspacing="0" id="tableCSS" style="width:740px;">

      ......</table>

       

      </div>

       

      ---------

      css code

      --------

       

      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, font, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td {
          margin: 0;
          padding: 0;
          border: 0;
          outline: 0;

       

          vertical-align: top;
          background: transparent;

       

      }
      body {
          line-height: 1;
          background-image:url(images/bg.png);
          background-repeat: repeat;
          background-position: left top;
          margin-top: 2px;
      }
      ol, ul {
          list-style: none;
      }
      blockquote, q {
          quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      }

       

      /* remember to define focus styles! */
      :focus {
          outline: 0;
      }

       

      /* remember to highlight inserts somehow! */
      ins {
          text-decoration: none;
      }
      del {
          text-decoration: line-through;
      }

       

      /* tables still need 'cellspacing="0"' in the markup */
      table {
          border-collapse: collapse;
          border-spacing: 0;
      }

       

      /*.abs{
          top:0;
              position:relative;
          width:100%;
          left:0;background-color:transparent; z-index:3;
      }
      .out{
      margin:0;
      position:relative;z-index:2;
      background-color:transparent;
      }
      .abs2{top:0; z-index:1;

       

          position:relative;
          width:100%;
          left:0;background-color:transparent; }*/
      .wrap{
          width:56.25em;
          margin-right: auto;
          margin-left: auto;
          background-color: #FFF;
          padding-top: 5px;
          padding-right: 10px;
          padding-bottom: 5px;
          padding-left: 10px;
      }
      .text1{
          font-size: 11px;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-weight:700;
          text-align:left;
          padding-left: 60px;
      }

       

      .style1 {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 12px;
          color: #666;
          line-height:18px;
          font-weight:700;
          padding-top: 15px;
          text-align:justify;
          padding-left: 5px;
      }
      .style1 p{
          text-align:justify;
          line-height: 20px;
      }
      .style1 a{color: #666666; text-decoration:none}
      .style2,.style2 a{
          color: #666666;
          text-decoration:none;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 9pt;
          font-weight: 700;
      }
      .style3 {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 28px;
          color: #F37423;
          font-weight: 700;
          padding-top: 20px;
          padding-bottom: 10px;
      }

       

      .FooterGray{ color:#666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:700; text-decoration: none}
      .FooterGray a{ color:#c21b00;font-weight:700; text-decoration: none}
      .FooterGrayCopy, .FooterGrayCopy a{color:#999999; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:700; text-decoration: none}
      .orangesmall{
          color:#F37423;
          font-weight:500;
          font-size:22px;
      }
      .bluesmall, .bluesmall a{
          color:#5AC5BC;
          font-weight:700;
          font-size: 12px;
      }
      .blue{
          color:#5AC5BC;
          font-weight:700;
          font-size: 14px;
      }

       

      .scroll{
          display:block;
          overflow:auto;
          height:auto;
          max-width: 638px;/*scrollbar-base-color: orange;
      scrollbar-arrow-color: green;
      scrollbar-DarkShadow-Color: blue; */
          padding-top: 10px;
          padding-right: 5px;
          padding-bottom: 10px;
          padding-left: 2px;
          margin: 0px;
          border: 1px solid #5AC5BC;
      }

       

      .scroll table{     background-color: #FFF;
          margin: 0px;
          padding: 0px;
      }
      .scroll table td{
          white-space: pre-wrap; /* css-3 */
          white-space: pre-line;
          white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
          white-space: -pre-wrap; /* Opera 4-6 */
          white-space: -o-pre-wrap; /* Opera 7 */
          word-wrap: break-word; /* Internet Explorer 5.5+ */
          margin: 0px;
          padding-top: 0;
          padding-right: 3px;
          padding-bottom: 0;
          padding-left: 3px;
          }


      #tableCSS {
          table-layout:fixed;
          text-align: center;
          width: 100%;
          border-top-width: 1px;
          border-top-style: solid;
          border-top-color: #e0e0e0;
          padding: 0px;
          -moz-border-radius: 8px; /* Safari and chrome */
          -khtml-border-radius: 8px;
          -khtml-box-shadow: 0px 8px 14px rgba(0,0,0,0.3); /* Linux browsers */
          border-radius: 8px;
          -moz-box-shadow: 0px 8px 14px rgba(0,0,0,0.3);
          behavior: url(border-radius.htc);
      filter: progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=5) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=5) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=3);
          margin: 0 auto;

       

      }
      #tableCSS th, #tableCSS td {
          border-bottom-width: 1px;
          border-bottom-style: solid;
          border-bottom-color: #e0e0e0;
          border-right-width: 1px;
          border-right-style: solid;
          border-right-color: #e0e0e0;
      }
      #tableCSS th {
          color: #828282;
          background-color: #f8f8f8;
          padding-top: 7px;
          padding-right: 0px;
          padding-bottom: 5px;
          padding-left: 0px;
          border-bottom-width: 1px;
          font-size: 11px;
          font-weight: bold;
      }
      #tableCSS td {
          padding-top: 5px;
          padding-right: 0px;
          padding-bottom: 3px;
          padding-left: 0px;
      }
      #tableCSS .last-child { border-right: 0; }
      .bdNum {
          font-size:9pt;
          color: #828282;
          background-color: #f8f8f8;font-family: Verdana, Arial, Helvetica, sans-serif;
          font-weight: bold;
      }
      .bdNum1 {
          font-size:9pt;font-family: Verdana, Arial, Helvetica, sans-serif;
          color: #828282;
          background-color: #f8f8f8;
          font-weight: bold;background-image:url(../tables/table_title_06_1.gif)
      }
      .bdTitle {
          text-align: center;
          color: #999999;
      }
      .bdTitle a {
          padding: 0 6px;
          color: #999999;
          text-decoration: none;
      }
      .bdName {
          color: #999999;
      }

       

      #tableHead {
          width:760px;
          border-top:1px solid #d6d6d6;
          border-bottom:1px solid #d6d6d6;
          margin-bottom:2px;
      }
      #tableHead th {
          padding:5px 0 5px 0;
          font-size:10px;
          color:#6c6c6c;
          letter-spacing:-0.5px;
          background-color: #f8f8f8;
      }
      #tableHead th.first {
          width: 100px;
      }
      #tableHead span {
          font-size:9px;
          letter-spacing:-1px;
      }
      #tableHead .box_l {
          border-left:1px solid #d6d6d6;
      }
      #tableHead .box_r {
          border-right:1px solid #d6d6d6;
      }
      #tableHead .box_b {
          border-bottom:1px solid #d6d6d6;
      }