SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Norway
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <div> tags problem

    I'm trying to get the background color to stretch all the way over to the other side (100% width) and it looks okay in Opera and MSIE, but not firefox, can anyone look at the code and tell me what to do?

    Stylesheet
    #blackbar {
    background: #000;
    clear: left;
    z-index: 1;
    width: 100%;
    }
    #picture {
    background: #5A84C4 url(left.jpg) no-repeat right;
    height: 100px;
    color: #FFF;
    padding-left: 25px;
    padding-top: 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:18px;
    }

    #navcontainer {
    background: #000;
    clear: left;
    z-index: 3;
    position:relative;
    margin: 0px 10% 0px 0px;
    width: 50%;
    }
    #topbar {
    position:relative;
    background: #D1DCEB;
    height: 10px;
    clear:both;
    border-bottom: 1px solid #999999;
    border-top: 1px solid #999999;
    }

    #button1, #button2, #button3, #button4, #button5, #button6 {
    padding:5px;
    border-bottom: 1px solid #999999;
    }

    #button1
    {
    background: #000;
    background-position: bottom left;
    margin-right: -1px;
    border-left: 1px solid #fff;
    }
    #button2
    {
    background: #000;
    background-position: bottom left;
    margin-right: -1px;
    border-left: 1px solid #fff;
    }
    #button3
    {
    background: #000;
    background-position: bottom left;
    margin-right: -1px;
    border-left: 1px solid #fff;
    }
    #button4
    {
    background: #000;
    background-position: bottom left;
    margin-right: -1px;
    border-left: 1px solid #fff;
    }
    #button5
    {
    background: #000;
    background-position: bottom left;
    margin-right: -1px;
    border-left: 1px solid #fff;
    }
    #button6
    {
    background: #000;
    background-position: bottom left;
    margin-right: -1px;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    }
    #button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover, #button6:hover
    {
    background-color: #7FB1ED;
    color: #FFF;
    }
    /* NAVLIST */
    #navlist {
    width: 450px;
    margin: 0 auto;
    padding: 0;
    clear:both;
    }
    #navlist ul, #navlist, #stats ul, #stats li, #navlist li {
    margin: 0;
    padding: 0;
    }
    #stats li {
    list-style-type: none;
    }
    #navlist li
    {
    float: left;
    display: block;
    width: 16.3%;
    min-height: 24px;
    }
    #navlist li a
    {
    position: relative;
    display: block;
    text-align: center;
    color: #EFEFEF;
    text-decoration: none;
    font: bold 10px Verdana, sans-serif;
    }
    #navlist li a.active, #navlist li a:active
    {
    background: #D1DCEB;
    color: #333333;
    }
    HTML Stuff..
    <link href="tabs.css" rel="stylesheet" type="text/css">
    <div id="picture">Librarium Online</div>
    <div id="topbar"></div>
    <div id="blackbar">
    <div id="navcontainer">
    <div id="blackbar">
    <ul id="navlist">

    <li><a id="button1" href="http://www.librarium-online.com" title="Librarium Online articles and news portal">Articles</a></li>
    <li><a id="button2" href="http://toplist.librarium-online.com" title="Librarium Online Toplist">Toplist</a></li>
    <li><a class="active" id="button3" href="http://gallery.librarium-online.com" title="New pictures uploaded in our gallery daily">Gallery</a></li>
    <li><a id="button4" href="http://forum.librarium-online.com" title="Our friendly and informative forum">Forums</a></li>
    <li><a id="button5" href="http://forum.librarium-online.com" title="Our friendly and informative forum">LiS</a></li>
    <li><a id="button6" href="http://forum.librarium-online.com" title="Our friendly and informative forum">Prom</a></li>

    </ul>
    </div>
    </div>
    <!-- HEADER ENDS HERE -->
    the #blackbar is the style I want to stretch all over so the background is black, like the unactive buttons..

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to clear the float for mozilla.
    Code:
    .clearer{
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    html:
    Code:
    <body>
    <link href="tabs.css" rel="stylesheet" type="text/css">
    <div id="picture">Librarium Online</div>
    <div id="topbar"></div>
    <div id="blackbar"><!-- this is an unclosed div !!-->
    <div id="navcontainer"> 
      <div id="blackbar"> 
    	<ul id="navlist">
    	  <li><a id="button1" href="http://www.librarium-online.com" title="Librarium Online articles and news portal">Articles</a></li>
    	  <li><a id="button2" href="http://toplist.librarium-online.com" title="Librarium Online Toplist">Toplist</a></li>
    	  <li><a class="active" id="button3" href="http://gallery.librarium-online.com" title="New pictures uploaded in our gallery daily">Gallery</a></li>
    	  <li><a id="button4" href="http://forum.librarium-online.com" title="Our friendly and informative forum">Forums</a></li>
    	  <li><a id="button5" href="http://forum.librarium-online.com" title="Our friendly and informative forum">LiS</a></li>
    	  <li><a id="button6" href="http://forum.librarium-online.com" title="Our friendly and informative forum">Prom</a></li>
    	</ul>
      <div class="clearer"></div>
      </div>
    </div>
    You also have an unclosed div in there which I have highlighted and needs sorting. You have already used that id so you can't use it twice anyway so it would need to be a class.

    Hope that helps.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Norway
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, It helped a lot


Bookmarks

Posting Permissions

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