prince20

hey see my css plzz. Its working exactly what i wanted in IE6 But when i see it in Firefox 1.5 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 . Plz some one help me plzz.Thanks in advance. Iam giving the URLS of my originaltable based layout and the one iam trying css and also the one i fixed using overflow option. Need a help plzz
This is the original Lay out which i wanted to convert into a pure css based one:
Click Here

This is My Effort so far and the problem am having wheni view it in Firefox
Click Here

This the one i fixed using Overflow option. I Dont like scrollbar there.

Click Here
cheers
Raja

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;
????: NamePros.com http://www.namepros.com/programming/157821-css-help-plzz.html
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #000000;

}
#contentbg {
background-color: #FFFFFF;
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/header.jpg);
height: 162px;
width: 760px;
background-repeat: no-repeat;
}
#navbar {
background-image: url(http://cdn.namepros.com/images/button.jpg);
background-repeat: no-repeat;
height: 55px;
width: 760px;
}

#footer {
background-color: #000000;
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/home.jpg);
background-repeat: no-repeat;
height: 55px;
width: 88px;
background-position: 0px 0px;
display: block;
}
#home a:hover{
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/portfolio.jpg);
background-repeat: no-repeat;
height: 55px;
width: 86px;
background-position: 0px 0px;
display: block;


}
#portfolio a:hover{
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/forum.jpg);
background-repeat: no-repeat;
height: 55px;
width: 82px;
background-position: 0px 0px;
display: block;
}
#forum a:hover{
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/templates.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}
#templates a:hover{
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/tutorials.jpg);
????: NamePros.com http://www.namepros.com/showthread.php?t=157821
background-repeat: no-repeat;
height: 55px;
width: 82px;
background-position: 0px 0px;
display: block;
}
#tutorials a:hover{
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/flash.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}
#flash a:hover{
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/graphics.jpg);
background-repeat: no-repeat;
height: 55px;
width: 84px;
background-position: 0px 0px;
display: block;
}
#graphics a:hover{
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/feedback.jpg);
background-repeat: no-repeat;
height: 55px;
width: 89px;
background-position: 0px 0px;
display: block;
}
#feedback a:hover{
background-image: url(http://cdn.namepros.com/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(http://cdn.namepros.com/images/shoutheader.jpg);
background-repeat: no-repeat;
height: 53px;
width: 238px;
}
#shoutcontent{
height: 228px;
background-image: url(http://cdn.namepros.com/images/shoutmain.jpg);
background-repeat: repeat-y;
}
#shoutfooter{
background-image: url(http://cdn.namepros.com/images/shoutbottom.jpg);
background-repeat: no-repeat;
height: 36px;
width: 238px;
}

cheers
Raja

prince20

plzz some one help me

VI5

Fix:

#lftcontent {
background-color: #FFFFFF;
width: 440px;
float: left;
position: relative;
left: 40px;
min-height: 317px;
text-align: justify;
}

In DIVs if you define the heights the content will overflow and the div will not expand. I have changed it to min-height so it can now expand.

Good Luck

dongan

Anohter great tip i learnt today.

__________________
MercuryMinds - Professional X-Cart Design, X-Cart Development, X-Cart Customization Services

MercuryMinds - X-Cart addons, modules

youngspider

Oh YEh A NEw Tip