0

I am trying to center a table and know I need to use <div class=''></div>. Here's my problem: I have a menu that was written in JavaScript and is using <div style=''></div> for placement. I would like to center the table, but am finding it a "hard row to hoe!" Any suggestions?

<div style="position: absolute; top: 10px; height: 27px; z-index: 1;" id="mainmenu" >
<table border='1'width='80%'>
<tr>
<td bgcolor='#0099FF' height='6.75'></td>
<td bgcolor='#333399' height='6.75'></td>
<td bgcolor='#CCCCCC' height='6.75'></td>
<td bgcolor='#0099FF' height='6.75'></td>
<td bgcolor='#333399' height='6.75'></td>
</tr>

<tr>
<td width='100' style='text-align:center;'><a class="menu" href="javascript:void" onclick="window.location.href='aboutUs.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','inherit','visibility','show')"><span class="font">About Us</span></a></td>

<td width='100' style='text-align:center;' ><a class="menu" href="javascript:void" onclick="window.location.href='news.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','visible','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','visible','visibility','show')"><span class="font">News</span></a></td>

<td width='100' style='text-align:center;'><a class="menu" href="javascript:void" onclick="window.location.href='qstatim.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','visible','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','visible','visibility','show')"><span class="font">QStatim</span></a></td>

<td width='100' style='text-align:center;'><a class="menu" href="javascript:void" onclick="window.location.href='partners.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','inherit','visibility','show')"><span class="font">Partners</span></a></td>

<td width='100' style="text-align:center;"><a class="menu" href="javascript:void" onclick="window.location.href='contactUs.htm';return false;"
onmouseover="FP_changeProp(/*id*/'leaf1',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf2',0,'style.visibility','hidden','visibility','hide');
FP_changeProp(/*id*/'leaf3',0,'style.visibility','hidden','visibility','show');
FP_changeProp(/*id*/'leaf4',0,'style.visibility','hidden','visibility','hide'); FP_changeProp(/*id*/'menubg',0,'style.visibility','visible','visibility','show')"><span class="font">Contact Us</span></a></td>
</tr>

</table>
</div>


Thanks!!!

2
Contributors
5
Replies
6
Views
12 Years
Discussion Span
Last Post by tgreer
0

What doctype are you using? Without a doctype, you'll have different behaviors in different browsers.

Try adding "margin: auto;" to your div's inline style declaration.

0

Sorry about not responding sooner. My wife and I just had our first baby...May 27th.

I tried "margin:auto", but that did not work either.

0

Congrats!

The margin statement should be:

margin: 0 auto;

As that sets the top margin to 0, and the left/right to "auto", which centers the control, relative to any containing elements.

So my point is, "margin: 0 auto" is the proper way to center things in CSS, and if things aren't centering, look to see how you're nesting your controls.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.