HTML - How To Center Td In New Firefox & Ie Upgrades?

I am learning how to use Div's to replace Tables for layout. Needless to say, there are many properties I need to learn with CSS's. A friend wants a Floating area on the left which I have created, however I would like to have the box be centered in the main text area. Not sure if that can be done with my prototype at

http://www.toddcary.com/viewpoint/div_todd_a.html

Any help would be appreciated...

Todd

I Can't center my whole nav bar in the middle of the sidebar 1 div.
Here is the link for the website.

http://northwindappaloosas.com/NewHome.html

Quick question. When using a generator to make a website, it seems that usually everything is placed into "DIV - ABSOLUTE" codes. How do I center everything up so it isn't all stuck to one side for users who have a higher resolution?

I have a webpage with a header, column on each side, footer and a mainContainer in the middle. I would like to set up links on the left column that, when clicked, open a new 'page' in the center (mainContainer). I am using all div tags, no tables. Could someone point me in the right direction? TIA

Hey im new at this html programming and im ok at it but i still need to learn more i need help centering the stuff on my page you will see what i mean if you go to my website.
firefoxskins.awardspace.com.

I would really like help thank you for your time.

<tr>
<td class="contentarea_b"></td>
</tr>
<h3>=WFC= WAR FORCE CLAN AMERICAS ARMY</h3>
<table cellpadding="0" cellspacing="0" border="0"><tr><td><object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=4279961105245592436&amp;hl=en" height="350" width="425" style="width:400px; height:326px;" id="VideoPlayback">
<param name="movie" value="http://video.google.com/googleplayer.swf?docId=4279961105245592436&amp;hl=en" />
<param name="allownetworking" value="internal" />
<param name="allowScriptAccess" value="ALWAYS" />
<param name="enableJSURL" value="TRUE" />
<param name="enableHREF" value="TRUE" />
<param name="saveEmbedTags" value="true" />
<param name="flashvars" value="" />
</object></td></tr><tr><td>
</table> </td>

http://www.ivoog.com/test/help

The boxes that have: Paypal, Policies, Financing, Wholesale, etc. How can these be centered in all browsers including IE6? I can't get it to work

Here's the CSS:
#othermain2 {
width:850px;
height:850px;
float:left;
}
#middlestyle {
width:850px;
text-align:center;
margin:auto;
overflow:auto;
}
.middlebox {
width:150px;
text-align:center;
float:left;
font-size:24px;
margin-left:50px;
margin-top:50px;
border:solid 5px #333;
}
.middlebox:hover {
width:150px;
text-align:center;
float:left;
font-size:24px;
margin-left:50px;
margin-top:50px;
border:solid 5px #390;
}

FULL CSS: http://www.pics.ivoog.com/page/home.css

Can anyone help me? Thanks.

Hello,
I am pretty new to the whole html world so forgive me if this is a simple problem. I have look all over for a post explaing this problem but i haven't found anything. I am making a site for a friend using Dreamweaver. I know i know, i regret not coding it from scratch but its too late now. Anyways I have a pretty good page layout going now but I have ran into a problem with loading my images. On my home page an image in a table nested inside another table will load when viewing in safari but seems to disappear in firefox. What is going on? Its a pretty simple piece of code. I place;

<img src="Pictures/RDV couplepalm.jpg" width="200" height="" style="float:right; padding: 8px; margin-left:10px; margin-bottom: 10px" /

inside of a paragraph in a row of a table.

