One more coding Problem ;|

[Recursion]

Hello,

I have this code:

CSS:

#left {
 float: left;
 width: 143px;
 height: 100%;
 font-size: 2px;
}
#top_left {
  background-image: url(images/top_left.gif);
  width: 143px;
  height: 14px;
  text-align: center;
  font-family: "Tahoma", Verdana;
  font-size: 10px;
  color: #FFFFFF;
  font-weight: bold;
}
#top_left_below {
  background-image: url(images/top_left_bot.gif);
  height: 179px;
  padding-left: 4px;
  font-family: "Tahoma", Verdana;
  font-size: 10px;
  color: #FFFFFF;
}
#left_title {
  background-image: url(images/left_title_bg.gif);
  height: 15px;
  text-align: center;
  font-family: "Tahoma", Verdana;
  font-size: 10px;
  color: #FFFFFF;
  font-weight: bold;
  padding-top: 2px;
}
#left_second {
  background-image: url(images/left_bg.gif);
  height: 250px;
  padding-left: 4px;
  font-family: "Tahoma", Verdana;
  font-size: 10px;
  color: #FFFFFF;
  /* NOT WORKING IN IE */
  
}
#left_third {
  background-image: url(images/left_third.gif);
  /* DOESNT WORK IN IE */
  min-height: 167px;
  text-align: center;
}

(sorry if thats not all the CSS for the HTML Below, but it is all there in my CSS File.)

HTML:

<div id="left">
 <div id="top_left">
   <div align="left">Radio Stats:</div>
 </div>
 
 <!-- First left box -->
 <div id="top_left_below"><iframe allowtransparency="true" height="170px" src="radio_stats/radio_stats.php" width="140px" scrolling="no" frameborder="0" id="radiostatsframe"></iframe>
   <div align="left"></div>
 </div>
 <!-- / First left box -->
 
<!-- Second box title -->
    <div id="left_title">
      <div align="left" >Navigation:</div>
    </div>
    <!-- / Second box title -->
 
    <!-- Second left box -->
    <div id="left_second">
      Home Page<br />
      News<br />
      Radio<br />
      Games<br />
      Guides<br />
      HabboLab Forum<br />
        Job Openings<br />
        Contact Us<br />
        Surely some more links?<br />
        And again<br />
        ... and again!!<br />
        But mabie<br />
        baby I <br />
        could put<br />
        a drop<br />
        down navigation<br />
        here. That<br />
        might be<br />
        pretty cool!    </div>
    <!-- / Second left box --> 
 <!-- Third left box -->
 <div id="left_third">
 
 <div id="break"></div>
 
  <div id="box">
    <div id="box_top"></div>
   
<!-- Box MID -->
   <div id="box_mid">A<br />
     DJ AVATER<br />
        WILL<br />
           MOST<br />
              LIKELY<br />
              GO<br />
              HERE<br />
              :)<br />
                <br />
              Thanks,<br />
              Tom ;)<br />
                <br />
              P.S. I LUV JAFFA CAKES PLEASE.<br />
    </div>
<!-- / Box MID -->
   
   <div id="box_bot"></div>
  
            <p>&nbsp;</p>
  </div>
   <!-- / Box container -->
 </div>
 <!-- / Third left box -->
</div>

But this happens:

IE:
http://www.uploadz.co.uk/705ie.png


FireFox:
http://www.uploadz.co.uk/288firefox.png


It should be expanding to the bottom of the page but isn't

Please Help!
Tom

[Mashi]

Pixel2life.com - Theres a tut on that

[Recursion]

I can't find it :S

[*]

Try adding:

  position: absolute;

In the #top_left_below class.

[Recursion]

Doesn't work

[*]

Can i see the CSS of: box, box_top, box_mid and box_bot please.

[Recursion]

All of the CSS Code:

body {
		margin: 0px;
		background: url(images/bottom_BG.gif) fixed bottom #69a8dc;
		background-position: bottom;
		background-repeat: repeat-x;
		height: 100%;
		
}
#hm {
		height: 100%;
		float: left;
}
#left {
	float: left;
	width: 143px;
	height: 100%;
	font-size: 2px;
}
#right {
		float: left;
		width: 410px; 
		font-family: "Tahoma", Verdana;
		font-size: 10px;
}
#top_left {
		background-image: url(images/top_left.gif);
		width: 143px;
		height: 14px;
		text-align: center;
		font-family: "Tahoma", Verdana;
		font-size: 10px;
		color: #FFFFFF;
		font-weight: bold;
}
#top_left_below {
		background-image: url(images/top_left_bot.gif);
		height: 179px;
		padding-left: 4px;
		font-family: "Tahoma", Verdana;
		font-size: 10px;
		color: #FFFFFF;
		
}
#left_title {
		background-image: url(images/left_title_bg.gif);
		height: 15px;
		text-align: center;
		font-family: "Tahoma", Verdana;
		font-size: 10px;
		color: #FFFFFF;
		font-weight: bold;
		padding-top: 2px;
}
#left_second {
		background-image: url(images/left_bg.gif);
		height: 250px;
		padding-left: 4px;
		font-family: "Tahoma", Verdana;
		font-size: 10px;
		color: #FFFFFF;
		/* NOT WORKING IN IE */
		
}
#left_third {
		background-image: url(images/left_third.gif);
		/* DOESNT WORK IN IE */
		min-height: 167px;
		text-align: center;
}
/* Small box #1 */
#box {
	padding-top: 30px;
	padding-left: 8px;
	text-align: center;
	font-family: "Tahoma", Verdana;
	font-size: 10px;
	position: fixed;
}
#box_top {
		background-image: url(images/third_box_top.gif);
		background-position: bottom;
		background-repeat: no-repeat;
		width: 123px;
		height: 6px;
}
#box_mid {
		background-image: url(images/third_box_mid.gif);
		width: 123px;
}
#box_bot {
		background-image: url(images/third_box_bot.gif);
		width: 123px;
		height: 6px;
		background-position: top;
		background-repeat: no-repeat;
}
/* Right */
#banner {
		background-image: url(images/banner.gif);
		width: 410px;
		height: 124px;
}
.content_mid {
		background-image: url(images/content_mid.gif);
		width: 398px;
		padding-right: 4px;
		padding-left: 8px;
		padding-top: 6px;
}
#content_top {
		background-image: url(images/content_top.gif);
		background-position: bottom;
		background-repeat: no-repeat;
		height: 10px;
}
#break {
		background-image: url(images/three_breal.gif);
		background-repeat: no-repeat;
		height: 5px;
}
#banner_below {
		background-image: url(images/content_top.gif);
		background-repeat: no-repeat;
		background-position: bottom;
		height: 10px;
}
.style1 {
	font-size: 9px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
.style2 {
	color: #FFFFFF;
	font-size: 9px;
}

[Coldplay]

#left_second {
        background-image: url(images/left_bg.gif);
        background-repeat: repeat-x;
        height: 250px;
        padding-left: 3px;
        font-family: "Tahoma", Verdana;
        font-size: 10px;
        color: #FFFFFF;
        /* NOT WORKING IN IE */
        
}

[L?KE]

Instad of writing in css and xhtml, make an image, then slice and code it.

[ScottDiamond]

Instad of writing in css and xhtml, make an image, then slice and code it.

I think I speak on behalf of all the web designers within this section. I'm speaking on behalf of RichardKnox especially here... *thinks of something nice to say*. Mhmm... **** off you ******* ******.