How to make this site browser independent

Question

I got this page, and have some problems with ie < 7 and opera 7.11

This is what i hoped to be the layout in all browsers, and these are the IE ones instead: ie 5.5 and ie 6.0.

the xhtml is quite simple:

print "<div id=\"page\">
  <div id=\"header\">
    <ul id=\"nav\">
      <li><a href=\"/\" class=\"first\">Címlap<div>Az oldal címlapja</div></a></li>
      <li><a href=\"/blog\">Blogok<div>Minden bejegyzés</div></a></li>
      <li><a href=\"/friss\">Friss tartalom<div>Aktuális témák</div></a></li>
    </ul>
  </div> <!-- header -->
  <div id=\"main\"><div id=\"main-in\">
    <div id=\"right\">";
      do_boxes();
print "
    </div> <!-- right -->
    <div id=\"left\">";
      do_content();
print"</div> <!-- left -->

</div></div><!-- main --> </div>";

Where a the content made from posts and a post looks like:

   <div class="post">
      <h2><a href="/blog/2/252/newcastleben-betiltottak-a-ketreces-tojast">Newcastleben betiltották a ketreces tojást</a></h2>
      <div class="author">warnew | 2008. october   16. 20:26 </div>
      <p>Az angliai Newcastle Városi Tanácsa kitiltotta a ketreces baromfitartásból származó tojásokat az iskolai étkeztetésből, személyzeti éttermekből, rendezvényekről es a "hospitality outletekből".</p>

      <p>A ketreces csirke- és pulykahúst még nem tiltották be, de vizsgálják a kérdést, ahogy a <a href="http://en.wikipedia.org/wiki/Halal"&gt;Halal&lt;/a&gt; hús és a ketreces tojásból készült sütemények és tésztafélék tiltását is.</p>

      <ul class="postnav">
        <li><a href="/blog/2/252/newcastleben-betiltottak-a-ketreces-tojast%7D">Tovább</a></li>
        <li><a href="/blog/2/252/newcastleben-betiltottak-a-ketreces-tojast#comments">Hozzászólások (0)</a></li>
      </ul>
    </div> <!-- post -->

and a box is like this:

<div id="ownadbox" class="box">
  <h5>Viridis matrica</h5>
  <a href="http://viridis.hu/blog/2/172/nepszerusits-minket" title="Népszerűsíts minket"><img src="http://viridis.hu/files/viridis_matrica_jobb.png" alt="viridis matrica"/></a>
</div>

The -what i think is - relevan css:

body {
  background      : transparent url(/images/design/background.png) repeat;
}

#page {
  margin          : 0px auto;
  width           : 994px;
  background      : transparent url(/images/design/header.jpg) no-repeat top left;
}
div#header {
  width           : 746px;
  margin          : 0px auto;
}
div#header ul#nav {
  padding-top     : 170px;
  margin-left     : 3px;
  margin-right    : 3px;
  border-bottom   : #896e51 solid 7px;
  overflow        : hidden;
}

div#header ul#nav li {
  display         : block;
  float           : left;
  width           : 120px;
  margin-bottom   : 7px;
}

div#main {
  width           : 746px;
  margin          : 0px auto;
}

div#main div#main-in {
  padding         : 30px 20px;
  background      : transparent url(/images/design/content-background.png) repeat-y top left;
  overflow        : hidden;
}
div#main div#main-in div#left {
  width           : 460px;
  overflow        : hidden;
  float           : left;
}

div#main div#main-in div#left div.post {
  clear           : left;
  margin-bottom   : 35px;
}

div#main div#main-in div#right {
  width           : 215px;
  float           : right;
}

div#main div#main-in div#right div.box {
  margin-bottom   : 30px;
  clear           : both;
}

The live version is here, but after I got it fixed it's gona move - thats the reason behind the long codes in the post.

Answer 1

Take a look at a stripped-down layout that works, such as on A List Apart. Start with a working layout such as this and then edit it to your liking. I find this is easier than trying to fix a broken layout.

Answer 2

Well, your CSS is just fine, and it even validates in W3C, the problem is with old IE browsers. You'll have to hack your CSS with ugly code to make it work in those browsers.

Or you can just redirect users of those browsers to a simpler version of the website.

Answer 3

IE was never famous for its CSS support (it's infamous for its lack of support, and its bugs)... But if you really want to support old IE versions I recommend that you use conditional comments to add extra CSS files for the specific quirks of the older versions. But before you apply specific css, try making the pure HTML as semantic as possible, make its layout is almost how you want it without CSS, then style it afterwards.

I would also recommend that you check out Yahoo's YUI Reset CSS wich makes consistent styling a lot easier. I actually had to add just 3 lines of CSS specifically for IE7 to make a large project look OK, when I used it(!). And by the way: always code by the standards, and test in Firefox, Opera or Safari first, test later in IE.

Opera 7 is pretty old, I would guess most Opera users update their browsers more often than IE users (since they've actually made a choice to switch browsers).

Answer 4

Do you really need to support IE5.5? That seems needlessly painful. Unless you're explicitly doing this for a client who's using the browser, you can pretty much assume that everyone uses IE6 or later.

The CSS support in IE6 is flaky, and almost nonexistent in IE versions older than that. Your best bet for such ancient browsers may be to just display a separate version of the site for those

Edit: There are several things you can do to patch up IE. Conditional comments can be used to add specific javascript and CSS hacks for various versions of IE, and the following files in particular, do a lot to add in missing functionality:

<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

In addition, make sure IE doesn't jump into quirks mode. There are simple javascript snippets that test which mode the current page is being rendered in, but the main way to avoid quirks mode is to ensure that there is nothing (not even the <?xml prolog tag) before the doctype, and that the doctype is strict.

Answer 5

Start by fixing validation errors. I know it's silly to expect IE 5.5 to follow standards, but it might help for Opera. Other thing to thing about is whether you really need to support these ancient browsers.

Answer 6

Do your markup and CSS correctly for the now/future browsers... but to fix the specific versions of IE, I would recommend making a seperate css file, and only conditionally referrencing them. This way, you don't have to muddy up your good design or CSS files with hacks.

Also, shoot for IE6, but don't worry about IE5. It's less than 0.1% of the market now: http://www.w3schools.com/browsers/browsers_stats.asp

Answer 7

I can live without ie 5.5, and opera 7 but ie 6 is important.

I'm already using a reset.css, and I sure can conditional styles.

So the problem was the following: ie<7 didn't picked up the correct height for the ul#nav and div#main-in elements. Adding the style: height: 100%; to them solved the problem.

Answer 8

I've always found this site very useful with tips on cross-browser compatibility in general:

http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/