Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Vertically Centre a table in XHTML

Status
Not open for further replies.
CSUKNic

CSUKNic

Technical User
Feb 3, 2002
62
GB
Ok, I'm probably being thick, but I want to centre a table vertically on a page, that way I don't have to compensate for screen resolution differeces, however, in my continued attempt to remain XHTML compliant, I have realised I cannot use height or valign statements, so I tried to use CSS and DIV, below is my results. I cannot make this damn thing centre vertically, could somebody please point me in the direction of what I am doing wrong. Oh, and don't worry about the repetition, this is a menu in progress :)

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="TonicWeb"/>
<title>Rookery Manor Bridal - Menu Module</title>
<script language="JavaScript1.2" type="text/javascript"><!--

if (document.images) {
img1on = new Image
img1off = new Image
img1aon = new Image
img1aoff = new Image
img2on = new Image
img2off = new Image
img2aon = new Image
img2aoff = new Image
img3on = new Image
img3off = new Image
img3aon = new Image
img3aoff = new Image
img4on = new Image
img4off = new Image
img4aon = new Image
img4aoff = new Image
img5on = new Image
img5off = new Image
img5aon = new Image
img5aoff = new Image
img6on = new Image
img6off = new Image
img6aon = new Image
img6aoff = new Image



img1on.src = "weddings_top_hlt.gif"
img1off.src = "weddings_top.gif"

img2on.src = "wedcars_top_hlt.gif"
img2off.src = "wedcars_top.gif"
img2aon.src = "intro_wedcars.gif"
img2aoff.src = "intro_wedding2.gif"
img3on.src = "extra_top_hlt.gif"
img3off.src = "extra_top.gif"
img3aon.src = "intro_extras.gif"
img3aoff.src = "intro_wedding2.gif"
img4on.src = "wedenq_top_hlt.gif"
img4off.src = "wedenq_top.gif"
img4aon.src = "intro_wedenq.gif"
img4aoff.src = "intro_wedding2.gif"
img5on.src = "carenq_top_hlt.gif"
img5off.src = "carenq_top.gif"
img5aon.src = "intro_carenq.gif"
img5aoff.src = "intro_wedding2.gif"
img6on.src = "locate_top_hlt.gif"
img6off.src = "locate_top.gif"
img6aon.src = "intro_locate.gif"
img6aoff.src = "intro_wedding2.gif"




}
else {
img1on = ""
img1off = ""
img1aon = ""
img1aoff = ""
img2on = ""
img2off = ""
img2aon = ""
img2aoff = ""
img3on = ""
img3off = ""
img3aon = ""
img3aoff = ""
img4on = ""
img4off = ""
img4aon = ""
img4aoff = ""
img5on = ""
img5off = ""
img5aon = ""
img5aoff = ""
img6on = ""
img6off = ""
img6aon = ""
img6aoff = ""
}
function changePages(menu_frameURL,gown_frameURL,design_frameURL,body_frameURL) {
parent.menu_module.location.href = menu_frameURL;
parent.gown_name.location.href = gown_frameURL;
parent.designer_name.location.href = design_frameURL;
parent.main_body.location.href = body_frameURL;
}
window.onError=null;
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);

var is_mac = (agt.indexOf("mac")!=-1);

// --></script >
<style type="text/css">
div.verticentre {
height: 100%;
width: 100%;
vertical-align: baseline;
]
</style>
</head>
<body bgcolor="#FFFFFF" onload="parent.main_body.location.href = 'main_welcome.html'">

<div class="verticentre">

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr><td width="190"><img src="menu_title.gif" width="190" height="25" border="0" alt="Main Menu Title" id="menu_title" /></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_wedcars.html','info_wedcars.html','pic_show_wedcars.html')" onmouseover="document.wedcars.src=img2on.src, window.status='';return true" onmouseout="document.wedcars.src=img2off.src"><img src="wedcars_top.gif" width="190" height="20" border="0" alt="Wedding Limousines" name="wedcars" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_extras.html','info_extras.html','pic_show_extras.html')" onmouseover="document.extras.src=img3on.src, window.status='';return true" onmouseout="document.extras.src=img3off.src"><img src="extra_top.gif" width="190" height="20" border="0" alt="Extra Wedding Services" name="extras" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

<tr><td width="190"><a href="javascript:changePages('nav_bot_wedding.html','nav_top_locate.html','info_locate.html','pic_show_locate.html')" onmouseover="document.locate.src=img6on.src, window.status='';return true" onmouseout="document.locate.src=img6off.src"><img src="locate_top.gif" width="190" height="20" border="0" alt="How to Locate Rookery Manor" name="locate" /></a></td></tr>

</table>
</div>
</body>
</html>
 
Sort by date Sort by votes
Centering elements with CSS is not an easy task at the moment, though it can be done in standards compliant browsers. Mozilla and Opera should be satisfied with the code found here:


However, I have tried the 'IE' code from that site and it did not work with my IE6. This one however, did:


Hope it gave you some insight on how this is done.
 
Upvote 0 Downvote
in my continued attempt to remain XHTML compliant, I have realised I cannot use height or valign statements
Click to expand...
Why not? Both of those attributes are valid in a <td> when you're validating to XHTML1.0 Transitional, and the [tt]valign[/tt] attribute is valid for strict doctypes too.

It's not very fashionable, but I'd consider doing it with an old-style nested table until CSS support among browsers becomes more complete and consistent:
Code: 
<table border="0" height="100%" width="100%">
<tr><td valign="middle" align="center">
<div>
Put your centred content in here!
</div>
</td></tr></table>
You'll should find that validates as Transitional XHTML. If you replace [tt]height[/tt], [tt]width[/tt] and [tt]align[/tt] attributes with CSS equivalents it'll validate as Strict too.

-- Chris Hunt
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
825
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
789
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
238
Alt255
Alt255
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top