Different appearance in IE

Hi,
Running the same project, in IE 9, there are extra parts highlighted in Red, and the line is much thicker (in Blue), shown in Fig 1.
But in Firefox, it is fine and line in blue, is thin, shown in Fig 2. why?

Here are the codes of the page
    <style type="text/css">
        .body {background-color:#1BA8E0;} 
        .lbstandard1
        {
        width: 36px;
        height: 30px;
        font-weight:bold;
        }    
        .lbstandard1:hover{background-color:#94858A;}
        .lbstandard2{
        color:#000!important;
        top: 30px;
        left: 1185px;
        width: 36px;
        height: 30px;
        font-size:large;
        font-weight:bold;
        }    
        .lbstandard2:hover{background-color:#94858A;}
        .left {
        position:absolute;
        left:10px;
        border:Groove 1px #ccc;
        width:300px;
        right:10px;
        }
         .modalBackground
        {
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        }
        .modalPopup
        {
            background-color: #FFFFFF;
            border-width: 3px;
            border-style: solid;
            border-color: black;
            padding-top: 10px;
            padding-left: 10px;
            width: 300px;
            height: 140px;
        }
         .right {
             position:absolute;
             left:330px;
             border:none 1px #c00;
             width:65%;
        }

        .up {
            top: 20px;
        }
        </style> 
        <script type="text/javascript" language="javascript">
            function closeMe() {
                var win = window.open("", "_self");
                win.close();
            }
        </script>
</head>
<body bgcolor="#1BA8E0">
    <form id="main_form" runat="server">
    <div >
    <table width="100%" align="right">
    <tr>
     <td align="right" style="background-color:#0A2757;height:1px;display:block;">&nbsp;</td>
    </tr>
        <tr>
        <td align="right">
            <asp:LinkButton ID="lb_bck" 
               Text = "Back"
               CssClass="lbstandard1"
               Font-Names="Times New Roman" 
               Forecolor="#0A2757"
               Font-Size="8pt" 
               OnClick="lb_bck_Click"
               runat="server"/>
               &nbsp;|&nbsp; 
            <asp:LinkButton ID="lb_edt" 
               Text = "Edit"
               CssClass="lbstandard1"
               Font-Names="Times New Roman" 
               Forecolor="#0A2757"
               Font-Size="8pt" 
               OnClick="lb_edt_Click"
               runat="server"/>
               &nbsp;|&nbsp; 
            <asp:LinkButton ID="lb_exit" 
               Text = "Exit"
               CssClass="lbstandard2"
               Forecolor="#0A2757"
               Font-Names="Times New Roman" 
               Font-Size="8pt" 
               OnClientClick="closeMe()" 
               runat="server"/>
        </td>
        </tr>
    </table>
    </div>
    <br />
    <br />
<div class="left up">
       <asp:Image ID="aspImagePreview" runat="server" AlternateText="Preview" Height="190px" Width="290px" ImageUrl="~/output.jpg" />
</div>
<div class="right up">
<div id="Dv1" style="text-align:left;background-color:#1BA8E0;">
...

Open in new window

t536.png
t537.png
LVL 12
HuaMin ChenProblem resolverAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jacques Bourgeois (James Burger)PresidentCommented:
Because different browsers interprets html in different ways. Welcome to the wonderful world of Web development. Interpretation of TD Height is one of these that offer the most challenge.

Many programmers creates many copies of the same page adapted for each browser. They detect the browser and send the appropriate copy.

Or you can try one of the many different tricks that you can find in http://www.bing.com/search?q=td%20height%20internet%20explorer&pc=conduit&ptag=A42FEB6B5123849F090F&form=CONBDF&conlogo=CT3210127&ShowAppsUI=1
0
HuaMin ChenProblem resolverAuthor Commented:
Thanks. How to avoid the problem with IE 9 or above in the above codes?
0
Julian HansenCommented:
There is a lot wrong with this code

Use of deprecated attributes is one

If you are coding a new page consider coding according to HTML5 and CSS3 standards - it will save you a lot of headaches.

In this case the difference in the line is caused by the style
display: block

Open in new window

On line 67

Block has no meaning to  <td> element and could be interpreted differently across different browsers.

In this case removing the display: block will result in both FF and IE showing a thicker line.

The reason your height: 1px is not taking effect is because you have a &nbsp; in the table cell which is rendering at the default font-size.

So, either remove the &nbsp; from the cell
OR
Add
font-size: 1px;

Open in new window

To the style to reduce the height of the rendered space
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.