I have rewritten the code for this image, copied it from a working image and screwed around with the table heights (although I wasn't too sure what i was doing). What else should I try?

I have attached screen shots of the site in both browsers a copy of the problem jpeg aswell as a copy of the html.

Any information anyone could givee me would be REALLY appreciated!
Thank you.

Code:

<p><center><table width="50%" bgcolor="black" cellpadding="20px"><tr><td><a href="index.html">Home</a></td><td><a href="imglist.html">Img list</a></td></tr><td><a href="about.html">About</a></td></tr></table></center></p>

in ie the center works fine, but in firefox its almost 2 inches to the left of being center, why would that be?

After re-structuring the whole website, i got some problems with my pictures. As you see on theese 2 pics i can't get the pictures centered, even with the <center> tag!

(images removed)

before re-structuring i couldn't center the pictures neither, so it isn't because of the new structure. Please take a look on this Code and tell me if you know how to fix this problem.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
	<title>Urne's Website - Community</title>
	<link rel="stylesheet" type="text/css" href="style/style2.css">
</head>

<body>

	<div id="container">
		
		<div id="header"></div>

		<div id="left" style="width:210px;float:left;">
			<a href="index.html"><img  alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a>
			<p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/>
			<p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p>
			<p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p>
			<p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> 
		</div>

		<div id="main" style="margin-left: 210px;">
			<h1>Urne's Tracks</h1>
			<p>Here i have all the tracks i ever made for Re-Volt. Please check this one weekly/monthly, because the site will be updated at least once/month.<img alt="Smiley" src="img/Smile.gif" border= "0px"/></p>

			<a href="Bone+Island.html"><img alt="Bone Island" src="img/Bone+Island+hot.png" height="200" width="200" border= "0px"/></a>
			<a href="At+The+Farm.html"><img alt="At The Farm" src="img/At+The+Farm.png" height="200" width="200" border= "0px"/></a>
			<a href="Forgotten+City.html"><img alt="Forgotten City" src="img/Forgotten+City.png" height="200" width="200" border= "0px"/></a>
			<br>
			<a href="Cyberspace.html"><img alt="Cyberspace" src="img/Cyberspace.png" height="200" width="200" border= "0px"/></a>
			<a href="Dark+Park.html"><img alt="Dark Park" src="img/Dark+Park.png" height="200" width="200" border= "0px"/></a>
			<a href="Pisa+Grandprix.html"><img alt="Pisa Grandprix" src="img/Pisa+Grandprix+hot.png" height="200" width="200" border= "0px"/></a>
			</br>			
		</div>
	</div>

</body>

</html>

Hope this can help you!

Regards


Urnemanden

I was trying to do this for sometime, but not yet successful. My site appears centered in internet explorer, but in opera and firefox, it shows it old way of shifting to the left. Is there any way to make this site appear centered in all browsers? This is the site that I am talking abt - www.siddhaphysician.com

Thanks & Regards
Spencer Jones

Hello,

I have been struggling with a "dead center" align for some time now, and because I am not such a skilled html code creator, I decided to apply for some help, I'll try to be as explicit as I can be.

I have a simple html page, created with Dreamweaver CS3, and I've imported a Flash object, created with Flash 8. All I want is to align this movie horizontally as well as vertically, and when the page loads I have to send the focus to the flash movie, so that the visitor won't have to click on the flash movie in order to receive the focus.

I can center align the flash like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- PICHI Media (c) 2008 All Rights Reserved --><HTML><HEAD><TITLE>Always Follow Dreams</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
html,body { 
height:100%; 
width:100%; 
overflow:auto; 
} 

body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
	background-image: url();
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #000000;
}
a:active {
	color: #000000;
}
.style4 {font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif;}
#apDiv1 {
	position:absolute;
	width:324px;
	height:25px;
	z-index:1;
	left: 354px;
	top: 303px;
	background-color: #000000;
	visibility: hidden;
}
-->
</style>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<head>
</head>
<BODY>
<CENTER>
  <DIV align=right></DIV>
</CENTER>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD width="0" height="0" align=center vAlign=middle>
      <P align="center">
        </script><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','440','src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="440" id="test" >
          <param name="movie" value="test.swf">
          <param name="quality" value="high">
          <embed movie src="test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="440"></embed>
        </object>
        </noscript></P>
      </TD>
  </TR></TBODY></TABLE>
</BODY></HTML>

As you can see this source code will center align both ways horizontally and vertically.
I belive this is doing the job:

Code:

<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD width="0" height="0" align=center vAlign=middle>
      <P align="center">

Aligment sorted now let's get to the focus part. When the page loads I want to set the focus to the flash movie, and now I don't mean to remove that rectagle we all see in SP2 and IE7. No not that, that's easy to remove with some code. What I want is the actually focus in a text field in my flash movie.
I can do this with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body onLoad="window.document.test.focus();">
<center>
<table width="100%" height="100%" align="center">
<tr>
<td valign="middle" align="center">

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','name','test','width','400','height','440','id','test','title','test', 'src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" name="test" width="400" height="440" id="test" title="test">
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<embed src="test.swf" width="400" height="440" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="test"></embed>
</object></noscript>
</center>
</td>
</tr>
</table>

</body>
</html>


The focus part works with this i believe:

<body onLoad="window.document.test.focus();">

where TEST is the ID of my flash movie. BUT, the movie is not vertically align. It still is horizontally, but not vertically. And this is my problem. If I combine the two examples, the one where the content is dead center, and the one where I set the focus to the flash movie it won't work, and I get this error:

'window.document.test' is null or not an object

This page is right now on my site:

http://www.danandrei.ro

And if you double click on the small browser icon from the lower left corner, you know the one that shows error messajes like "DONE but with some errors". you can see what I mean.

My question is:

IS IT POSSIBLE TO BOTH CENTER ALIGN, HOR AND VERT, AND ALSO SET FOCUS TO THE FLASH MOVIE ? IF SO, DO YOU GUYS HAVE ANY CLUE HOW ?

Thank you.

Hi
I am new to html so I know this is probably a really simple matter however I am having trouble centering my swf file both horizontally and vertically. I have managed to center horizontally but cant seem to work out the vertical. Could anyone offer some help. My code is below

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">

<title></title>
<script type="text/javascript" src="p2q_embed_object.js">
</script>
<style type="text/css" title="Default">
body, div, h1, h2, h3, span, p {
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #000000;
}
body {
font-size: 10pt;
background : #ffffff;
}
table,tr,td {
font-size: 10pt;
border-color : #777777;
background : #dddddd;
color: #000000;
border-style : solid;
border-width : 1px;
}
h1 {
font-size: 18pt;
}
h2 {
font-size: 14pt;
}
.warning {
font-weight: bold;
}
</style>
</head>

<body>
<div align="center">
<p><script type="text/javascript">
<!--
if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
var flashvars="";
p2q_EmbedFlash('bar_out.swf','640','480','allowFullScreen','true','FlashVars',flashvars);

// Check to see if the version meets the requirements for playback
if (!DetectFlashVer(9,0,0)) {
document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '
+ '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');
}
} else {
document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old! Please copy this file into your html directory.<\/p>');
}
//-->
</script> <noscript>
<p class="warning">Please enable Javascript!</p></noscript></p>
</div>
</body>
</html>

i want the ads on the center.

not there.

please anyone can help?

screenshot:

I created my website in photoshop and sliced it up and exported it as HTML/Images so it would be coded in CSS and with div tags. But I am unable to center my website as a whole. If I export them as a table I can center it easily (Here is my site in tables.), but no one really like tables and I would much prefer it in CSS and with div tags.

Here's the site when coded with CSS.

HTML Code:

<html>
<head>
<title>Linnit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Save for Web Styles (Linnit.psd) -->
<style type="text/css">
<!--

#Table_01 {
	position:relative; right:50px
	left:0px;
	top:0px;
	width:950px;
	height:1250px;
	padding-left: 200em;
}

#index-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:950px;
	height:14px;
}

#index-02 {
	position:absolute;
	left:0px;
	top:14px;
	width:198px;
	height:1236px;
}

#Logo {
	position:absolute;
	left:198px;
	top:14px;
	width:175px;
	height:87px;
}

#index-04 {
	position:absolute;
	left:373px;
	top:14px;
	width:392px;
	height:87px;
}

