Solved

How to make this table center? HTML/CSS

Posted on 2008-10-17
10
5,167 Views
Last Modified: 2012-05-05
Hi

I am trying to make this table align to the center.
It appeared center in Internet Explorer but not in FireFox (it align to the left in firefox)
Can I know what correction i need to make in the code?
There were Logo, banner, menu etc in the table, but i removed them.
Thanks

<head>
<style type="text/css">
 
.menuheader {
		background-color:#c90000 ;
}
 
.style3 {
	text-align: center;
}
.headRoundOuter1 { margin-bottom:1px; width:990px; max-width:990px;}
.headRoundOuter1 .contenthOuter1 { height: 78px; background-color:#fff; border-right:1px solid #c6c6c6; border-left:1px solid #c6c6c6;}
.headRoundOuter1 .contenthInner1 { height: 78px; width:986px; max-width:986px; background-color: #dc0000; repeat-x; border:0px;}
 
.style7 {
	text-align: left;
}
 
</style>
</head>
 
<div class="style3">
<div class="headRoundOuter1">	
		    <div class="contenthOuter1" valign="top">	    
		        <div class="contenthInner1" valign="bottom">
<center>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td class="style7" style="width: 6%" >&nbsp;</td>
    <td width="50%" class="style7" ><a href="">
	<div class="style7">
	</div>
	<a href=""><div class="style7">
	</div>
	</a></td>
    <td width="50%"  valign="bottom" class="style3"> 
      <div class="style7"></div>
    </td>
 
  </tr>
</table>
<div class="menuheader">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td height="24"> 
      <div class="style3">
		</div>
		
    </td>
  </tr>
  </table>
</div>
</center>

Open in new window

0
Comment
Question by:royalgoldleaf
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 16

Expert Comment

by:brad2575
ID: 22744221
add align="center"   to the table code

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

Author Comment

by:royalgoldleaf
ID: 22744283
Hi brad,
I tried.
But it didnt work.
It still align to the left in Opera 9.5 and Firefox 3.0.
Center in Internet Explorer


0
 
LVL 16

Expert Comment

by:brad2575
ID: 22744326
its probably one of your CSS styles over riding it in Firefox.

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 200 total points
ID: 22745713
You will ahve to get the table OUT of the DIV to use the <center> command, which will work on ANY free standing table.  But if you have a DIV enclosing it, then it will never work unless you center the DIV first.

You do NOT NEED DIVs around tables -- in that usage, they are only for positioning a table.  If you want the table to center in the browser window, REMOVE the encompassing DIV -- it is not serving any purpose in this usage that tables cannot do just as well.  You can CSS style essentially everything in a table.
0
 
LVL 2

Accepted Solution

by:
garfld earned 300 total points
ID: 22749035
Brad omitted the "" marks. Try this:
<table align="center">
    ...
  </table>

Or, why not try to style it with CSS, like so:

table
{
margin-left: auto;
margin-right: auto;
}
0
 

Author Comment

by:royalgoldleaf
ID: 22749143
scrathcyboy have given me a direction to google for answer. While garfld has provided the answered more accurately. So more points are awarded. Thanks Experts..
0
 
LVL 2

Expert Comment

by:garfld
ID: 22749173
If you thought I answered the question most accurately, why would you only give me a B grade? I have only gotten all A grades in the past.
0
 

Author Comment

by:royalgoldleaf
ID: 22750847
garfld:
Thanks for pointing out.
I was choosing Grade A..
I have contacted Admin and they will make the correction soon.
Thank you



0
 
LVL 2

Expert Comment

by:garfld
ID: 22751883
Hey, thanks so much!

I just saw this mentioned elsewhere, and the moderator said, this isn't school! If someone helps you and gives you the answer you need, give them an A. If I hadn't seen that, I wouldn't have brought it up.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question