Forums

warnew

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:
http://browsershots.org/png/original/c5/c5bac9b3838ba30cfebae2f03f896548.png

and these are the IE ones:
http://browsershots.org/screenshots/97347e42778e88203c896cc3f30134bd/

http://browsershots.org/screenshots/b53d6391290363ea1e7ada0e77bdca20/

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>\";

The content is some posts, and a post looks like this:


<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\">Halal</a> 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 the boxes are like this one:


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

Some 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 at http://viridis.hu/index3.php, but after i got it fixed it's gona move - thats the reason for the long codes in the post.

My question is of course: how can i fix the ie versions?

warnew

So ie did not picked up the correct heights for ul#nav and div#main-in, adding 'height: 100%' to the css solved the problem.

treehouse : what would you like to learn today?

Forums

browser independence (ie fix)