Layout compatibility issues in asp?

Hi

I wonder if anyone can help me. Why does the <table> in the code below render left justified in the <div> rather than in the centre where I would have expected.

This views as expected in IE7 compatibility mode but not in any other browser.

Here's hoping...

stubar
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!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 runat="server">
    <title></title>
    <style type="text/css">
      .newStyle1
      {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: x-small;
        background-color: #008000;
      }
    </style>
</head>
<body>
  <form runat="server">
  <div class="newStyle1">
    <asp:Table ID="Table1" runat="server">
      <asp:TableRow runat="server">
        <asp:TableCell runat="server">a, a</asp:TableCell>
        <asp:TableCell runat="server">a, b</asp:TableCell>
      </asp:TableRow>
      <asp:TableRow runat="server">
        <asp:TableCell runat="server">b, a</asp:TableCell>
        <asp:TableCell runat="server">b, b</asp:TableCell>
      </asp:TableRow>
    </asp:Table>
  </div>
  </form>
</body>
</html>

Open in new window

LVL 1
stuartbarberAsked:
Who is Participating?
 
David S.Connect With a Mentor Commented:
text-align:center is only supposed to center text and inline content, not block-level content (except when applied to a table-cell). IE5-7 tend to handle that incorrectly.

The solution is to give the table auto left and right margins:
.newStyle1 table {
  margin: 0 auto; /* top/bottom right/left */
}

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperCommented:
Got this for you.
IE6,  IE7, Firefox 3.0.9

Carrzkiss
<!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 runat="server">
    <title></title>
    <style type="text/css">
      .newStyle1
      {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: x-small;
        background-color: #008000;
      }
	  .newStyle1{
        text-align: -moz-center; 
        font-family: Arial, Helvetica, sans-serif;
        font-size: x-small;
        background-color: #008000;
} 
 
    </style>
</head>
<body>
  <form runat="server">
  <div class="newStyle1">
    <asp:Table ID="Table1" runat="server">
      <asp:TableRow runat="server">
        <asp:TableCell runat="server">a, a</asp:TableCell>
        <asp:TableCell runat="server">a, b</asp:TableCell>
      </asp:TableRow>
      <asp:TableRow runat="server">
        <asp:TableCell runat="server">b, a</asp:TableCell>
        <asp:TableCell runat="server">b, b</asp:TableCell>
      </asp:TableRow>
    </asp:Table>
  </div>
  </form>
</body>
</html>

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperCommented:
Does not work in Opera 9.64
Safari 3.2.1

I have done a lot of research, and cannot find any good resources.

Will check back later on this issue.
(It is a Div Tag Issue that is causing the problem. Table would not have this effect/issue
But, not sure that you want to convert over to Tables...)

Carrzkiss
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.