?
Solved

Layout compatibility issues in asp?

Posted on 2009-04-28
3
Medium Priority
?
505 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:stuartbarber
  • 2
3 Comments
 
LVL 31

Expert Comment

by:Wayne Barron
ID: 24256789
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
 
LVL 31

Expert Comment

by:Wayne Barron
ID: 24256865
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
 
LVL 43

Accepted Solution

by:
David S. earned 500 total points
ID: 24257069
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month16 days, 6 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question