I need CSS help - easy

Discussion in 'Web Design, HTML And CSS' started by Horath, Jan 21, 2009.

  1. Horath

    Horath New Member

    Joined:
    Jan 20, 2009
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    I have a CSS document, and I want a thin colored bar on the side. This is my code:

    div#trans1 { background:#080000;
    width: 7px;
    height: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    }

    The w3c CSS validator said it was good, and it works perfectly in Internet explorer.


    But it doesn't work in Firefox, Netscape, or Opera. I see a bar w/ the correct width, and color, but it is not 100% the screen size.

    ASAP help would be appreciated, so please reply soon if you have an answer for me!

    Once again, many thanks!
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Moved to CSS forum for better response.
     
  3. nInE-tAIls

    nInE-tAIls New Member

    Joined:
    Jan 21, 2009
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    can you give me a screen shot of your work? may be I can help you.
     
  4. skp819

    skp819 New Member

    Joined:
    Dec 8, 2008
    Messages:
    89
    Likes Received:
    3
    Trophy Points:
    0
    Hope your asking for that.
    Code:
    body {
        behavior: url(csshover.htc);
        font-size:11px;
        font-family:Arial, Helvetica, sans-serif;
    }
     
    p a {
        color:     #000;
        text-decoration:underline!important;
    
    }
    a{
        color:    #000;
        text-decoration:none;
        }
    p a:hover{    text-decoration: none!important;
    }
    
    ul#nav {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    
    ul#nav li a {
        display: block;
        font-weight: bold;
        padding: 2px 10px;
        background:    #A52A2A;
    }
    
    ul#nav li a:hover{
        background:#888;
        color:#fff;
        }
        
    li {
        float: left;
        position: relative;
        width: 100px;
        text-align: center;
        margin-right:5px;
        border:1px solid #ccc;
    
    }
    
    ul#nav li.current a{
        background:    #A52A2A;
        }
    
    ul#nav li.current a:hover{
        background:    #A52A2A;
        }
    
    li ul {
        display: none;
        position:absolute;
        width:100px;
        top: 18px;
        left: 0;
        font-weight: normal;
        padding: 1px 0 10px 0;
        margin-left:-1px;
    }
    
    ul#nav li ul.sub li{
        border-width:0 1px 1px 1px!important;
    }
    
    ul#nav li ul.sub li a{
        font-weight: normal!important;    
    }
    li>ul {
        top: auto;
        left: auto;
    }
    
    li:hover ul, li.over ul {
        display: block;
    }
    
    </style>
    
    
     
    shabbir likes this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice