W3 validator states that i shouldn't use <div align="center">
can you suggest an alternative for centralising the body table
CSS Codes
Junior Coders
<div align="center"> in css
W3 validator states that i shouldn't use <div align="center">
can you suggest an alternative for centralising the body table
Elite Coders
Hi there biomike,
you should use the CSS attribute margin:auto;.
Note that you must also use a full DOCTYPE as IE will not render margin-auto when in Quirks Mode.
coothead
Junior Coders
can't seem to get it to happen.
here's some of the code
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <link rel="alternate" type="application/rss+xml" title="The Bioenergy Healing Clinic RSS" href="/rsstest.rss"> <link rel="shortcut icon" href="/images/bioicon2.ico"> <meta name="robots" content="noodp,noydir"> <title>Welcome to The Bioenergy Healing Clinic - The Official Website</title> <meta name="description" content="Michael Cohen, founder of the Bioenergy Healing Research Foundation is an acknowledged expert in the field of Bioenergy Healing. His Bioenergy Healing Clinic in London W1 specialises in treating debilitating, difficult and long-term symptoms."> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta http-equiv="Content-language" content="en"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <style type="text/css"> td { vertical-align: top; } .midaline, .specialeffects { vertical-align: middle; } a:hover { color: #f60; font: bold 10pt arial, helvetica, sans-serif; } .specialeffects a, .specialeffects a:active, .specialeffects a:visited { text-decoration: none; color: #fff; font: bold 10pt arial, helvetica, sans-serif; } .specialeffects a:hover { color: #f60; } .content input { font-family: arial, helvetica, sans-serif; font-size: 8pt; } .body{ margin:auto; } <!-- a {text-decoration: none; } --> <style> </style> </head> <body bgcolor="#EC4D00" text="#000000" link="#47637A" vlink="#47637A" alink="#EC4D00"> <font class="content"> <table style="border: 1px solid #000000; margin-left: 0; margin-right: 0" width="590" height="95" bgcolor="#CCCCCC" background="images/iStock_neuron4.jpg" border="0"> <tr> <td width="580" height="91" background="file:///C:/Documents%20and%20Settings/Michael/My%20Documents/bioenergy/artwork/website/bioenergyhealing/images/case_notes_background.jpg" style="margin-left: 0; margin-right: 0"> <font class="content"> <table border="0" width="600" height="662" bordercolor="#000000"> <tr> <td width="100%" height="656" bordercolor="#CCCCCC" bordercolorlight="#CCCCCC" bordercolordark="#CCCCCC"> <div align="center"> <table border="0" width="96%" bordercolor="#CCCCCC" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" height="115"> <tr> <td width="100%" bordercolor="#FFFFFF" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" height="1" valign="middle" align="center"><font face="Arial"><img border="0" src="images/topplusheader_logo13.jpg" width="966" height="97"></font></td> </tr> <tr> <td width="100%" bordercolor="#FFFFFF" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" valign="middle" align="center" height="45"> <form method="GET" action="http://www.google.co.uk/search"> <table style="background-color: #47637A; height: 39px; border: 1px solid #000" width="966"> <tr> <td class="specialeffects" width="708" height="35"> <a href="index.htm"> home</a> <a href="#">about us</a> <a href="#">treatment</a> <a href="#"> training</a> <a href="#"> research</a> <a href="#"> media room</a> <a href="#">case histories</a> <a href="#"> contact</a> <a href="#"> faq</a> <a href="#"> ...more</a> </td> <td width="175" class="midaline" height="35"><!-- SiteSearch Google --> <input type="hidden" name="sitesearch" value="http://www.bioenergyhealing.org.uk"> <input type="hidden" name="ie" value="UTF-8"><input type="hidden" name="oe" value="UTF-8"> <div align="center"> <table bgcolor="#47637A"> <tr> <td class="content"> <input type="text" name="q" size="18" maxlength="255" value="Search our website"> <input type="submit" name="btnG" VALUE="Go"> <input type="hidden" name="domains" value="http://www.bioenergyhealing.org.uk"> </td> </tr> </table> </div> </td> <td width="61" class="midaline" height="35"><font face="Arial"><img border="1" src="images/nhs_approved3_red.jpg" width="56" height="31"></font> </td> </tr> </table> </form> </td> </tr> </table> </div> <table border="0" width="100%"> <tr> <td width="22%"> <p style="margin-top: 0; margin-bottom: 0" align="left"><font face="Arial"><a href="forward.htm"><img border="0" src="images/email_friend2_red3.jpg" width="29" height="19" alt="Send page to friend" title="Send page to friend"></a> <a href="index_printer.htm"> <img border="0" src="images/Printer3.jpg" width="26" height="19" alt="Printer friendly page" title="Printer friendly page"> </a> <a href="http://visitor.constantcontact.com/d.jsp?m=1102254342793&p=oi"> <img border="0" src="images/newsletter_red4.jpg" width="32" height="19" alt="Subscribe to FREE Newsletter" title="Subscribe to FREE Newsletter"> </a> <a href="rsstest.rss"> <img border="0" src="images/rss2.jpg" width="23" height="19" alt="RSS Feed" title="RSS Feed"> </a> <img border="0" src="images/sitemap_red3.jpg" width="40" height="19"> </font> <td width="60%"> <p align="right" style="margin-top: 0; margin-bottom: 0"></p> </td> <td width="18%" align="center" class="midaline" > <p style="margin-top: 0; margin-bottom: 0"><font face="Arial"><a href="http://translate.google.co.uk/translate?js=y&prev=_t&hl=en&ie=UTF-8&layout=1&eotf=1&u=www.bioenergyhealing.org.uk&sl=en&tl=ga"><img border="0" src="images/irish.jpeg" alt="aistriú go Gaeilge" title="aistriú go Gaeilge" width="22" height="19"></a> <a href="http://translate.google.co.uk/translate?js=y&prev=_t&hl=en&ie=UTF-8&layout=1&eotf=1&u=www.bioenergyhealing.org.uk&sl=en&tl=fr"><img border="0" src="images/french.jpeg" alt="Traduire en français" title="Traduire en français" width="28" height="19"></a> <a href="http://translate.google.co.uk/translate?hl=en&sl=en&tl=es&u=http%3A%2F%2Fwww.bioenergyhealing.org.uk%2F"><img border="0" src="images/spanish.jpeg" alt="traducir al español" title="traducir al español" width="24" height="19"></a> <a href="http://translate.google.co.uk/translate?js=y&prev=_t&hl=en&ie=UTF-8&layout=1&eotf=1&u=www.bioenergyhealing.org.uk&sl=en&tl=it"><img border="0" src="images/italian.jpeg" alt="Traduci in Italiano" title="Traduci in Italiano" width="26" height="19"></a> <a href="http://translate.google.co.uk/translate?js=y&prev=_t&hl=en&ie=UTF-8&layout=1&eotf=1&u=www.bioenergyhealing.org.uk&sl=en&tl=ru"><img border="1" src="images/language.jpg" alt="Translate to other language" title="Translate to other language" style="border-style: solid; border-color: #000000" width="23" height="17"></a></font></p> </td> </table>
Elite Coders
You don't have a class called "body". Either change the div to have the class body and remove the align center or remove the . from the body in the css. The dot signify's class, # id, and nothing in front that it is an element (a, p, h1, input, td, tr ,table, etc.).
Junior Coders
i have removed the . from the body but still not working
Elite Coders
Got a link? or is it the same as site as the other post?
http://www.bioenergyhealing.org.uk/new_frontpage_1 ?
Junior Coders
Junior Coders
You should probably try to convert your layout to DIVs rather than tables, but for the moment add the style margin: auto; to the main container rather than body. I don't think you have an ID for whatever your container is, I checked and I didn't see any IDs.
When I say container I mean the first table, i.e.
1 would be the container. I'm sorry if that is confusing, I don't know how to better explain it.<table id="1">
<table id="2">
</table>
<table id="3">
<table id="4">
</table>
</table
</table>
If you need anything else ask.
Tim
Posting Permissions
Reply With Quote
Bookmarks