Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: CSS Help Plzz

  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    39
    Thanks
    9
    Thanked 1 Time in 1 Post

    Thumbs up CSS Help Plzz

    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

    This is My Effort so far and the problem am having is when i view it in Firefox1.5
    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;
    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
    Last edited by raja19; 01-16-2006 at 05:43 PM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Same page

    As far as I can see, you gave two links to the exact same page...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    39
    Thanks
    9
    Thanked 1 Time in 1 Post
    ok i fixed the Links plzz see it in Firefox plzz . Plzz help me plzz.

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    This is an error in IE, not Firefox. IE is incorrectly expanding your divs. Google for "clear floats" for your answer.

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Also, your scrollbar CSS code is for IE only and non-standard so it won't work in any other browsers.

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    39
    Thanks
    9
    Thanked 1 Time in 1 Post
    plzz some one help me am a novice in css.plzz.

  • #7
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by raja19
    plzz some one help me am a novice in css.plzz.
    That's exactly how NOT to get help.

  • #8
    New Coder
    Join Date
    Jan 2006
    Posts
    39
    Thanks
    9
    Thanked 1 Time in 1 Post
    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;

  • #9
    New Coder
    Join Date
    Jan 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Have you tried adding a height: 100% to your body and wrapper tags?

  • #10
    New Coder
    Join Date
    Jan 2006
    Posts
    39
    Thanks
    9
    Thanked 1 Time in 1 Post
    body?

  • #11
    New Coder
    Join Date
    Jan 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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%;

  • #12
    New Coder
    Join Date
    Jan 2006
    Posts
    39
    Thanks
    9
    Thanked 1 Time in 1 Post
    nope it didnt worked shadowbox

  • #13
    New Coder
    Join Date
    Jan 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Did you add the height tag to both the body AND the wrapper elements?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •