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

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

0 голосов
/ 22 августа 2010

Я только что закончил свой сайт, и он хорошо выглядит в 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, как я уже упоминал выше ... Остальное в порядке.

Спасибо

Ответы [ 3 ]

1 голос
/ 23 августа 2010

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

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

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

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

http://validator.w3.org/

Это невероятные инструменты, которые я часто использую при разработке. Я также рекомендовал бы установить Панель инструментов веб-разработчика и Firebug , чтобы сделать вашу жизнь намного проще при разработке.

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

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

1 голос
/ 22 августа 2010

На самом деле я не знаю хорошего приложения для отладки CSS. У вас правильный порядок, хотя. начните с Firefox, затем Chrome / Safari, Opera, IE. Я бы поставил IE над оперой в порядке важности, основываясь на использовании.

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

0 голосов
/ 23 августа 2010

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

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

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

...