...

View Full Version : CSS Help Plzz



raja19
01-16-2006, 08:29 AM
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 original table based layout and the one iam trying with pure css and also the one i fixed using overflow option. Need a help plzz.

This is the original Layout which i wanted to convert into a pure css based one:
Click Here (http://www.raja.supersoftz.com/rajanewlay/index.htm)

This is My Effort so far and the problem am having is when i view it in Firefox1.5
Click Here (http://www.raja.supersoftz.com/rajacss/totalcsslay.htm)

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

Click Here (http://www.raja.supersoftz.com/csstesting/css/totalcsslay1.htm)
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;
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;
}

cheers
Raja:thumbsup:

ronaldb66
01-16-2006, 12:35 PM
As far as I can see, you gave two links to the exact same page...

raja19
01-16-2006, 04:48 PM
ok i fixed the Links plzz see it in Firefox plzz . Plzz help me plzz.

drhowarddrfine
01-16-2006, 08:52 PM
This is an error in IE, not Firefox. IE is incorrectly expanding your divs. Google for "clear floats" for your answer.

drhowarddrfine
01-16-2006, 08:54 PM
Also, your scrollbar CSS code is for IE only and non-standard so it won't work in any other browsers.

raja19
01-17-2006, 05:04 PM
plzz some one help me am a novice in css.plzz.

mark87
01-17-2006, 05:06 PM
plzz some one help me am a novice in css.plzz.

That's exactly how NOT to get help. :(

raja19
01-17-2006, 06:09 PM
ok i used thiscode nothing happend :( plz some one help me
#footer {
background-color: #000000;
background-image: url(images/footer.jpg);
height: 66px;
width: 760px;
clear: both;

Shadowbox
01-17-2006, 06:46 PM
Have you tried adding a height: 100% to your body and wrapper tags?

raja19
01-17-2006, 06:54 PM
body?

Shadowbox
01-17-2006, 07:42 PM
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;
}

in there. Add a height: 100%;

raja19
01-18-2006, 06:01 PM
nope it didnt worked shadowbox:(

Shadowbox
01-18-2006, 07:50 PM
Did you add the height tag to both the body AND the wrapper elements?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum