Solved

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

Posted on 2008-09-30
9
442 Views
Last Modified: 2012-05-05
The web page at: http://s257639703.onlinehome.us/test/test.html

shows centered, as I want, in Firefox, but left justified in IE.
0
Comment
Question by:glenn_1984
9 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 22607528
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
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22607556
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
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22607564
and your closing <html> tag seems to have disappeared too... looks like a template problem.
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22610976
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 16

Author Comment

by:glenn_1984
ID: 22614791
Found it.
There was an open comment <!-- on line 10.
Removed that and it all worked.
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22614992
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
 
LVL 16

Author Comment

by:glenn_1984
ID: 22618906
Whoops...sorry about that.  My reply was to a different post.
scratchyboy...your solution seemed to do it.

0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22619328
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
 
LVL 16

Author Comment

by:glenn_1984
ID: 22628001
Thanks yessirnosir, I thought I had already.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now