SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8 and IE7 difference properties

    I am making a site compatable with IE8.
    My site is working fine on IE7 and not working properly on IE8.(some alignments are not proper).

    I have noticed the property text-align:right is not working as expected in IE8.

    Could you please list the properties that are not worked as expected in IE8?

    Many Thanks
    Abdul

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Abdul do you have a link to the site so we can see the problem and maybe solution

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Doboe,

    The site which I have working is not accessible from outside.

    I am attaching the code, It is working fine in IE6 and IE7.

    It is not working as expected in IE8.

    This code contains 2 tables; one is left aligned(the default property) and the second table is right aligned (by setting the property text-align:right in class .header-basic table.layout td.col2 )

    The second table is right aligned in ie6 and ie7 and not in id8......?

    The line under the Tax field also displaying a white space in ie8.


    I am using this html in a frame which can be expandable.

    Could you please explain how to make this code to compatable in IE8?
    It is greate if you list the propeties which IE8 is not supported and the alternate solution for this?


    Many Thanks in advance,
    Abdul

    Following is the code:

    Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="">
     <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>
            
        </title>
    
        <style type="text/css">
    
    @media screen {
     body.order
     {height:100&#37;; margin:0px; color:#000000; background:#FFFFFF; width:100%; vertical-align: top;}
    }
    
    @media screen {
    #document                                       {width:100%; height:67%; overflow:auto; overflow-x:hidden; border-top:0px; margin-top: 0px; padding: 0px; }
    }
    
    .document-header                                                        {width:100%; margin: 0px; margin-left: 0px; padding: 0px; text-align:left; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:10px; }
    
    .header-basic, .header-itemdefault, .header-additional, .header-docflow 
                                                    {margin: 0px; padding: 0px; width: 100%;}
    
    .header-basic table.layout                      {margin: 0px; padding: 0px; width: 100%}
    .header-basic table.layout td.col1              {margin: 0px; padding: 0px; vertical-align: top;}
    .header-basic table.layout td.col2              {margin: 0px; padding: 0px; vertical-align: top; text-align: right;}
    
    .header-general                                 {margin: 1ex 0 0 0; padding: 0px;}
    .header-general td                              {margin: 0px; padding: 0px;}
    .header-general .identifier                     {text-align: left; width: 11em; vertical-align:middle; width:140px; word-wrap: normal;  border-collapse: collapse;  }
    .header-general .identifier-multiline           {width:11em; text-align:left; vertical-align:top;}
    .header-general .value                          {padding-left: 1px; vertical-align:middle;}
    .header-general img                             {border: 0px; width:16px; height:16px; vertical-align: -6%} /* for icons after select-boxes */
    .header-general .img-1                          {width:16px; height:16px; vertical-align: bottom;} /* for icons after input fields */
    .header-general .img-2                          {width:16px; height:16px; margin-top: -3px; margin-bottom: -10px; vertical-align: -25%} /* for icons after normal text */
    
    
    .price-info                                     {width: 25em; border-collapse:collapse; margin-top: 6px;}
    .price-info .separator                          {height:1px; border-top:1px solid #000000;}
    .price-info .identifier                         {width: 11em; text-align:left; vertical-align:middle; }
    .price-info .identifier-1                       {width: 11em; text-align:left; vertical-align:top; }
    .price-info .value                              {text-align:right; padding-left:2px; vertical-align:top; background-color: #CCCCCC;}
    .price-info .value-1                            {text-align:left; padding-left:2px; vertical-align:top; }
    .price-info td                                  {margin-top:0px; border:0px; padding:2px;}
    
    
    
    
        </style>
    
    
    </head>
    
        <body class="order">
        
        <div id="document"> <%-- level: sub1 --%>
        
        <div class="document-header"> <%-- level: sub2 --%>
            
            <div class="header-basic">  <%-- level: sub3 --%> 
            <table class="layout" border="0">
                <tr>
                    <td class="col1">
                              
                        <table class="header-general" summary="" border="0">
    
                            <tr>
                                <td class="identifier">
                                    <label for="customerNumber"> Your Reference</label>
                                </td>
                                <td class="value">   Some reference
                                </td>
                            </tr>
    
                            
                            <tr>
                                <td class="identifier">
                                
                                    <label for="poNumber">Your Description</label>
                                
                                </td>
                                <td class="value">
                                    Some description
                                </td>
                                            </tr>
    
                            <tr>
                                <td class="identifier">
                                    
                                        <label for="headerDescription"> Account number</label>
                                    
                                </td>
                                <td>
                                        
                                              111212
                                    
                                </td>
                            </tr>    
                                
                            <tr>
                                <td class="identifier">Account Name</td>
                                <td class="value">
                                    Account some name
                                </td>
                            </tr>
    
                
                
                        </table>
                        
                    </td>        
                
                    <td class="col2">              
                                    
                        <table class="price-info" summary="" border="0">
                            <tr>
                            
                                <td class="identifier" scope="row">Total Netprice</td>
                                <td class="value" >10000
                                </td>
                            
                            </tr>
                            <tr>
                            
                                <td class="identifier" scope="row">Freight</td>
                                <td class="value">10000</td>
                            
                            </tr>
                            <tr>
                            
                                <td class="identifier" scope="row">Taxes</td>
                                <td class="value">100</td>
                            
                            </tr>
                            
                            <tr>
                                <td colspan="2" class="separator"></td>
                            </tr>
                            <tr>
                                <td class="identifier" scope="row">Total Gross price</td>
                                <td class="value">10100</td>
                            </tr>
                            
                            <tr>
                                <td class="identifier-1" scope="row">Terms of Payment</td>
                                <td class="terms"> 3 days </td>
                            </tr>
                              
                        </table>
                        
                    </td>
                
                </tr>
            </table> <%-- class="layout"> --%>
            </div> <%-- class="header-basic"> --%>
            </div> <%-- class="header-header"> --%>
        </div>    <%-- class="document"> --%>
    
        </body>
    Last edited by Paul O'B; Oct 7, 2010 at 08:45. Reason: code tags added

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work in anything but IE6 and IE7. It doesn't work in IE8, IE9, Firefox, Opera, Chrome, Safari and so on.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,551
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Try this:

    Code:
    .price-info .separator {
        height:0;
        border-top:1px solid #000000;
        padding:0
    }
    .header-basic table.price-info{float:right}

  6. #6
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    It is working fine with the changes you have suggested.
    Many Thanks for your help.

    Abdul

  7. #7
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I have made changes as you suggested and it is working fine. However I have got another problem regarding the <div> tag (<div id="document">).
    I have attached the code below:

    Its height is defined as 15&#37;. The content of this tag is displayed in scroll bar as expected in IE6 and IE7.

    However if I try to run this code in IE8, the conetent is not displayed in scroll bar, as expected in IE6 or IE7.

    Could you please help me in solving this problem. I need the scroll bar to be displayed in IE8 also.

    Please find the code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="">
     <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>
            
        </title>
    
        <style type="text/css">
    
    @media screen {
     body.order
     {height:100%; margin:0px; color:#000000; background:#FFFFFF; width:100%; vertical-align: top;}
    }
    
    @media screen {
    #document                                       {width:100%; height:15%; overflow:auto; overflow-x:hidden; border-top:0px; margin-top: 0px; padding: 0px; }
    }
    
    .document-header                                                        {width:100%; margin: 0px; margin-left: 0px; padding: 0px; text-align:left; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:10px; }
    
    .header-basic, .header-itemdefault, .header-additional, .header-docflow 
                                                    {margin: 0px; padding: 0px; width: 100%;}
    
    .header-basic table.layout                      {margin: 0px; padding: 0px; width: 100%}
    .header-basic table.layout td.col1              {margin: 0px; padding: 0px; vertical-align: top;}
    .header-basic table.layout td.col2              {margin: 0px; padding: 0px; vertical-align: top; text-align: right;float:right;}
    
    .header-general                                 {margin: 1ex 0 0 0; padding: 0px;}
    .header-general td                              {margin: 0px; padding: 0px;}
    .header-general .identifier                     {text-align: left; width: 11em; vertical-align:middle; width:140px; word-wrap: normal;  border-collapse: collapse;  }
    .header-general .identifier-multiline           {width:11em; text-align:left; vertical-align:top;}
    .header-general .value                          {padding-left: 1px; vertical-align:middle;}
    .header-general img                             {border: 0px; width:16px; height:16px; vertical-align: -6%} /* for icons after select-boxes */
    .header-general .img-1                          {width:16px; height:16px; vertical-align: bottom;} /* for icons after input fields */
    .header-general .img-2                          {width:16px; height:16px; margin-top: -3px; margin-bottom: -10px; vertical-align: -25%} /* for icons after normal text */
    
    
    .price-info                                     {width: 25em; border-collapse:collapse; margin-top: 6px;}
    .price-info .separator                          {height:0px; border-top:1px solid #000000;padding:0px;}
    .price-info .identifier                         {width: 11em; text-align:left; vertical-align:middle; }
    .price-info .identifier-1                       {width: 11em; text-align:left; vertical-align:top; }
    .price-info .value                              {text-align:right; padding-left:2px; vertical-align:top; background-color: #CCCCCC;}
    .price-info .value-1                            {text-align:left; padding-left:2px; vertical-align:top; }
    .price-info td                                  {margin-top:0px; border:0px; padding:2px;}
    
    .document-items                                 {width:100%; margin-top:5px;}
    
    .itemlist                                       {width:100%; border:1px solid #CDCDCD; border-collapse:collapse; 
    margin-left:0px; margin-top:15px; padding:0px; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:10px;}
    .itemlist th                                    {background:#CCCCCC; border:1px solid #FFFFFF; text-align: center; 
    padding:3px 6px 6px 6px}
    .itemlist td                                    {border-style:solid; border-color:#CCCCCC; border-right:1px; border-left:0px; 
    border-bottom:0px; border-top:0px; vertical-align:middle; padding:3px; margin:0px;}
    .itemlist img                                   {width:51px; height:20px; border:0px}
    
    
    
        </style>
    
    
    </head>
    
        <body class="order">
        
        <div id="document"> <%-- level: sub1 --%>
        
        <div class="document-header"> <%-- level: sub2 --%>
            
            <div class="header-basic">  <%-- level: sub3 --%> 
            <table class="layout" border="0">
                <tr>
                    <td class="col1">
                              
                        <table class="header-general" summary="" border="0">
                            <tr>
                                <td class="identifier">
                                    <label for="customerNumber"> Your Reference</label>
                                </td>
                                <td class="value">   Some reference
                                </td>
                            </tr>
                            <tr>
                                <td class="identifier">
                                    <label for="poNumber">Your Description</label>
                                </td>
                                <td class="value">
                                    Some description
                                </td>
                            </tr>
    
                            <tr>
                                <td class="identifier">
                                        <label for="headerDescription"> Account number</label>
                                </td>
                                <td>
                                              111212
                                </td>
                            </tr>    
                            <tr>
                                <td class="identifier">Account Name</td>
                                <td class="value">
                                    Account some name
                                </td>
                            </tr>
              
                        </table>
                        
                    </td>        
                
                    <td class="col2">              
                        <table class="price-info" summary="" border="0">
                            <tr>
                                <td class="identifier" scope="row">Total Netprice</td>
                                <td class="value" >10000
                                </td>
                            </tr>
                            <tr>
                                <td class="identifier" scope="row">Freight</td>
                                <td class="value">10000</td>
                            </tr>
                            <tr>
                                <td class="identifier" scope="row">Taxes</td>
                                <td class="value">100</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="separator"></td>
                            </tr>
                            <tr>
                                <td class="identifier" scope="row">Total Gross price</td>
                                <td class="value">10100</td>
                            </tr>
                            
                            <tr>
                                <td class="identifier-1" scope="row">Terms of Payment</td>
                                <td class="terms"> 3 days </td>
                            </tr>
                        </table>
                    </td>
                </tr>
    
            </table> <%-- class="layout"> --%>
    
            </div> <%-- class="header-basic"> --%>
    
            </div> <%-- class="document-header"> --%>
    
    
    
    
        <div class="document-items"> 
           
                <table class="itemlist" >
                   <tr>
                    
                      <th class="item" scope="col">Number</th>
                      <th class="product" scope="col">Product Number</th>
                      <th class="qty" scope="col">Qunantity</th>
                
                      <th class="desc" scope="col">Product Name</th>
                    
                        <th class="ref-doc" scope="col">Contract</th>
                     
                        <th class="qty-avail" scope="col">Available</th>
                        <th class="date-on" scope="col">Date</th>
                          
                      <th class="price" scope="col">Price </td>
                           
                      <th class="delete" scope="col">DEl</th>
                   </tr>
                    
                    <tr>
                        <td> 1 </td>
                        <td> Name </td>
                        <td>300  </td>
                        <td> Product name </td>
                        <td>Contract  </td>
                        <td>25  </td>
                        <td> 09/10/2010 </td>
                        <td> 100  </td>
                        <td> N </td>
                        
                    </tr>
    
                </table>
    
    
    
        </div>    <%-- class="document"> --%>
    
        </body>
    Thanks in advance.
    Abdul Gafar
    Last edited by Paul O'B; Oct 10, 2010 at 05:06. Reason: code tags added

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,551
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you want percentage height to work then you need to base it on something known which means setting html and body both to height:100&#37;.

    Code:
    html,body{height:100%}

  9. #9
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hi Paul,

    It is working fine after making the changes suggested by you.

    Many Thanks for your help.

    -Abdul Gafar


Bookmarks

Posting Permissions

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