#1
  1. No Profile Picture
    Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2003
    Posts
    3,623
    Rep Power
    595

    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.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    The style rule you posted should work. Would you please show us an example page?
    Spreading knowledge, one newbie at a time.

    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).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2003
    Posts
    3,623
    Rep Power
    595
    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 05:57 PM.
    There are 10 kinds of people in the world. Those that understand binary and those that don't.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    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?
    Spreading knowledge, one newbie at a time.

    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).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2003
    Posts
    3,623
    Rep Power
    595
    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 08:03 AM.
    There are 10 kinds of people in the world. Those that understand binary and those that don't.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    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.

    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.
    Spreading knowledge, one newbie at a time.

    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).

IMN logo majestic logo threadwatch logo seochat tools logo