1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Help Plzz

Discussion in 'CSS' started by raja, Jan 16, 2006.

  1. #1
    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:
    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
    http://www.raja.supersoftz.com/rajanewlay/index.htm

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

    http://www.raja.supersoftz.com/rajacss/totalcsslay.htm
    cheers
    Raja
    SEMrush
    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:
     
    raja, Jan 16, 2006 IP
    SEMrush
  2. Instromaniac

    Instromaniac Peon

    Messages:
    48
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Don't know if this will work but add this for your footer:
    #footer { clear:both; }

    A tip I wish to add is that you can make your CSS a lot smaller using short-hand properties.
    For example
    instead of this:
    #templates a{
    background-image: url(images/templates.jpg);
    background-repeat: no-repeat;
    height: 55px;
    width: 84px;
    background-position: 0px 0px;
    display: block;
    }


    You can do this:
    #templates a{
    background:transparent url(images/templates.jpg) no-repeat left top;
    height: 55px;
    width: 84px;
    display: block;
    }
     
    Instromaniac, Jan 16, 2006 IP
  3. raja

    raja Well-Known Member

    Messages:
    1,087
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #3
    where should i add it?
     
    raja, Jan 16, 2006 IP
  4. Instromaniac

    Instromaniac Peon

    Messages:
    48
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Replace this:
    #footer {
    background-color: #000000;
    background-image: url(images/footer.jpg);
    height: 66px;
    width: 760px;

    }

    With this:
    #footer {
    background-color: #000000;
    background-image: url(images/footer.jpg);
    height: 66px;
    width: 760px;
    clear: both;
    }
     
    Instromaniac, Jan 16, 2006 IP
  5. raja

    raja Well-Known Member

    Messages:
    1,087
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #5
    i just tried it Instromaniac and nothing happend :(
     
    raja, Jan 17, 2006 IP
  6. someguy

    someguy Guest

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Have you now resolved this? As it appear to work in Firefox.
     
    someguy, Jan 18, 2006 IP
  7. Instromaniac

    Instromaniac Peon

    Messages:
    48
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hmmm what about this instead:
    #footer {
    background-color: #000000;
    background-image: url(images/footer.jpg);
    height: 66px;
    width: 760px;
    clear: both;
    float:left;
    }

    Btw some comments on your html:
    First of all you should maybe use XHTML1.0 Transitional or Strict instead of HTML4.
    Secondly you write your list of navigation links like this:
    <div id="home"><a href="home.htm" class="home"></a></div>

    You shouldn't do it like that for two reasons:
    It's not semantically correct: it's a a list
    It's not accessible: users that turn images off or can't see images won't be able to navigate your site.

    You should do this instead:
    <ul id="nav">
    <li><a href="home.html" id="homelink">Home</a></li>
    <!-- and all the other links in the same way, just change the id -->
    </ul>

    Now you can do something like this to style it:
    #nav {padding:0; margin:0; list-style:none}
    #nav li {display:inline; float:left; padding:0}
    #nav li a {float:left}
    #homelink {background: transparent url(locationofimage.jpg) no-repeat 0 0; height:heightofimage; width:widthofimage; text-indent:-9999px}

    This is just to style your list like it looks now and to apply an image replacement technique. This way users using a browser that doesn't read CSS will still be able to use the navigation. Won't work for regular browsers with images turned off in that case you better do this:
    <ul>
    <li><a href="" id=""><img src="" alt="Here's the link text" /></a></li>
    </ul>
     
    Instromaniac, Jan 18, 2006 IP