? Autosize/Center Aligning Website for Different Browser Sizes

**FutureRoots** · 05-16-2008, 04:59 PM

I am having issues creating a website (using imageready) that is centered in all browsers.

I made table width & height = 100% and made align & valign = center so that it would center in the middle of any viewers browser page-not sure I did this correctly...

I also have an link to a pdf file that may download for the viewer if they so choose, but something weird is happening around that link - white spaces as if the page is broken up.

the site is - URL REMOVED PER USER REQUEST

I'm sure this is a simple problem, but I am quite inexperienced so any help is greatly appreciated.

HTML Code:

<html>
<head>
<title>Kids-First-Tutoring-Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Kids-First-Tutoring-Center.jpg) -->
<table id="Table_01" width="100%" height="100%" align="center" valign="center" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="images/index_01.jpg" width="1280" height="410" alt=""></td>
	</tr>

	<tr>
		<td rowspan="2">
			<img src="images/index_02.jpg" width="80" height="614" alt=""></td>
		<td>
			<a href="Kids1st-Summer-Registration.pdf" target="_blank"><img src="index_03.jpg" alt="Summer_Registration_Form" /></a></td>
		<td rowspan="2">
			<img src="images/index_04.jpg" width="831" height="614" alt=""></td>
	</tr>
	<tr>

		<td>
			<img src="images/index_05.jpg" width="369" height="527" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

**Medyman** · 05-16-2008, 11:15 PM

A little CSS can go a long way.

Add the following between your <head> tags.

Code:

<style type="text/css">
	table {
		margin:0 auto;
	}
</style>

By the way, tables were not designed to be used for layout and it is generally recommened not to do so. You should be using CSS for this.

**FutureRoots** · 05-17-2008, 12:38 AM

thanks, i tried this and it still looks the same.

**rangana** · 05-17-2008, 02:34 AM

I wonder why Medyman gives you that margin:auto;, maybe he'll explain later.

Anyway, the issue is not more of a CSS issue but an image width and height issue

See if this code helps:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head><title>Kids-First-Tutoring-Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{margin:0;padding:0;}
body{background:#fff;}
img{display:block;}
#wrap{width:1280px;}
#nav{width:373px;float:left;}
</style>
</head>
<body>
<div id="wrap">
<img src="images/index_01.jpg" alt="" style="height:410px;width:1280px;">
<img src="images/index_02.jpg" alt="" style="height:617px;width:80px;float:left;">

<div id="nav">
<a href="http://www.kidsfirsttutoringcenter.com/Kids1st-Summer-Registration.pdf" target="_blank"><img src="images/index_03.jpg" alt="Summer_Registration_Form"></a>
<img src="images/index_05.jpg" alt="" style="width:373px;height:523px;float:left;">
</div>
<img src="images/index_04.jpg" alt="" style="width:827px;height:618px;float:right;">
</div>
</body>
</html>

P.S. I've change your code away from the deprecated attributes

I modified your code because tables was'nt intended for layouts

I also added a DTD in your page for it to validate

Hope that helps

**Medyman** · 05-17-2008, 02:36 AM

I wonder why Medyman gives you that margin:auto;, maybe he'll explain later.

Sorry, I misunderstood the issue.

What Rangana suggests should work

**FutureRoots** · 05-17-2008, 04:30 AM

thanks a million! you sure know your stuff. i am going to read up more on why the original code was not working. thank-you for the info...really & truly