Почему мой текст выравнивается в Safari и Chrome, но не в Internet Explorer/Firefox?

Question

Мой сайт wordswithfriends.net

В Safari/Chrome на боковой панели, например. «Ежемесячный обратный отсчет» заголовков и текстовой линейки точно. В IE/Firefox заголовок больше справа, и текст проталкивается полностью влево. Что не так с моим кодом?

Редактировать CSS:

#sidebar h3 { 
background: url (images/sidebarh3bgr.png) no repeat; 
color: white; 
font-size: 14px; 
margin: 0 0 10px; 
padding: 5px 5px 5px 18px; 
} 

#sidebar li .top { 
padding: 0px 0px 15px 1px; 
width: 333px; 
background: no-repeat url(images/bcksidebarlitop.png); 
} 

.execphpwidget { 
margin: 10px 23px 0px 10px; 
padding: 5px 5px 5px 10px; 
} 

.textwidget { 
padding: 5px 5px 5px 17px; 
} 

#sidebar ul { 
list-style-type: none; 
margin: 0; 
padding: 3px 17px; 
} 

Answer 1

Firebug в Firefox и инструменты разработчика в IE оба показывают, что стиль, определенный для класса * .execphpwidget не применяется. Ни один из методов проверки не указывает, что стиль переопределяется; его просто нет.

Быстрая проверка вашей таблицы стилей показывает, что у вас есть некоторые плохие CSS к концу, вокруг линии 470:
img .alignnone size-full wp-image-364 {float:right; padding:5px 10px 10px 0px;"}

Смотрите здесь: W3C CSS Validation Service

Из-за этой ошибки, IE и Firefox отбрасывают оставшуюся часть вашей таблицы стилей, которая включает в себя оставшиеся пробелы/маржи, которые вам не хватает.

Я думаю, что Chrome и Safari являются более прощающими.

Answer 2

Css сброса это волшебное слово :-)

Каждый браузер имеет свой собственный CSS по умолчанию. Это одна из самых больших проблем для веб-разработчиков.

Например, CSS-Reset задает множество свойств 0px (margin:0;padding:0;)