Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 460
  • Last Modified:

css web page shows centered in Firefox but left justified in IE

The web page at: http://s257639703.onlinehome.us/test/test.html

shows centered, as I want, in Firefox, but left justified in IE.
0
glenn_1984
Asked:
glenn_1984
1 Solution
 
Jason C. LevineNo oneCommented:
Try changing the CSS for centered_div to:

#centered_div {
        position: relative;
        margin: auto;
        width: 780px;
        z-index: 0;
}

or

#centered_div {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        width: 780px;
        z-index: 0;
}
0
 
yessirnosirCommented:
I think you are missing your page header

<!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">
0
 
yessirnosirCommented:
and your closing <html> tag seems to have disappeared too... looks like a template problem.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
scrathcyboyCommented:
I think the lacking head-end is because the template plugs into a larger HTML framework, I would guess.

TO center everything, place a containing DIV around all elements on the page and give it --
<BODY><DIV align="center">  all the rest of your code here </DIV></BODY>

or if there is no absolute positioning in the document, just use the HTML <CENTER> tag after the body.
0
 
glenn_1984Author Commented:
Found it.
There was an open comment <!-- on line 10.
Removed that and it all worked.
0
 
yessirnosirCommented:
I'm confused....the page you referenced at the start of the post doesn't have any open comment on line 10!  Maybe line 10 of the template?   The page http://s257639703.onlinehome.us/test/test.html still appears on the left in ie, and that is solved by adding a <DOCTYPE> header.
0
 
glenn_1984Author Commented:
Whoops...sorry about that.  My reply was to a different post.
scratchyboy...your solution seemed to do it.

0
 
yessirnosirCommented:
Glenn, you still need to fix your missing DOCTYPE otherwise you'll get into more strange behavior down the road when IE or another browser doesn't know how to interpret other parts of your document.   scratchyboy's solution works, but recognize what it is:  a workaround that shouldn't have been required at all.  The missing DOCTYPE has cause IE to misunderstand the stylesheet, so you have ended up adding a second DIV to center your page when you already had one.  If you just put a DOCTYPE statement in your file, then IE will understand the styles, and the centering action in the <centered_div> style will work.  If you don't believe me, have a look at the attached code, which is your current page, just downloaded from your site, with a DOCTYPE added and the <DIV align="center"> removed.  Test it out.  It centers properly in both Firefox and IE.  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 
<title>Huntington Bicycle Club</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0; padding 0;}
 
#centered_div {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        width: 780px;
        z-index: 0;
}
#main {
	position:absolute;
	width:468px;
	height:468px;
	z-index:6;
	left: 268px;
	top: 252px;
	text-align:center;
}
#menu {
	position:absolute;
	width:600px;
	height:28px;
	z-index:5;
	left: 7px;
	top: 164px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
        }
#photos {
	position:absolute;
	width:200px;
	height:510px;
	z-index:4;
	left: 21px;
	top: 211px;
        }
#footer {
        position:absolute;
        width:780px;
        height:49px;
        z-index:3;
        left: 0px;
        top: 752px;
        }
</style>
 
 
<link href="hbc.css" rel="stylesheet" type="text/css" />
 
<link href="hbc.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style9 {font-size: small}
-->
</style>
</head>
<BODY>
  
