CSS выглядит плохо в Opera и IE; с чего начать?

Question

Я только что завершил свой сайт, и он отлично выглядит в FF, Safari и Chrome. Опера выглядит хорошо, но не так хорошо, как FF. IE выглядит очень плохо.

Есть ли какое-либо приложение для проверки плохого CSS и только его исправить? Если нет, то какой самый простой способ перекрестного браузера настроить веб-сайт?

Ниже только одна из многих проблем, которые я имею с внешностью ...

У меня есть форма в index.html, которая содержит несколько входов. Справа от ввода, у меня есть кнопка «Поиск», которая отправляет форму. Эта кнопка ДОЛЖНА быть справа, но иногда падает одна строка, чтобы она оказалась слева внизу входов. Это происходит только в браузерах Opera 10.53 и IE. (не тестировали другую версию Opera).

Вот код:

<table border="0" align="center"> 
    <tr> 
    <td> 
     <div class="nav_container" id="nav_container"> 
     <div id="nav_container2" class="nav_container2"> 
      <form id="nav_form_main" name="nav_form_main" action="/search/" target="iframe001" method="get" onSubmit="reset_and_subm();"> 
      <div class="nav_lists" id="nav_list"> 
       <input name="nav_querystring" type="text" id="nav_querystring" style="width: 240px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;" value=""> 
       <select name="nav_category_list" size="1" id="nav_category_list" style="width: 195px;" onChange="subcatSelection();"> 
       <option value="All categories" selected>-- All categories --</option> 
       ALOT OF OPTIONS HERE 
       </select> 
       <select name="nav_city_list" id="nav_city_list" style="width: 180px;" onChange="areapicker();"> 
       <option id="Hela Sverige" value="Hela Sverige" selected>-- Hela Sverige --</option> 
       ALOT OF OPTIONS HERE 
       </select>     
       <input type="submit" name="nav_submit" id="nav_submit" value="Sök" style="width: 58px; font-size: 13px;"> 
      </div> 
      </div> 
     </td> 
     </tr> 
    </table> 

А вот CSS участие:

.nav_container2 { 
    position:relative; 
    left:0px; 
    top:10px; 
} 

.nav_container { 
    background-image: url(../Graphics/menu_lvl1.gif); 
    height: 101px; 
    width: 720px; 
    padding:0; 
    margin:0; 
} 

Если вам нужно больше вход, просто дайте мне знать ...

Конечно, это IE с большинством проблем здесь ... Некоторые в Opera, как я упоминал выше ... Отдых в порядке.

Благодаря

Answer 1

Вы можете использовать следующий сайт, чтобы подтвердить свой CSS, чтобы увидеть, если она отвечает стандартам W3C:

http://jigsaw.w3.org/css-validator/

Он будет идти, хотя ваш CSS, проверить совместимость, и выплюнуть обратно ошибки, если они существуют. Он покажет вам, где в вашем файле у вас есть ошибки, чтобы вы могли исправить их. Я не знаю о каких-либо инструментах, которые будут исправлять ваш CSS для вас ... Я бы не использовал его, хотя, потому что я ничего не узнал бы.

Вы можете использовать следующий сайт, чтобы подтвердить свой HTML и других языков разметки вы используете:

http://validator.w3.org/

Оба эти невероятные инструменты, которые я использую часто при разработке. Я также рекомендовал бы установить Web Developer Toolbar и Firebug, чтобы сделать вашу жизнь намного легче при разработке.

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

Надеюсь, это поможет!

Answer 2

Там не очень хорошее приложение, которое я знаю для отладки CSS. У вас есть правильный порядок, хотя. начните с firefox, затем chrome/safari, opera, IE. Я бы поставил IE выше оперы в порядке важности, основанной на использовании.

Вы должны быть в состоянии заставить эти браузеры работать хорошо. Когда дело доходит до IE, посмотрите на conditional comments, чтобы применить дополнительный CSS к IE только. Вы можете переопределить другие стили, чтобы исправить вещи в IE, которые выглядят не так хорошо.

Answer 3

Если вы еще не используете его, я могу порекомендовать использовать CSS RESET. Это должно устранить большую часть кроссбраузера bs. Он оставляет вас с более очевидными ошибками браузера, которые легко фиксируются с помощью определенного файла css, выполненного с условными комментариями.

Для тестирования я делаю firefox, chrome, т.е. 8, т. Е. 7, то есть 6, опера, сафари. Есть приложения, которые показывают скриншоты для браузеров, которые у вас не похожи на браузеры. Но я нахожу их не очень полезными, если он хорошо показывает, т.е. 7 & 8, хром и FF им нравятся.

Возможно, вы не можете напрямую ответить на ваш вопрос, но это может помочь избежать слишком большого количества непоследовательности для начала. :)