Jump to content

aligning tables in IE with CSS


brookwood
 Share

Recommended Posts

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...