CODEWITHSUNDEEP
htmlcsshtml-table
Dev Newb
Dev Newb

Reputation: 565

CSS Header Alignment

I just can't seem to get my header to line up correctly. I'm the closest I can get in internet explorer with the below code but it looks terrible in Firefox. I've tried everything I could read on every forum and the more I play with it, it only looks worse. All I want is header.png to spread across the page and that works fine. Then I want a centered header with formtop.png as background and that works fine. Now inside that header I want logo.png to be to the bottom left of the header div and my fireworks menu table to be to the bottom right. In IE everything lines up except the menu table has some space between itself and the very bottom of the div. In Firefox nothing lines up at all. I suspect because of the absolute and relative settings. Everything I want inside my header div ends up at the top left in Firefox. But playing with the absolute and relative attributes blows everything up in IE. Can someone help or point me to a basic tutorial that shows how to line up a header div that applies to most browsers? 

</head>
    <body style="text-align:center; margin:0; padding:0;">
    <div  style="width:100%; height:100px; background-image:url(header.png);position:relative;">
      <div>
        <div style="height:100%; width:100%; background-image:url(formtop.png); background-repeat:no-repeat; background-position:center; left:0; bottom:0; position: absolute;">
          <div style="width:920px; position:relative;">
            <div><img name="n12" src="logo.png" border="0" alt="" align="left"></div>
            <div style="padding-top:10px; float:right; padding-right:30px; position:absolute; bottom:0;">
              <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="400">
                <!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="navbar.png" fwstyle="Dreamweaver" fwdocid = "1979268284" fwnested="0" -->
                <tr>
                  <td><img src="images/NavBar/spacer.gif" width="124" height="1" border="0" alt="" /></td>
                  <td><img src="images/NavBar/spacer.gif" width="139" height="1" border="0" alt="" /></td>
                  <td><img src="images/NavBar/spacer.gif" width="137" height="1" border="0" alt="" /></td>
                  <td><img src="images/NavBar/spacer.gif" width="1" height="1" border="0" alt="" /></td>
                </tr>
                <tr>
                  <td><img name="navbar_r1_c1_s1" src="images/NavBar/navbar_r1_c1_s1.png" width="124" height="50" border="0" id="navbar_r1_c1_s1" alt="" /></td>
                  <td><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('navbar_r1_c2_s1','','images/NavBar/navbar_r1_c2_s2.png',1);"><img name="navbar_r1_c2_s1" src="images/NavBar/navbar_r1_c2_s1.png" width="139" height="50" border="0" id="navbar_r1_c2_s1" alt="" /></a></td>
                  <td><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('navbar_r1_c3_s1','','images/NavBar/navbar_r1_c3_s3.png',1);"><img name="navbar_r1_c3_s1" src="images/NavBar/navbar_r1_c3_s1.png" width="137" height="50" border="0" id="navbar_r1_c3_s1" alt="" /></a></td>
                  <td><img src="images/NavBar/spacer.gif" width="1" height="50" border="0" alt="" /></td>
                </tr>
              </table>
            </div>
            <br/>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div>

Upvotes: 1

Views: 771

Answers (2)

tnbeatty
tnbeatty

Reputation: 315

Even more concise:

margin: 0px auto;

It would be very helpful to see a published site, though, as nmagerko said.

Upvotes: 2

Emmanuel N
Emmanuel N

Reputation: 7449

To center align in in forefox use margin in addition to text-align: center

Something like:

 margin-left: auto;
 margin-right: auto;

Upvotes: 0

Related Questions