SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Safari or Firefox? I want both!

    I am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them.

    EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

    When I do this, it is centered on Firefox:
    Code:
    <style type="text/css">
    <!--
    body {
    	background-image: url(background.gif);
    	background-repeat: repeat-x;
    	background-attachment:fixed;
    	background-color: #000000;
    }
    #toptable {
    	position: fixed;
    	top: 0;
    	height: 140px;
    	bottom: auto;
    	z-index: 2;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #encapsule {
    	margin-left: auto;
    	margin-right: auto;
    	}
    
    #centered
    {
    text-align: center;
    }
    
    #centered table
    {
    margin: 0 auto;
    text-align: auto;
    }
    
    
    #bottable {
    	position: relative;
    	margin-left: auto;
    	margin-right: auto;
    	top: 140px;
    	z-index:1;
    }
    -->
    </style></head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div align="centered" id="encapsule">
    <table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
      <tr>
        <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
          <tr>
            <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
                <tr>
                  <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
                  <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
                </tr>
                <tr>
                  <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
                  <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
                  <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
                  <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
                  <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
                  <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
                </tr>
                <tr>
                  <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
                </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
    </table> </div>
    When I do the following, it centers it on Safari:
    Code:
    <style type="text/css">
    <!--
    body {
    	background-image: url(background.gif);
    	background-repeat: repeat-x;
    	background-attachment:fixed;
    	background-color: #000000;
    }
    #toptable {
    	position: fixed;
    	top: 0;
    	height: 140px;
    	bottom: auto;
    	z-index: 2;
    }
    #encase {
    	position: relative;
    	margin-left: auto;
    	margin-right: auto;
    }
    #bottable {
    	position: relative;
    	margin-left: auto;
    	margin-right: auto;
    	top: 140px;
    	z-index:1;
    }
    -->
    </style></head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
      <tr>
        <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
          <tr>
            <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
                <tr>
                  <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
                  <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
                </tr>
                <tr>
                  <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
                  <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
                  <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
                  <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
                  <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
                  <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
                </tr>
                <tr>
                  <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
                  <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
                </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
    </table>
    Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks!

    EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by impulse29
    I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well.
    None of the browsers follow the rules with CSS. None. Don't need to single out IE here. Don't know what you mean by a "plain version" -- there should only be one "version" of your site.

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Grossman
    None of the browsers follow the rules with CSS. None. Don't need to single out IE here. Don't know what you mean by a "plain version" -- there should only be one "version" of your site.
    That's quite disturbing and annoying to hear that none of them follow correct rules. However, with my experience, IE has had the worst (or most unique) among the other browsers I have tried. My plain version is just the stationary background, and the banner goes up with the text. It is available at www.ihelpnyc.com/dave/index2.html .

    Is there anything I can do to center the top banner for both safari and firefox type browsers?

  4. #4


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
  •