1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

I need CSS help - easy

Discussion in 'Web Design, HTML And CSS Forums' 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,276
    Likes Received:
    364
    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