Centering main area on the page

  • Thread starter Thread starter Dave Griffiths
  • Start date Start date
D

Dave Griffiths

Hi all

Using VB 2005

I am trying to recreate some existing pages made originally in Dreamweaver
to ASP.net. Now I am stuck at the first hurdle.
Original code using css

div.edges {
border-left: 2px solid #c7c7c7;
border-right: 2px solid #c7c7c7;
height: 600px;
width: 780px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body>
<div align="center">
<!-- Set Vertical Lines -->
<div class="edges">
</div>
</div>

Produced 2 vertical lines 780px wide centered on the page in IE6 / 7 and
Mozilla 2.0.0.3 between which I do my creation of art for the internet.

Using the same DOCTYPE I cannot get the same results from VB2005
Using a table or a Panel I can get the results with IE7 not tried IE6 but
not with Mozilla I just get a left aligned page. I have tried this with a
css stylesheet and inline styles.

This is a little disturbing that I cannot center the main area on the page
in all browsers.

Any ideas would be great.

Thanks

DaveG
 
This is a little disturbing that I cannot center the main area on the page
in all browsers.
Click to expand...

The problem is that you're not using XHTML-compliant markup. Despite what
some people will tell you, this is pretty much the only way to guarantee
that your pages will display correctly in all modern browsers.

Specifically in your case, you're using <div align="center">

The align property of the div tag is deprecated, and is not XHTML compliant.

Use this instead:

<div style="margin-left:auto;margin-right:auto;">
 
You could try using margin:auto; in the div style and that will force
it to align center.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style>
div.edges {border-left: 2px solid #c7c7c7;border-right: 2px solid
#c7c7c7;height: 600px;width: 780px;margin:auto;}
</style>
<body>

<div>
<!-- Set Vertical Lines -->
<div class="edges"></div>
</div>

</body>
</html>


deftone
 
Back
Top