<div id="centered_div">
 
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
    
    <tr>
      <td><img src="images/layout/spacer.gif" width="196" height="1" border="0" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="167" height="1" border="0" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="180" height="1" border="0" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="6" height="1" border="0" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="11" height="1" border="0" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="220" height="1" border="0" alt="" /></td>
 
      <td><img src="images/layout/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr>
      <td rowspan="3"><img name="master_r1_c1" src="images/layout/master_r1_c1.jpg" width="196" height="297" border="0" id="master_r1_c1" alt="" /></td>
      <td rowspan="3"><img name="master_r1_c2" src="images/layout/master_r1_c2.jpg" width="167" height="297" border="0" id="master_r1_c2" alt="" /></td>
      <td colspan="3"><img name="master_r1_c3" src="images/layout/master_r1_c3.jpg" width="197" height="225" border="0" id="master_r1_c3" alt="" /></td>
      <td><img name="master_r1_c6" src="images/layout/master_r1_c6.jpg" width="220" height="225" border="0" id="master_r1_c6" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="1" height="225" border="0" alt="" /></td>
    </tr>
 
    <tr>
      <td rowspan="6" colspan="2"><img name="master_r2_c3" src="images/layout/master_r2_c3.jpg" width="186" height="354" border="0" id="master_r2_c3" alt="" /></td>
      <td colspan="2"><img name="master_r2_c5" src="images/layout/master_r2_c5.jpg" width="231" height="1" border="0" id="master_r2_c5" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr>
      <td rowspan="6" colspan="2"><img name="master_r3_c5" src="images/layout/master_r3_c5.jpg" width="231" height="362" border="0" id="master_r3_c5" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="1" height="71" border="0" alt="" /></td>
    </tr>
 
    <tr>
      <td rowspan="2"><img name="master_r4_c1" src="images/layout/master_r4_c1.jpg" width="196" height="239" border="0" id="master_r4_c1" alt="" /></td>
      <td rowspan="3"><img name="master_r4_c2" src="images/layout/master_r4_c2.jpg" width="167" height="246" border="0" id="master_r4_c2" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="1" height="5" border="0" alt="" /></td>
    </tr>
    <tr>
      <td><img src="images/layout/spacer.gif" width="1" height="234" border="0" alt="" /></td>
    </tr>
    <tr>
 
      <td rowspan="5"><img name="master_r6_c1" src="images/layout/master_r6_c1.jpg" width="196" height="264" border="0" id="master_r6_c1" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="1" height="7" border="0" alt="" /></td>
    </tr>
    <tr>
      <td rowspan="4"><img name="master_r7_c2" src="images/layout/master_r7_c2.jpg" width="167" height="257" border="0" id="master_r7_c2" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="1" height="36" border="0" alt="" /></td>
    </tr>
    <tr>
      <td rowspan="3"><img name="master_r8_c3" src="images/layout/master_r8_c3.jpg" width="180" height="221" border="0" id="master_r8_c3" alt="" /></td>
 
      <td><img name="master_r8_c4" src="images/layout/master_r8_c4.jpg" width="6" height="9" border="0" id="master_r8_c4" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="1" height="9" border="0" alt="" /></td>
    </tr>
    <tr>
      <td rowspan="2" colspan="3"><img name="master_r9_c4" src="images/layout/master_r9_c4.jpg" width="237" height="212" border="0" id="master_r9_c4" alt="" /></td>
      <td><img src="images/layout/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>
    <tr>
      <td><img src="images/layout/spacer.gif" width="1" height="211" border="0" alt="" /></td>
    </tr>
  </table>
 
  <div id="main">
    <div align="left">test 2</div>
    <p align="left" class="smallheadlinered">&nbsp;</p>
 
      <p align="left" class="smallheadlinered">&nbsp;</p>
      <p align="left" class="smallheadlinered">&nbsp;</p>
  </div>
  <div class="footermenu" id="footer">
    <div align="center"><span class="style9">Copyright, Huntington Bicycle Site &copy;, 2008, All Rights Reserved</span><br>
    <span class="style3">web design by <a href="http://www.thebicyclesite.com" target="_blank">The Bicycle Site</a> &amp; <a href="http://www.websbyaci.com" target="_blank">Webs By ACI</a></span></div>
  </div>
  <div id="menu">
  <SCRIPT SRC="topmenu.js"></SCRIPT>
<NOSCRIPT><FONT COLOR=#800000><a href="http://www.selteco.com">Home</a>&nbsp;|&nbsp;<a href="">Rides</a>&nbsp;|&nbsp;<a href="">HBC Forum</a>&nbsp;|&nbsp;<a href="">The Blog</a>&nbsp;|&nbsp;<a href="aboutus.html">About Us</a>&nbsp;|&nbsp;<a href="goldcoast.html">Gold Coast 2009</a></FONT></NOSCRIPT>
  </div>
  <div id="photos">test 1
    <p>&nbsp;</p>
    <p> </p>
  </div>
</div>
</BODY>
</html>

Open in new window

0
 
glenn_1984Author Commented:
Thanks yessirnosir, I thought I had already.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now