#index-05 {
	position:absolute;
	left:765px;
	top:14px;
	width:185px;
	height:1236px;
}

#index-06 {
	position:absolute;
	left:198px;
	top:101px;
	width:567px;
	height:6px;
}

#Left-Nav {
	position:absolute;
	left:198px;
	top:107px;
	width:232px;
	height:60px;
}

#index-08 {
	position:absolute;
	left:430px;
	top:107px;
	width:6px;
	height:60px;
}

#Home {
	position:absolute;
	left:436px;
	top:107px;
	width:55px;
	height:60px;
}

#About {
	position:absolute;
	left:491px;
	top:107px;
	width:47px;
	height:60px;
}

#Linnit {
	position:absolute;
	left:538px;
	top:107px;
	width:52px;
	height:60px;
}

#Contact {
	position:absolute;
	left:590px;
	top:107px;
	width:65px;
	height:60px;
}

#index-13 {
	position:absolute;
	left:655px;
	top:107px;
	width:55px;
	height:60px;
}

#Other {
	position:absolute;
	left:710px;
	top:107px;
	width:55px;
	height:60px;
}

#index-15 {
	position:absolute;
	left:198px;
	top:167px;
	width:567px;
	height:6px;
}

#Main {
	position:absolute;
	left:198px;
	top:173px;
	width:468px;
	height:232px;
}

#index-17 {
	position:absolute;
	left:666px;
	top:173px;
	width:6px;
	height:232px;
}

#Right {
	position:absolute;
	left:672px;
	top:173px;
	width:93px;
	height:232px;
}

#index-19 {
	position:absolute;
	left:198px;
	top:405px;
	width:567px;
	height:845px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (something.psd) -->
<div id="Table_01">
	<div id="index-01">
		<img src="images/index_01.gif" width="950" height="14" alt="">
	</div>
	<div id="index-02">
		<img src="images/index_02.gif" width="198" height="1236" alt="">
	</div>
	<div id="Logo">
		<a href="index.html">
			<img src="images/Logo.gif" width="175" height="87" border="0" alt="Logo"></a>
	</div>
	<div id="index-04">
		<img src="images/index_04.gif" width="392" height="87" alt="">
	</div>
	<div id="index-05">
		<img src="images/index_05.gif" width="185" height="1236" alt="">
	</div>
	<div id="index-06">
		<img src="images/index_06.gif" width="567" height="6" alt="">
	</div>
	<div id="Left-Nav">
		<img src="images/Left_Nav.gif" width="232" height="60" alt="">
	</div>
	<div id="index-08">
		<img src="images/index_08.gif" width="6" height="60" alt="">
	</div>
	<div id="Home">
		<a href="index.html">
			<img src="images/Home.gif" width="55" height="60" border="0" alt=""></a>
	</div>
	<div id="About">
		<a href="about.html">
			<img src="images/About.gif" width="47" height="60" border="0" alt=""></a>
	</div>
	<div id="Linnit">
		<a href="linnit.html">
			<img src="images/Linnit.gif" width="52" height="60" border="0" alt=""></a>
	</div>
	<div id="Contact">
		<a href="contact.html">
			<img src="images/Contact.gif" width="65" height="60" border="0" alt=""></a>
	</div>
	<div id="index-13">
		<img src="images/index_13.gif" width="55" height="60" alt="">
	</div>
	<div id="Other">
		<a href="other.html">
			<img src="images/Other.gif" width="55" height="60" border="0" alt=""></a>
	</div>
	<div id="index-15">
		<img src="images/index_15.gif" width="567" height="6" alt="">
	</div>
	<div id="Main">
		<img src="images/Main.gif" width="468" height="232" alt="">
	</div>
	<div id="index-17">
		<img src="images/index_17.gif" width="6" height="232" alt="">
	</div>
	<div id="Right">
		<img src="images/Right.gif" width="93" height="232" alt="">
	</div>
	<div id="index-19">
		<img src="images/index_19.gif" width="567" height="845" alt="">
	</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>