CSS - Mozilla Isnt Centering A Centered Table....

I'm trying to center a table with CSS, because apparently putting align="center" in the table tag doesn't validate as HTML Strict.

I've tried

table.center
{
position: fixed;
left: 50%;
}

but that makes the table go off of the page. I've tried all the options given on w3schools.com with their positioning lessons, but none of them work.

Any suggestions?

Can anyone please tell me why cant i see a table centered by using this style sheet? All other elements are centered except form the tables tmemselves.

Code:

/* style.css */

body {
	background-image: url(/data/images/night.gif);
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
}

#page {
	position: relative;
	width: 100%;
	height: auto;
}

#select_form {
	margin-top:1 5px;
	font-size: 3ex;
	color: lime;
	text-align: center;
}

#DivText {
	overflow: auto;
	background-image: url(/data/images/kenzo.jpg);
	border: 4px Ridge Magenta;
	width: 850px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	color: LightSkyBlue;
	text-align: left;
	font-family: Times;
	font-size: 18px;
}

#user_form {
	position: relative;
	margin-top: 60px;
}

#info {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
}

#links {
	text-align: center;
	color: lime;
}

#links a {
	color: lime;
}

#links p {
	font: 12px bold;
	text-align: right;
	margin-bottom: 10px;
}




table.user_form {
	background-image: url(/data/images/swirl.jpg);
 	width: 55%;
  	color: lime;
	font: 18px times;
	text-align: center;
	border: 5px inset blue;
	border-collapse: collapse;
}

table.info {
	background-image : url(/data/images/blue.jpg);
 	width: 90%;
  	color: lime;
	font: 18px comic;
	text-align: center;
	border: 3px inset red;
	border-collapse: collapse;
}

table.tip {
	background-image : url(/data/images/brick.jpg);
 	width: 20%;
 	color: lime;
	font: 18px comic;
	text-align: center;
	border: 3px inset magenta;
	border-collapse: collapse;
}

table.games {
	background-image : url(/data/images/swirl.jpg);
 	width: 80%;
  	color: yellow;
  	font: 18px comic;
  	text-align: center;
	border: 3px inset magenta;
	border-collapse: collapse;
}




table {
	margin-top: auto;
	margin-bottom: auto;
	text-align: center;
}


Tr {
	text-align: center;
	border: 2px inset blue;
}


td {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 5px;
	padding-left: 5px;
	border: 1px inset yellow;
}


span {
	text-align: center;
}


h3 {
 	margin-top: auto;
	margin-bottom: auto;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}




span.yellow {
 	font: 18px comic;
	color: yellow;
}




td.pink {
 	font: 18px comic;
	color: pink;
}


td.lime {
 	font: 18px comic;
	color: lime;
}


td.yellow {
 	font: 18px comic;
	color: yellow;
}


td.cyan {
 	font: 18px comic;
	color: cyan;
}


td.white {
 	font: 18px comic;
	color: white;
}


td.aquamarine {
 	font: 18px comic;
	color: aquamarine;
}




h3.pink {
 	font: 18px comic;
	color: pink;
}


h3.lime {
 	font: 18px comic;
	color: lime;
}


h3.yellow {
 	font: 18px comic;
	color: yellow;
}


h3.cyan {
 	font: 18px comic;
	color: cyan;
}


h3.white {
 	font: 18px comic;
	color: white;
}


h3.aquamarine {
 	font: 18px comic;
	color: aquamarine;
}

Seems like I'm always trying to get something to render correctly in IE but this time it's firefox that is acting ornery.

There's not much to the page I'm working on. The table (#schoolstable) should be centered in the #mainbody div.

Works in ie, fails in firefox.

Here's my css:

Code:

/* = Default Layout
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
  	margin: 0;
	padding: 0;
}

/* Remove border around linked images */
img {
	border: 0;
}

body {
	text-align: center;
	min-width: 800px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}



/* = Basic Layout and Typography
-----------------------------------------------------------------------------*/

h1 {
	margin: 8px 0;
}

h2 {
	margin: 8px 0;
}

p {
	margin: 4px 0;
}

ul {
	margin: 8px 0;
}

li {
	font-size:14px;
}

form {
	margin: 8px 0;
}



/* =Advanced Layout and Typography by Area
-----------------------------------------------------------------------------*/

#wrapper {
	width:760px;
	margin: 0 auto;
	text-align: center;
}

#masthead {
	width:760px;
	margin: 0;
	background: url(../images/indexheader.jpg) no-repeat center;
	height: 270px;
}

#mainbody{
	width:760px;
	margin: 0;
	text-align: center;
}



/* = Basic Links
-----------------------------------------------------------------------------*/

a, a:visited {
	color: #000000;
	background-color: #EEEEEE;
	width: 150px;
	line-height: 18px;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	display: block;
}

a:hover, a:visited:hover {
	color: #FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color:#00FF33;
}





/* = Advanced Links
-----------------------------------------------------------------------------*/

.c0000FF a, .c0000FF a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c0000FF a:hover, .c0000FF a:visited:hover {
	color: #FF6600;
	width: 150px;
	text-decoration: none;
	background-color: #0000FF;
}


.c990000 a, .c990000 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c990000 a:hover, .c990000 a:visited:hover {
	color: #FFCC00;
	width: 150px;
	text-decoration: none;
	background-color: #990000;
}


.cCC6600 a, .cCC6600 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.cCC6600 a:hover, .cCC6600 a:visited:hover {
	color: #FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color: #CC6600;
}


.c3366CC a, .c3366CC a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c3366CC a:hover, .c3366CC a:visited:hover {
	color: #FFCC33;
	width: 150px;
	text-decoration: none;
	background-color: #3366CC;
}


.c333366 a, .c333366 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c333366 a:hover, .c333366 a:visited:hover {
	color: #CCCC99;
	width: 150px;
	text-decoration: none;
	background-color: #333366;
}



/* = Basic Lists
-----------------------------------------------------------------------------*/

ul {
	list-style-position: inside;	
	list-style-type: none;
}

ul li {
}



/* = Advanced Lists
-----------------------------------------------------------------------------*/

.schoollist {
	text-align: center;
}

.schoollist li {
	line-height: 16px;
	padding: 1px 1px;
	width: 150px;
}



/* = Tables
-----------------------------------------------------------------------------*/

table {
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0;
	margin: 8px 0;
}

tr {
	padding: 0;
	margin: 0;
}

td {
	padding: 0;
	margin: 0;
}



/* = Advanced Tables
-----------------------------------------------------------------------------*/

#schoolstable {
}

#schoolstable tr {
}

#schoolstable td {
}



/* = Forms
-----------------------------------------------------------------------------*/

fieldset {
}



/* = Advanced Forms
-----------------------------------------------------------------------------*/

I seem to have had success creating a cross-platform method for centering tables.

#centeredTable {

display:table;
width: auto;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

You can view an example he
http://jim.centerfuse.net/css/table...ed-example.html

IE ignores display:table and doesn't successfully interpret margin: auto, but text-align: center seems to take care of centering the table in IE.
Tested in Opera 7, IE 6, IE 5.5, Mozilla 1.5.
(I have the top margin in there just to move it away from my header a bit.)
It does require that you set a width on your table, or it will simply fill the entire page, though you could get around that with a container DIV (like this: http://jim.centerfuse.net/css/table...able_width.html ).

I thought others might be interested in seeing this, since it seems to be a common problem. I had originally developed a slightly more complicated way of doing what I need to do, but this seems to work just as well.
My main concerns are that future versions of IE will break this code because of added support for display:table and margin:auto, or that the specs for display:table; will change in the future, since it seems to be entirely unsupported in some browsers (namely IE).

Comments/Flames welcome

-Jim Keller

Okay, I have a table and I can center it using css, and I can turn on the outside border, but I cannot seem to turn on the row borders. How do I do this.

I tried.style="border:5px outset #a0a0a0; margin-left:auto;margin-right:auto; margin-top:15%;"

which works for the outside border and centering, but to turn on the inside cell row borders I had to use border="3" and then I am unable to center the table on the page no matter what I do. How do I center this table properly using css with both outside border and the row border turned on.

Hi,

Im having a problem centering a DIV table exactly how i want it too.

I want to be use the DIV table so that it will be only a few pixel away from the top.. so lets say 80px from the top and being centered horizontaly, so that it will display the samething for both 1024x768 & 800x600.

ps: the DIV table needs to be aligned to the right so that the image will appear on the right in both 1024x768 & 800x600

I have included/attached a image to kinda give a better idea.

I know this is probably soooo not kosher, but this is where I'm at ...

I have a star rating graphic that I got off the web that uses an HTML list, turned horizontally, to get the stars to light up when you hover over them. It took me ages to get it working, to customize it to my website's colors, and now it all works great. The only problem is I need it to appear centered in a table column, and no matter what I do with the css code I can't make it happen.

I know I should probably be using divs and all, but I tried that, and ultimately decided tables is easier for this purpose.

Anyway, if someone can forgive my sloppy, amateur ways and tell me how I can get this f-ing thing to center in my table column I would much appreciate it.

Here's the css code:

Code:

/* star rating */

.star * {
float: right;
padding:0px;
margin:0px;
list-style:none;
}
 
ul.rating{
background:url(images/star8.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
position:relative;
}
 
ul.rating li{
display:inline
}
 
.rating a {
display:block;
width:23px;
height:21px;
float:right;
text-indent:-9999px;
position:relative;
}
 
.rating a:hover {
background:url(images/star8.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
 
.rating a:active {
background-position:top;
}

and here's the HTML code (in php format):

Oops - won't let me send code because it contains URLs. Either way, it's a straight up table with three columns.

Cheers.

Julian

On my site which im using to practice css, the picture isnt being displayed on the main page. Why is this?

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Cheers

i am trying to make a link at the top of my blog stand out more. however i cant figure out how to override the default style sheet.

i am trying to make the following stand out mo

<center><font size=4 style="color: red"><u><a href="http://www.jwsuretybonds.com/apps.htm">Apply For Surety Bonds Online</a></u></font></center>

at: www.jwsuretybonds.com/blog

I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!!

PHP Code:
<style type="text/css">
/**********   layout of the page        ***********/

#top {
    background-color:yellow;
    clear:both;
}

/*****************   Formatting top part of the page   **************/

#tag {
    float:left;
    margin-left:8em;
}
#login {
    float:right;
}
#logo {
    margin-left:2em;
    float:left;
    clear:left;
}
#searchBox {
    float:right;
    clear:right;
}
#links2 {
    clear:right;
    background-color:yellow;
}
#links2 li{
    font-size:0.8em;
    display:inline;
    float:right;
    text-decoration:none;
    list-style:none;
    padding:1em;
}
</style>
</head>
<body>
    <div id="top">
        <div id="tag">
            <p id="">Zahra Zahra Ltd</p>
        </div>
        <div id="login">
            <p>Login/Register</p>        
        </div>
        <div id="logo">
            <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a>
        </div>
        <div id="searchBox">
               <form action="search.php" method="post" style="margin:0em; padding:0em;">
        <label>What are you shopping for?</label>
        <input type="text" name="search" value="search" size="14"/>
        <input type="submit" name="submit" value="Go" />
        </form>        
        </div>
        <div id="links2">
            <ul>                
                <li>Contact Us</li>
                <li>Testimonial</li>
                <li>Return Policy</li>
                <li>News</li>
                <li>FAQ</li>
                <li>about us</li>
                <li>Home</li>
            </ul>
        </div>
    </div> 

heys all,

in FF, I can get rid of that dreaded link outline via a { outline: none; } but IE7 isn't obeying. Funny enough, it's buggy, sometimes the outline is there, othertimes not.

Does anyone know a sure-fire way to fix this issue, hopefully not resorting to apply this.blur() to all the links?

Thanks.

Hi,

Im trying to make the orange column fixed width but it doesnt work, when I change the width of the browser window it still changes width.

Here is the link:
http://www.i3design.com/test/

Here is the CSS:
Code:

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.hidden { display: none; }

body { color: white; margin: 0; padding: 0; } /* Edited by Goldworker */
div.padded { display: block; }

div.content { width: 75%; margin: 0% 12.5%; } /* Added by Goldworker */

div.login { background-color: black; padding: 0% 12.5%; } /* Edited by Goldworker */
div.logo { background-color: grey; height: 50px; padding: 0% 12.5%; } /* Edited by Goldworker */
div.subnavigation { background-color: brown; }
div.main { color: black; background-color: orange; padding-left: 0px; padding-right: 0px; }
div.main div.body { background-color: white; min-width: 75%; }
div.main div.advertisements { width: 250px; display: inline; margin-right: 0px; }
div.footer { background-color: grey; }

Can anyone help. Also, is this well coded, or is it inefficient?

James

I have a site that I am working on:

test dot choupique dot com

The #subpage class is centered in internet explorer 9, but not firefox 5. I can't figure out why for the life of me. Can anyone see why?

Thanks

Ok,

I give up... can't figure this one out...
the navbar seems to be centered in IE but not in Firefox.

www.moksha.net/index.html

I notice that it doesn't seem to matter whether I am inside the header div or not.

The navbar is a UL. I don't care how wide it is really... I would love to strip all this down to its most essential.

Thanks!

#header
{
padding: 1em;
margin: 0px;
text-align:center;
width:100%;
align: center;
display:block;
}
#navbar {
color:#FFCC33;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
margin:0 auto;
}
#navbar ul {
clear:left;
text-align: center;
margin: 0 auto;
list-style-type: none;
text-indent: 0;
width: 600px;
background-color:#996633;}
#navbar li {
/* float:left;
width:80px; */
padding-right: 1em;
height: 3em;
line-height:3em;
font-size: 20px;
display: inline;
list-style-type: none;
text-align: center;
margin:0;
}
#navbar a {
color:#FF9933;
text-decoration: none;
}
#navbar a:hover {
color:#FFCC33;
}

How can i accomplish this with CSS?

See image he
hxxp://g.imagehost.org/0398/css.png

(replace x with t)