Member Avatar for venetian_jigsaw

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
  • 233 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by tgreer
Member Avatar for tgreer

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.

Member Avatar for tgreer

So did adding "margin: auto", fix things for you, or do you still need help?

Member Avatar for venetian_jigsaw

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.

Member Avatar for tgreer

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.