ansaurus

Question

Centering Text in IE 7 / Conditional CSS

Answer 1

+1 A:

For reference, the page being referred to is located here: http://talentforceinc.com/Employers_Home.html.

The specific code referred to is here: http://www.i-simplyrecruit.com/isrjobs/talentforce/ShowJobColors.asp and also shown below for reference.

The first problem is (as you mentioned), the code is ugly. So ugly in fact that it is very hard to see that:

There are unfinished HTML space entities ( ) in the "Cementing Service..." and "Document Layout Specialist" cells. This is causing portions of the ending tags that follow to be ignored.
HTML attributes for width and height are integer values only. Do not specify "px". ex. 450 instead of 450px.
The closing <div> tag in each cell (with a class of "sidebar") is placed after the ending <td> and <tr>.

After fixing these errors, I also notice that you have a table width set at 185 and each table cell width is set at 100. This is keeping the table cells from taking up the entire width of the table, making the text within them not able to be centered within the width of the table. Removing the cell width fixes this problem.

I have uploaded a test page with the original unmodified code and the results of my changes: http://demo.raleighbuckner.com/so/1303302/

Original HTML for reference:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://demo.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<title>Latest Jobs</title>
<link href="http://www.talentforceinc.com/talentforce.css" rel="stylesheet" type="text/css" />
<!--[if LTE IE 7]>
<link href="http://www.talentforceinc.com/talentforce_IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
td {
text-align: center;
align: center;
}
-->
</style>



<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function ShowMore(pID)
{
  var pParm = "Candidates_jobSearch3.asp?id=" + pID;

  MM_openBrWindow(pParm,"jobDetail","scrollbars=yes,width=600,height=600 resizable=no");
}
//-->
</script>

</head>
<body> 
   <table width=185px bgcolor=white border=0 cellpadding=0 cellspacing=0 style='text-align:center'><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#00AADD'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;P0006008-0032&quot;);'>Contractor&nbsp;Engineer&nbsp;Specialist</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#AADDEE'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;N0003008-0077&quot;);'>.Net&nbsp;&&nbsp;Sql&nbsp;server&nbsp;An</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#FFCC55'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;S5696007-0004&quot;);'>Cementing&nbsp;Service&nbsp;Sup/Deep&nbs</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#22AA55'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;S4082007-0012&quot;);'>Coil&nbsp;Tubing&nbsp;Operator/Equipment</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#9999AA'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;L0008004-0157&quot;);'>Loads&nbsp;Analysis         </a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#EE9922'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;D6452009-0448&quot;);'>Document&nbsp;Layout&nbsp;Specialist&nbs</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#CCCCCC'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;L0008004-0161&quot;);'>Technical&nbsp;Trainer&nbsp;</a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#00AAAA'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;A0029005-0025&quot;);'>Q.A.&nbsp;Engineer          </a></div></td></tr></div><tr><td height=40 width=100px align=center style='text-align:center' valign=middle bgcolor='#888888'><div class='sidebar'><div align='center'><a style='text-align:center' href='#' onclick='javascript:ShowMore(&quot;E0001008-0090&quot;);'>Clerk&nbsp;&nbsp;Secret&nbsp;Clearance</a></div></td></tr></div></table>
</body>
</html>

81bronco 2009-08-20 18:33:05

Great catches, I was wondering about that table/cell width he had goin on.

Sneakyness 2009-08-21 02:35:04

Answer 2

A:

Sometimes when you end up with code that messed up, you just need to punt and start over.

Instead of a single column table, an unordered list will work better for this.

ul.nav {list-style:none;padding:0;}
ul.nav li {width: 200px; height: 40px; line-height:40px; vertical-align:middle; text-align:center;}
ul.nav li a {color:#fff;text-decoration:none;}
.man {background-color:#ade;}
.tech {background-color:#fc5;}
.hr {background-color:#2a5;}

<ul class="nav">
 <li class="man"><a href="#">Man</a></li>
 <li class="tech"><a href="#">Tech</a></li>
 <li class="hr"><a href="#">HR</a></li>
</ul>

Emily 2009-08-21 02:12:23

ansaurus

tags:

views:

answers:

Centering Text in IE 7 / Conditional CSS

related questions