Центрирование текста в IE 7 / Условный CSS - PullRequest
Новая
       16

Центрирование текста в IE 7 / Условный CSS

0 голосов
/ 20 августа 2009

Я действительно бьюсь головой об этом.

Сайт выглядит отлично во всем, кроме IE7, и я попробовал все, что я знаю, чтобы сделать его центром.

http://talentforceinc.com/Employer_Home.html

Я получил условный CSS для IE, и добавил встроенные теги text-align: center, но по неизвестной причине текст в разноцветной полосе слева не центрируется.

Есть мысли?

Да, я знаю, что код сейчас уродлив, но он все испортил в моих попытках сосредоточиться.

Заранее спасибо за любой вклад.

IE Developer Tools - это не то же самое, что Firebug ....

Ответы [ 2 ]

1 голос
/ 20 августа 2009

Для справки ссылка на страницу находится здесь: http://talentforceinc.com/Employers_Home.html.

Здесь указан конкретный код: http://www.i -simplyrecruit.com / isrjobs / talentforce / ShowJobColors.asp и также показан ниже для справки.

Первая проблема (как вы упомянули), код ужасен. Настолько уродливо, что очень трудно понять, что:

  • В ячейках "Служба цементирования ..." и "Специалист по макету документа" есть незаконченные объекты пространства HTML (& nbsp;). Это приводит к тому, что части конечных тегов, которые следуют, игнорируются.
  • Атрибуты HTML для ширины и высоты являются только целочисленными значениями. Не указывайте «px». ех. 450 вместо 450px.
  • Закрывающий тег
    в каждой ячейке (с классом "sidebar") помещается после окончания и .

После исправления этих ошибок я также заметил, что у вас установлена ​​ширина таблицы 185, а ширина каждой ячейки таблицы равна 100. Это не позволяет ячейкам таблицы занимать всю ширину таблицы, делая текст внутри они не могут быть отцентрированы по ширине стола. Удаление ширины ячейки решает эту проблему.

Я загрузил тестовую страницу с исходным неизмененным кодом и результатами моих изменений: http://demo.raleighbuckner.com/so/1303302/

Оригинальный HTML для справки: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://demo.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
0 голосов
/ 21 августа 2009

Иногда, когда вы сталкиваетесь с испорченным кодом, вам просто нужно наброситься и начать все сначала.

Вместо таблицы с одним столбцом для этого лучше подойдет неупорядоченный список. 

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