brookwood Posted March 3, 2006 Share Posted March 3, 2006 I hope there is a quick answer to this (and likely there is). I am trying to align two tables, so one lies on top of the other, and get them both to align horizontally in the center of the page. It works fine in Firefox but IE aligns the first table ("main") centrally and then aligns the center of the second table ("menustrip") over the right-side edge of the first table. That may sound confusing. But here's a really simplified version of the code and you'll see:HTML:<html> <head> <link rel="stylesheet" href="first.css" type="text/css" media="screen"> </head> <body> <table id="main" border=0 cellpadding=0 cellspacing=0> <tr> <td id="one"> </td> <td id="two"> </td> <td id="three"> </td> </tr> </table> <table id="menustrip" border=0 cellpadding=0 cellspacing=0> <tr><td> </td></tr> </table> </body></html>CSS:body{background: gray;margin:0px;padding:0px;text-align:"center";}#main{margin:0px auto;text-align:left;height:100%;width:780px;}#one {width:25px; background:black;}#two {width:175px; background: #4B4B4B}#three {width:580px; background:black;}#menustrip{position:absolute;top:90px;background: white;margin:0px auto;height:10px;width:780px;}I do know I could make the second table be a part of the first table but due to how I would like to fill them, I would prefer to be able to use them as two separate tables if there is a way to make this work.I'm stumped. Any help is greatly appreciated. Link to comment Share on other sites More sharing options...
aspnetguy Posted March 3, 2006 Share Posted March 3, 2006 change #menustrip{position:absolute;top:90px;background: white;margin:0px auto;height:10px;width:780px;} to #menustrip{background: white;margin:0px auto;margin-top:90px;height:10px;width:780px;} it is your position:absolute that is messing it up, try doing it without that Link to comment Share on other sites More sharing options...
aspnetguy Posted March 3, 2006 Share Posted March 3, 2006 oops, sorry for the double post. Link to comment Share on other sites More sharing options...
brookwood Posted March 3, 2006 Author Share Posted March 3, 2006 Thanks for your help. Actually instead of:margin:0px auto;margin-top:90px;it should probably be:margin:90px auto 0px;don't you think? But I'm still doing something wrong because whichever of those I use, taking out the 'position:absolute,' I now get a 90px margin below the first table, not on the page in general. The darn things just don't want to overlap!! Link to comment Share on other sites More sharing options...
aspnetguy Posted March 3, 2006 Share Posted March 3, 2006 ok sorry...to get them to overlap you will have to use position absolute...I didn't understand that at first....try wrapping both tables in a div then set a width and put margin: 0 auto on the div. Remove maring: 0px auto from both tables.Also instead of absoute use position relative. You will have to adjust the 90px...it should be relative to the enclosing div not the whole page.That should work Link to comment Share on other sites More sharing options...
brookwood Posted March 3, 2006 Author Share Posted March 3, 2006 darn it, double posted myself! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now