SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Page Design Problems

    I'm playing around with making a design using div's and css, but I'm having a few problems. Here's my page and code:

    http://home.wi.rr.com/creedfeed/sample.html

    Top row has a logo and an ad box. Next row has tabs and a blue bar below them. Looking at the design in IE shows what I want to accomplish. The problem, however, is that it does not work in other browsers properly.

    Mozilla, Firebird = the first, active tab has a white background instead of the blue

    Opera = there is a huge gap between the tabs and the blue bar (there should be no gaps).

    Can anyone take a look at my CSS code and let me know what I'm doing wrong? Any obvious errors I'm making? I'm still new to the CSS design thing. Thanks a lot!
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this, make sure to define margin and padding for all DIV tags related to the problem. You problem may be related to the fact that these weren't defined for <div id="bluebar">.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KLB
    Try this, make sure to define margin and padding for all DIV tags related to the problem. You problem may be related to the fact that these weren't defined for <div id="bluebar">.
    I defined a margin and padding for #bluebar and it still gives the same results?
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

  4. #4
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I missed this first go around, try also adding margin and padding definitions to #navbar and #tablist.

    When in doubt always define margin and padding. Many times this will resolve problems.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  5. #5
    SitePoint Member Hormone's Avatar
    Join Date
    Nov 2003
    Location
    Wrong Flight
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey CreedFeed, nice work!

    I made a couple of changes (below) and did a cursory check in IE (5.01, 5.5, 6.x), Firebird 0.7, Mozilla 1.4 and redundantly, Netscape 6.1 and 7.0. It works fine in those browsers. Don't have Opera installed on this system right now so can't check that for you.

    WAS:

    .tabactive, a.tabactive:link, a.tabactive:visted, a.tabactive:hover {
    background-color: #369;
    border-bottom: 1px solid #369;
    color: #fff;
    }

    CHANGE TO:

    .tabactive {
    background-color: #369;
    border-bottom: 1px solid #369;
    color: #fff;
    }
    a.tabactive:link, a.tabactive:visted, a.tabactive:hover {
    background-color: #369;
    border-bottom: 1px solid #369;
    color: #fff;
    }

    Why? I have my thoughts and assumptions, but since I'm still learning myself I'll leave the 'real' technical explanation to the more experienced. Perhaps one will respond here. I just used a little logical deduction to isolate the problem.

    Hope this helps!

  6. #6
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the comments everyone. I'm still trying to fix the problems I described up above... I'm still learning CSS page design myself, so all comments and ideas are greatly appreciated!
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>

    <title>Sample Page</title>

    <style type="text/css">
    <!--
    body
    {
    background: #fff;
    color: #333;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: small;
    margin: 0;
    padding: 0;
    }

    #header {
    width: 100%;
    height: 68px;
    }

    #logobox
    {
    float: left;
    background-color: #fff;
    color: #000;
    }

    #adbox
    {
    width: 468px;
    height: 60px;
    border: 1px dashed #06c;
    background-color:#fff;
    color: #000;
    position:absolute;
    top:0;
    right:0;
    }

    #tabs
    {
    width: 100%;
    clear: both;
    background:white;
    text-align:center;
    padding:10px;
    }

    #tabs a
    {
    font: bold 100% Verdana;
    text-align: center;
    text-decoration: none;
    padding:10px;
    border-right:1px solid white;
    }

    a:link {
    background-color: #999;
    color: #eee;
    }

    a:visited {
    background-color: #999;
    color: #eee;
    }

    a:hover {
    background-color: #f90;
    color: #fff;
    }

    #tabactive
    {
    background: #336699;
    color: #ffffff;
    padding:10px;
    border-right:1px solid white;
    }

    #bluebar {
    padding: 0;
    margin: 0;
    background-color: #369;
    border-top:2px solid #369;
    }
    -->
    </style>

    </head>

    <body>

    <div id="header">
    <div id="logobox"><h3>Site Logo</h3></div>
    <div id="adbox">advertisement</div>
    </div>
    <div id="tabs"><span id="tabactive">Tab One</span><a href="#">Tab Two</a><a href="#">Tab Three</a><a href="#">Tab Four</a><a href="#">Tab Five</a></div>
    <div id="bluebar">&nbsp;</div>

    </body>
    </html>


    give this stylesheet a try

    it works in Opera 7, N 7, and IE 5.5

    I'm not sure why I have to specifiy padding for both the tabs div and the hyperlinks themselves, but if you don't, the height don't adjusted nicely.


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
  •