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

Я действительно стучу в голову этим.Центрирование текста в IE 7/Условный CSS

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

http://talentforceinc.com/Employer_Home.html

Я получил условный CSS для IE предрек и добавил инлайн выравнивания текста: метки центра, но по неизвестной причине текст в разноцветном баре на левом не центровки ,

Любые мысли?

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

Заранее благодарим за любой ввод.

IE Developer Tools не то же самое, как Firebug ....

источник

2009-08-20 greenkoi

Ссылка не работает для меня. – Pat

Не работает для меня ни – Guilherme

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

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

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

Есть незавершенные HTML космические объекты (& NBSP;) в «цементирования службы ...» и ячеек «Document Layout Specialist». Это приводит к тому, что части конечных тегов следуют за игнорированием.
HTML-атрибуты для ширины и высоты являются целыми значениями. Не указывайте «px». ех. 450 вместо 450px.
Закрытие < ДИВ > тег в каждой ячейке (с классом «врезке») помещается после концовки < тд > и < т.р. >.

После исправления этих ошибок я также заметил, что ширина таблицы установлена на уровне 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>

источник

2009-08-20 18:33:05

Великие уловы, мне было интересно узнать о том, что ширина таблицы/ячейки у него была. – Sneakyness

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

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

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>

источник

2009-08-21 02:12:23 Emily

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

ответ

Смежные вопросы