CSS looks bad in Opera and IE; where should I start?

Question

I have just completed my website, and it looks good in FF, Safari and Chrome. Opera looks alright, but not as good as FF. IE looks very bad.

Is there any application for checking bad CSS and just fix it? If not, what is the easiest way to cross-browser adjust a website?

Below is only one of the many problems I have with appearance...

I have a form in index.html which contains several inputs. To the right of the inputs, I have a "Search" button which submits the form. This button SHOULD be on the right, but sometimes drops one line to end up on the left below the inputs. This happens only in Opera 10.53 and IE browsers. (haven't tested any other Opera version).

Here is the code:

<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>

And here is the CSS involved:

.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;
}

If you need more input just let me know...

Of course, it is IE with the most issues here... Some in Opera as I mentioned above... Rest is fine.

Thanks

Answer 1

There is not really a good application that I know of for debugging CSS. You have the correct order though,. start with firefox, then chrome / safari, opera, IE. I would place IE above opera in order of importance based on usage though.

You should be able to get those browsers working well. When it comes to IE, look to conditional comments to apply additional CSS to IE only. You can override other styles to correct things in IE that do not look so good.

Answer 2

If you're not already using it, i can recommend using a CSS RESET. That should eliminate most of the crossbrowser bs. It leaves you with the more obvious browser specific bugs, which are easily fixed with an specific css file, done with conditional comments.

For testing i do firefox, chrome, ie 8, ie 7, ie 6, opera, safari. There are apps that show you screenshots for browsers you dont have like browsershots. But i find them not really helpful, if it shows well in ie 7 & 8, chrome and FF im happy.

Maybe does not directly anwser your question, but it can help avoiding too much inconsistency to start with. :)

Answer 3

You can use the following site to validate your CSS to see if it meets the W3C standards:

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

It'll go though your CSS, check compatibility, and spit back errors if they exist. It'll show you where in your file you have mistakes so you can go fix them. I don't know about any tools that will fix your CSS for you... I wouldn't use it though because I wouldn't learn anything that way.

You can use the following site to validate your HTML and other markup languages you use:

http://validator.w3.org/

These are both incredible tools that I use frequently when developing. I would also recommend installing the Web Developer Toolbar and Firebug to make your life much easier when developing.

Using these tools will help you make cross-browser compatible websites... if something is not compatible, you can use these tools for debugging and fixing your work.

I hope this helps!