SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Des Moines, IA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Site centers in IE, but not FireFox - HELP!

    I have a web site called Theater Hopper (http://www.theaterhopper.com) that I am trying to pull out of tables and into <div> tags and css. I have one glaring problem that probably has a very obvious solution. I'm trying to center my design in the browser. It works fine in IE (although that's not saying much), but what I really want it to do is center in FireFox. I figure if I can get the site to look the way I want it to in FireFox, the other browsers will be a cake walk.

    For an example of what I'm seeing in FireFox, go here:
    http://theaterhopper.com/index3.php

    In the style sheet body tag, I've tried everything from text-align: center; to margin: 0; to margin-auto... everything I can think of.

    Does anyone have suggestions?

  2. #2
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Nacogdoches, Texas
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this should help explain why this happens (and a way to fix it):

    http://bluerobot.com/web/css/center1.html
    Jason

  3. #3
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no attribute that you can set on its own to centre a div (except in IE which is a convenient bug)
    These articles should help:
    http://bluerobot.com/web/css/center1.html
    or
    http://bluerobot.com/web/css/center2.html

  4. #4
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL Talk about pipped at the post, literally

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Don't forget my FAQ sticky thread here on sitepoint - we don't want to send people too far do we

  6. #6
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Nacogdoches, Texas
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad you agree with me jfitz
    Jason

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paul's FAQ has got the solution

    Hi, just follow this link and you'll get the solution:

    http://www.pmob.co.uk/faqcss/index.htm#faq4

    Ramiro

  8. #8
    SitePoint Member
    Join Date
    Aug 2004
    Location
    West Des Moines, IA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Handsome solution!

    Thanks to everyone for the quick replies!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I always like to give an example as well rather than a link so here's one

    As you already have text-align:center in the body then your page will center in ie but you need to margin-left:auto and margin-right auto on a container with specified width in order to centre in compliant browsers.

    As you already had an unused class called "all" I've used that and changed it to an id as it will be unique.

    This wraps up all the content you want centred and will therefore centre it all.
    CSS:
    Code:
    body { 
      background: url(images/background3.gif);
     font: 13px/1.5em "Verdana", Arial, Helvetica, sans-serif;
     color: #fff;
    	vertical-align: top; 
    	margin: 0px; 
    	padding: 0px; 
    	border: 0px none;
     text-align: center;/*center for ie5 and 5.5. and */
    }
    #all {
     width: 760px;
     margin-left:auto;/*center for compliant browsers */
     margin-right:auto;/*center for compliant browsers */
    }
    
    html:
    Code:
    </head>
    <body>
    <div id="all"> 
      <div id="top"> 
    	<div class="logo"><a href="http://www.theaterhopper.com"><img src="images/logo_clear2.gif" alt="Home" width="262" height="92" border="0"></img></a></div>
    etc..all the rest of page until here......................
    ................................
    </div>
    <br></br>
    <strong><em>CONVENTION REPORT!</em></strong><br>
    Hopefuly, if you followed the instructions you will have a centred page. You could have just centred each element and avoided using a whole page wrapper but the technique is the same.

    Hope that helps.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •