Table style vs css class

Dev Shed Forums Sponsor:

October 12th, 2012, 12:12 PM

gw1500se

Contributing User

Join Date: Jul 2003

Posts: 2,907

Time spent in forums: 1 Year 1 Month 1 Day 18 h 34 m 57 sec
Reputation Power: 581

Table style vs css class

I am in the process of bringing all my pages into compliance by changing depreciated/discouraged style usage. One of the problems I am having is with table alignment. According to what I read, to center a table the class should look something like this:

Code:

.tablectrnb75 {
	width:75%;
	border:0;
	margin-left:auto;
	margin-right:auto;
}

However, when I use that class instead of the obsolete:

Code:

<table width="75%" border="0" align="center">

I am not getting the same results. The table winds up aligned left. What is the trick to replace the above with a css that yields the same thing? TIA.

__________________
There are 10 kinds of people in the world. Those that understand binary and those that don't.

October 12th, 2012, 01:56 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,895

Time spent in forums: 6 Months 2 Days 20 h 11 m 21 sec
Reputation Power: 4192

The style rule you posted should work. Would you please show us an example page?

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

October 12th, 2012, 03:54 PM

gw1500se

Contributing User

Join Date: Jul 2003

Posts: 2,907

Time spent in forums: 1 Year 1 Month 1 Day 18 h 34 m 57 sec
Reputation Power: 581

Perhaps. A lot of the information on the page is personal and it will take a lot of time to sanitize it. Hopefully this will be sufficient:

Code:

<html>
<head>
<title>CUFS Alumnus Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
input {
	vertical-align: middle;
}
-->
.noninput {
	font-family: "Times New Roman", Times, serif;
	font-size:14px;
	border:none;
	background:#cccccc;
	color:#000000;
}
</style>
<link rel="stylesdheet" href="/Style-Sheets/misc.css" type="text/css" />
<script language="JavaScript" type="text/javascript" src="../../Scripts/validate.js"></script>
<script language="JavaScript" type="text/javascript" src="../../Scripts/cufsmyprofile.js"></script>
<script language="JavaScript" type="text/javascript" src="../../Scripts/cookies.js"></script>
<script language="javascript" type="text/javascript" src="../../Scripts/ajax.js"></script>
<script language="JavaScript" type="text/javascript">
	if (GetCookie("cufsalumnijv")==null) {
		alert("Privacy Policy:\n\n\nYour fellow alumni are interested in knowing about you today. Since there is a lot of personal information on this form, most of the fields are voluntary. However, keep in mind that this information is available only to alumni that have been approved by the webmaster and will not be disclosed to anyone else. Those that do have access to this information are asked not to disclose any information herein without the express approval of the subject alumnus or alumnae.");
		SetCookie("cufsalumnijv","ppgiven");
	}
	var cityState=createAjaxObject();
	cityState.onreadystatechange = function(){
		if(cityState.readyState == 4){
			if (cityState.responseText.search("/Invalid/")>=0) {
				alert("Invalid zip code entered");
				document.forms[0].elements['zip'].value=""
				document.forms[0].elements['city'].value="";
				document.forms[0].elements['state'].value="";
			}
			else {
				document.forms[0].elements['city'].value=cityState.responseText.split(",")[0];
				document.forms[0].elements['state'].value=cityState.responseText.split(",")[1];
			}
		}
	}
	function getCityState(zipcode) {
		cityState.open("GET","/cgi-bin/ziplookup.cgi?zipcode="+zipcode,true);
		cityState.send(null);
	}
</script>
</head>

<body background="../../img/lblue116.jpg">

<h1 align="center"><font color="#FFFFFF">Title</font></h1>
<form action="myprofile.php" method="post" name="myprofile" enctype="multipart/form-data">
  <h2 align="center">First Name: <input name="first_name" type="text" value="First">
  	Middle Name: <input name="middle_name" type="text" value="">
    Last or Maiden Name: 
    <input name="last_name" type="text" value="Last"></h2>
	<h2 align="center">Married Name: <input name="married_name" type="text" value=""></h2>
  <h2 align="center">Class of <input name="gradclass" type="text" value="1961" size="4"></h2>
	<table width="75%" border="0" align="center">
 	 	<tr>
      		<td width="25%"><img src="pictures/gw1500se1.jpg"></td>
   	 		<td align="left" width="25%"><font size="+3">Then</font></td>
	 		<td align="right" width="25%"><font size="+3">Now</font></td>
   	 		<td width="25%"><img src="pictures/gw1500se2.jpg"></td>
 		</tr>
  		<tr>
   	 		<td align="center">Upload Photo (200 X 250 max)<br><input type="hidden" name="MAX_FILE_SIZE" value="500000"><input name="upload1" type="file"></td>
   	 		<td>&nbsp;</td>
			<td>&nbsp;</td>
   	 		<td align="center">Upload Photo (200 X 250 max)<br><input type="hidden" name="MAX_FILE_SIZE" value="500000"><input name="upload2" type="file"></td>
  		</tr>
	</table>

There is much more that follows but the errant table is there. This is the old version that displays correctly. The one that is messed up uses this:

Code:

<table class="tablecntrnb75">

Last edited by gw1500se : October 12th, 2012 at 04:57 PM.

October 12th, 2012, 09:07 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,895

Time spent in forums: 6 Months 2 Days 20 h 11 m 21 sec
Reputation Power: 4192

The class names aren't the same. One has two "n"s and the other only have one. When I change one to match the other, the styles work fine.

Are you really not using a doctype?

October 13th, 2012, 07:01 AM

gw1500se

Contributing User

Join Date: Jul 2003

Posts: 2,907

Time spent in forums: 1 Year 1 Month 1 Day 18 h 34 m 57 sec
Reputation Power: 581

Sorry, that was a typo in the table tag (I guess I should have done copy/paste) in my post. Hmm. I didn't notice the missing doc type until you mentioned it. This is actually the output from a PHP page using a template. Could that be the problem? It worries me that you are getting something different. I'm using Firefox and didn't try IE or Chrome.

Last edited by gw1500se : October 13th, 2012 at 07:03 AM.

October 13th, 2012, 02:08 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,895

Time spent in forums: 6 Months 2 Days 20 h 11 m 21 sec
Reputation Power: 4192

Not having a doctype would make it not work in IE, but it is centered in FF without one.

PHP is fine. You just have to remember that it will only output what it's been told to output. So make sure your code is valid.

Perhaps you could come back to this after you've removed all of the <font> elements and align attributes (from other kinds of elements)? Otherwise, it would be helpful if you reduced the page to a minimal test case.

Quote:

It worries me that you are getting something different.

*shrugs* I've only got part of your code here. It's possible, although not particularly likely, that one of the JS scripts is interfering with this.

Table style vs css class

Developer Shed Advertisers and Affiliates