CSS совместимость между IE, Firefox и Chrome (WordPress)

Question

Я создал сайт, используя тему презрения (WordPress), и я изменяю его CSS, чтобы сделать его шире.

Проблема в том, что я могу сделать его великолепно в Internet Explorer или Firefoxи chrome, но не все 3 одновременно.

Если я уберу тег боковой панели:

#sidebar {
width:200px;
padding:20px 200px 10px;
}

, то в IE IE будет выглядеть нормально (как сейчас - physocall.co.il)но боковая панель скрыта в Firefox и Chrome.

Если я добавлю этот маленький тег в CSS - сайт отлично смотрится в Firefox и Chrome (боковая панель сдвинута влево на свое место), но в IE он падает -ниже всей страницы.

Любые идеи, как я могу изменить CSS, чтобы он выглядел правильно как в IE, так и в Firefox.Любые идеи, которые заставляют FF и Chrome отображать CSS одним способом, а IE - другим?

Спасибо.

весь CSS:

#content {
float:right;
width:649px;
margin:-50px 30px 0;
padding:0 0 20px 45px;
}

#topbar {
max-width:950px;
height:25px;
line-height:23px;
background:#FFFFE6;
overflow:hidden;
border-bottom:1px black solid;
margin:0;
}

#pagebar {
background:url('images/blue_flower/pagebar.jpg');
width:950px;
height:35px;
border-bottom:1px black solid;
margin:0;
padding:0;
}

#pagebar .children li,#pagebar .sub-menu li {
min-width:105px;
border-left:1px #e1e1e1 solid;
border-bottom:1px #e1e1e1 solid;
margin:0;
padding:0;
}

#pagebar ul a {
background-color:#f1f1f1;
width:101px;
}

#page {
width:950px;
}

#sidebar {
width:200px;
padding:20px 200px 10px;
}

Answer 1

Поскольку он работает в IE, но не в современных браузерах, это говорит о том, что вы использовали IE в качестве первоначального теста. Никогда, никогда не делай этого. IE на 12 лет отстает от всех остальных по современным стандартам и соответствию. В лучшем случае, вы никогда не должны доверять IE делать что-то правильно.

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

Итак, при переработке разметки используйте любой браузер, кроме IE, для начального теста. Тогда посмотрите, как IE облажается. Причуды и ошибки в IE хорошо известны, как и хаки, чтобы это исправить.

Answer 2

Решение было

#sidebar {
float:left;
width:200px;
margin:-20px 10px 5px 5px;
}

Похоже, что IE и FF имели значение по умолчанию, противоположное параметру float, что делает невозможным его прямую установку. как только было дано значение с плавающей точкой, маржа фиксировала остаток для обоих браузеров.

Answer 3

извините, но я должен начать с нуля и полностью перестроить вывод html и css. возможно, это практика кодирования из-за rtl, но ваш #content появляется перед боковой панелью и имеет плавающее: вправо, в то время как ваша боковая панель расположена слева от содержимого с полем left: 530px.

и ваш контент имеет ширину 640 ..

, который не может сработать и не должен быть исправлен каким-то хитрым трюком css.

извините.