CSS Help plzz

raja · Joined: 14 Jan 2006 Posts: 11

hey see my css plzz. Its working good in IE6 But when i see it in Firefox 1.0.7 the text is overflowing towards the bottom. Any one can help me plzz? i can fix this by setting up overflow:auto; but it gives a scrollbar which i dont want. I want my layout to strtch in tandum with the content i mean the DIV #leftcontent. Plz some one help me plzz.Thanks in advance.
Click HereFor LiveDemo
cheers
Raja Very Happy

body {

SCROLLBAR-FACE-COLOR: #DFB98F;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #666666;
SCROLLBAR-3DLIGHT-COLOR: #333333;
SCROLLBAR-ARROW-COLOR: #481D12;
SCROLLBAR-TRACK-COLOR: #333333;
SCROLLBAR-DARKSHADOW-COLOR: #999999;
background-color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #000000;

}
#contentbg {
background-color: #FFFFFF;
background-image: url(images/main.jpg);
background-repeat: repeat-y;
width: 760px;
height: 317px;
}
#lftcontent {
background-color: #FFFFFF;
width: 440px;
float: left;
position: relative;
left: 40px;
text-align: justify;
padding: 0px;
height: 317px;
}
#contentholder {
}

#rhtcontent {
background-color: #FFFFFF;
height: 317px;
width: 238px;
float: left;
position: relative;
left: 40px;
}

#header {
background-image: url(images/header.jpg);
height: 162px;
width: 760px;
background-repeat: no-repeat;
}
#navbar {
background-image: url(images/button.jpg);
background-repeat: no-repeat;
height: 55px;
width: 760px;
}

#footer {
background-color: #000000;
background-image: url(images/footer.jpg);
height: 66px;
width: 760px;

}
#home{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 88px;
float: left;
position: relative;
left: 40px;
}
#home a {
background-image: url(images/home.jpg);
background-repeat: no-repeat;
height: 55px;
width: 88px;
background-position: 0px 0px;
display: block;
}
#home a:hover{
background-image: url(images/home_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#portfolio{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 86px;
float: left;
position: relative;
left: 40px;
}
#portfolio a{background-image: url(images/portfolio.jpg);
background-repeat: no-repeat;
height: 55px;
width: 86px;
background-position: 0px 0px;
display: block;

}
#portfolio a:hover{
background-image: url(images/portfolio_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#forum{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 82px;
float: left;
position: relative;
left: 40px;
}
#forum a{
background-image: url(images/forum.jpg);
background-repeat: no-repeat;
height: 55px;
width: 82px;
background-position: 0px 0px;
display: block;
}
#forum a:hover{
background-image: url(images/forum_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#templates{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 84px;
float: left;
position: relative;
left: 40px;
}
#templates a{
background-image: url(images/templates.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}
#templates a:hover{
background-image: url(images/templates_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#tutorials{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 82px;
float: left;
position: relative;
left: 40px;

}
#tutorials a{
background-image: url(images/tutorials.jpg);
background-repeat: no-repeat;
height: 55px;
width: 82px;
background-position: 0px 0px;
display: block;
}
#tutorials a:hover{
background-image: url(images/tutorials_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}

#flash{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 82px;
float: left;
position: relative;
left: 40px;
}
#flash a{
background-image: url(images/flash.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}
#flash a:hover{
background-image: url(images/flash_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#graphics{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 84px;
float: left;
position: relative;
left: 40px;
}
#graphics a{
background-image: url(images/graphics.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}
#graphics a:hover{
background-image: url(images/graphics_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#feedback{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial, helvetica sans-serif;
height: 55px;
width: 89px;
float: left;
position: relative;
left: 40px;
}
#feedback a{
background-image: url(images/feedback.jpg);
background-repeat: no-repeat;
height: 55px;
width: 89px;
background-position: 0px 0px;
display: block;
}
#feedback a:hover{
background-image: url(images/feedback_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}

.maintext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
A.type1:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;

}
A.type1:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
A.type1:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #CC00CC;
text-decoration: line-through;
}
A.type1:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-decoration: underline overline;

}
.tinytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF6600;
}
.textt {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF0099;
}
#shoutheader{
background-image: url(images/shoutheader.jpg);
background-repeat: no-repeat;
height: 53px;
width: 238px;
}
#shoutcontent{
height: 228px;
background-image: url(images/shoutmain.jpg);
background-repeat: repeat-y;
}
#shoutfooter{
background-image: url(images/shoutbottom.jpg);
background-repeat: no-repeat;
height: 36px;
width: 238px;
}

Corey Bryant · Posted: Sat Jan 14, 2006 12:44 pm

Try adding overflow to the lftcontent

raja · Joined: 14 Jan 2006 Posts: 11

Corey Bryant i know that i tried it and its working See It Here .But i dont want a scroll bar there i wanted my site to strtchLike this Its a table based Layout. plzz can u help me plzz?Thanks in advance

Corey Bryant · Posted: Sun Jan 15, 2006 6:15 am

If you do not want a scroll - then you do not need to add a height to your element. Adding a height will give it that attribute

raja · Joined: 14 Jan 2006 Posts: 11

Core Bryant i tried it yet am having same trouble plzz help me Crying or Very sad

Corey Bryant · Posted: Sun Jan 15, 2006 3:15 pm

AAIt looks like you have it here. Or is that using the tables?

Did you remove the height attribute to allow it to expand?

raja · Joined: 14 Jan 2006 Posts: 11

Core Bryant its table based one.i wanted my css layout to stretch like that. i made this template using fireworks-8. plz help me. Crying or Very sad

Corey Bryant · Posted: Mon Jan 16, 2006 4:21 am

Ok - sorry you gave me too much information. I only need the informtion / pages that you are working on.

On your page here, did you delete the height & width on the lftcontent?

raja · Joined: 14 Jan 2006 Posts: 11

Corey Bryant thatone i fixed it using "overflow:auto;" but i am talking abt This. plzzz help me Crying or Very sad

And yes i did removed the height and width. its not working still

Corey Bryant · Posted: Mon Jan 16, 2006 9:15 am

it looks almost the same to me - what is the exact problem with it?

raja · Joined: 14 Jan 2006 Posts: 11

see it in Firefox

Corey Bryant · Posted: Tue Jan 17, 2006 4:13 am

Try getting rid of the height in contentbg and what does contentholder do?

raja · Joined: 14 Jan 2006 Posts: 11

Corey Bryant i just tried it its of no use.

Corey Bryant · Posted: Tue Jan 17, 2006 11:06 am

Ask the guys and glas at International Web Developers Network

raja · Joined: 14 Jan 2006 Posts: 11

Corey Bryant whats Grear abt that forum? noone can help me out inthis wonderfulforum? Crying or Very sad

do u know any other forums on css plzz. Thanks in advance
cheers
Raja