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
http://www.uploadz.co.uk/705ie.png

FireFox:
http://www.uploadz.co.uk/288firefox.png
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 ******* ******.

[Recursion]

L?ke - You have to Slice it to code it, And above is my code ;| I will NOT let a program code for me.

EDIT: To 'TheMagicMen' that code didn't work :(

[Coldplay]

Try

Background Repeat: Repeat-y;

[Recursion]

In which part of code?

EDIT: Doesn't work :(

[Coldplay]

Got skype / msn?

[Recursion]

MSN: public@***********.co.uk :)