• Locked
1 reply [Last post]
Wed, 2009-12-09 00:22
viRioL
viRioL's picture
Offline
newbie
Last seen: 11 years 33 weeks ago
Timezone: GMT+2
Joined: 2008-04-19
Posts: 4
Points: 5

Hi!

I have a (hopefully easy) problem with my layout. It doesn't work as it should in IE5.5 and IE6. I don't know much about CSS but I've tried to build the layout with some 100%-width divs/rows under each-other, (which I've specified the height on with pixels) with background-images.

The layout works fine in Firefox and IE7/8 but in IE5.5/6 it gets worse. In some of the divs, the background-images repeats vertically (also with wrong "starting-point", not at top-left as it should(?) be) though I've specified the height of the images so that it's the same as the height of the divs, which makes the layout strange.

I bet you don't understand a thing so here is 2 screen-shots:

Right: http://viriol.egensajt.se/firefox.jpg
Wrong: http://viriol.egensajt.se/ie6.jpg

html:

<body>
  <div id="kontainer">
    <div id="overst"></div>
    <div id="sidhuvud"><img src="bilder/logga.jpg" alt="NeoBux.se - Logga med text" /></div>
    <div id="nav_huvud">Huvudmenyn</div>
    <div id="nav_under">Undermenyn</div>
    <div id="kon_huvud"></div>
    <div id="kontenta">
      Kontentan
    </div>
    <div id="fot_kontainer">
      <div id="kon_fot"></div>
      <div id="sidfot">Sidfoten</div>
    </div>
  </div>
</body>

css:

html, body {
  height: 100%;
  background: #f5f0d2;
}
 
#kontainer {
  min-height: 100%;
  position: relative;
}
 
#overst {
  width: 100%;
  height: 13px;
  background: url(../bilder/overst_bg.gif);
}
 
#sidhuvud {
  width: 100%;
  height: 130px;
  background: url(../bilder/sidhuvud_bg.gif);
}
 
#sidhuvud img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
 
#nav_huvud {
  width: 100%;
  height: 40px;
  background: url(../bilder/nav_huvud_bg.gif);
}
 
#nav_under {
  width: 100%;
  height: 30px;
  background: url(../bilder/nav_under_bg.gif);
}
 
#kon_huvud {
  width: 100%;
  height: 10px;
  background: url(../bilder/kon_huvud_bg.gif);
}
 
#kontenta {
  /* Höjden på #fot_kontainer */
  padding-bottom: 27px;
}
 
#fot_kontainer {
  width: 100%;
  /* Höjden på #kon_fot + #sidfot */
  height: 27px;
  position: absolute;
  bottom: 0;
}
 
#kon_fot {
  height: 1px;
  background: #fffadc;
}
 
#sidfot {
  height: 26px;
  background: url(../bilder/sidfot_bg.gif);
}

URL: http://wse114848.web17.talkactive.net/neobux.se/
CSS: http://wse114848.web17.talkactive.net/neobux.se/css/huvudcss.css

I've searched but didn't find a solution for this (maybe it's to easy?).

Really hope anyone can help me!
Thanks in advice!

PS. Sorry for my bad English ...

Top
Tags:
Wed, 2009-12-09 12:32
#1
viRioL
viRioL's picture
Offline
newbie
Last seen: 11 years 33 weeks ago
Timezone: GMT+2
Joined: 2008-04-19
Posts: 4
Points: 5

*** SOLVED *** The solution

*** SOLVED ***

The solution was to put

overflow: hidden;

in #overst and #kon_huvud

Top
  • Locked