Table centering using <div class=''></div>

[venetianjigsaw]

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!!!

 

[BillyRayPreachersSon]

I've not tested this, but give it a whirl anyway. Change this:

<div style="position: absolute; top: 10px; height: 27px; z-index: 1;" id="mainmenu" >
<table border='1'width='80%'>

to this:

<div style="position:absolute; top:10px; height:27px; z-index:1; width:80%; margin:0px auto 0px auto;" id="mainmenu">
<table border="1" width="100%">

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[venetianjigsaw]

Thanks Dan...that seemed to do the trick. One additional question: I am having trouble centering my menu field titles. They do center when the width is reduced. However, I have tried using <div class=''></div>, style='text-align:center', and any other centering technique that I can think of...nothing seems to work. Also, I even used images in place of the text, but still ended up with the same result. Any clues or advice that you can provide would be great!

Thanks

 

[BillyRayPreachersSon]

Well - you have the width set to 100, so it will only center within that width.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tsdragon]

According to one source I found, margin:auto only works in strict mode, not in quirks mode (at least for IE6):

http://www.quirksmode.org/css/modes/marginauto_strict.html

I also found a method to make margin:auto work in IE5.x and IE6 in quirks mode here:

http://13thparallel.org/archive/margin-fix/

I also found this quote: "When centering an div using margin:auto, in Netscape 6+, if you reduce the screen width to less than the width of the div, you get a negative margin on the left hand side of the screen."

The fix is to add a min-width to the div.



Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[venetianjigsaw]

tsdragon,

I used the links and tried your recommendations, but unfortunately, this is not the fix. Thanks for your assistance. I'll keep pluggin' along and hopefully, I'll get this straightened out.

Thanks