Forum Moderators: not2easy

Message Too Old, No Replies

Can't center my table.

Im using a table in a div tag as a nav menu and I can' t get it to center.

         

Baxter30

10:54 pm on Jan 31, 2009 (gmt 0)

10+ Year Member



The navigational menu for my homepage consists of a table inside a div tag(to center the table on the page). This method works quite well in IE but in firefox I cannot find a way to center the table. Neither the align="center" atribute or style="text-align:center" work. Does anyone have any ideas.

My current code:

<head>
<style type="text/css">
div#menu {
margin-top:5px;
width:100%;
text-align:center
}

div#menu a {text-decoration:none}

#buttons {border-collapse:collapse}

#buttons td {
padding:0px;
text-align:center;
border:1px inset black
}

#buttons td img {border:0px}
</style>

<body>
<div id="menu">
<table id="buttons">
<tr>
<td><a href="symbol.html" onmouseover="menuOver('html')" onmouseout="menuOut('html')"><img src="pictures/htmloff.jpg" id="html" /></a></td>

<td><a href="css.html" onmouseover="menuOver('css')" onmouseout="menuOut('css')"><img src="pictures/cssoff.jpg" id="css" /></a></td>

<td><a href="bestr.html" onmouseover="menuOver('bestr')" onmouseout="menuOut('bestr')"><img src="pictures/bestroff.jpg" id="bestr" /></a></td>

<td><a href="work.html" onmouseover="menuOver('work')" onmouseout="menuOut('work')"><img src="pictures/workoff.jpg" id="work" /></a></td>

<td><a href="kill.html" onmouseover="menuOver('kill')" onmouseout="menuOut('kill')"><img src="pictures/killoff.jpg" id="kill" /></a></td>
</tr>
</table>
</body>
</html>

HELP

Baxter30

10:56 pm on Jan 31, 2009 (gmt 0)

10+ Year Member



and don't worry, in my page there is a </head> tag under </style>.

birdbrain

10:49 am on Feb 1, 2009 (gmt 0)



Hi there Baxter30,

you should not be using tables for page layout. Their purpose is the display of tabular data.


I would also suggest that you use a CSS rollover instead of javascript.
Somewhere between 5 and 10% of users may have it disabled.

As for your problem, try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#buttons {
border-collapse:collapse;
margin:5px auto 0;
}
#buttons td {
padding:0;
border:1px inset #000;
}
#buttons td img {
border:0;
display:block;
}
</style>

</head>
<body>

<table id="buttons"><tr>
<td><a href="symbol.html" onmouseover="menuOver('html')" onmouseout="menuOut('html')">
<img src="pictures/htmloff.jpg" id="html" alt=""></a></td>

<td><a href="css.html" onmouseover="menuOver('css')" onmouseout="menuOut('css')">
<img src="pictures/cssoff.jpg" id="css" alt=""></a></td>

<td><a href="bestr.html" onmouseover="menuOver('bestr')" onmouseout="menuOut('bestr')">
<img src="pictures/bestroff.jpg" id="bestr" alt=""></a></td>

<td><a href="work.html" onmouseover="menuOver('work')" onmouseout="menuOut('work')">
<img src="pictures/workoff.jpg" id="work" alt=""></a></td>

<td><a href="kill.html" onmouseover="menuOver('kill')" onmouseout="menuOut('kill')">
<img src="pictures/killoff.jpg" id="kill" alt=""></a></td>
</tr></table>

</body>
</html>


birdbrain