SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nav button showing differently in Browsers

    I have set up some navigation buttons use CSS but when I check in the various browsers they display very differently and I can't fathom why. Everyone loves Firefox but for me it is a pain in this instance.

    This is the CSS I have coded:

    #leftside ul.topics {
    list-style: none;
    color: #ffffff;
    text-decoration: none;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 40px;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    }
    #leftside ul.topics li {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: url(../images/nav_buttons_1.gif) no-repeat;
    text-align: left;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    padding-left: 15px;
    padding-top: 0px;
    }
    #leftside ul.topics li a:link {
    color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    margin-top: 5px;
    }
    #leftside ul.topics li a:visited {
    color: #C0DCC0;
    text-decoration: none;
    }
    #leftside ul.topics li a:active {
    color: #000000;
    text-decoration: none;
    background: url(../images/nav_buttons_1_active.gif) no-repeat;
    display: block;
    }
    #leftside ul.topics li a:hover {
    font-size: 100%;
    color: #FFFF00;
    text-decoration: none;
    }

    I have attached pics of what I have. First is what it looks like in Dreamweaver, then in IE7, then Firefox, then Firefox with text enlarged and lastly Netscape.
    Attached Images Attached Images
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  2. #2
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your attachments are pending approval so ... in the meantime ... could you provide a link so we can actually see what's going on?

  3. #3
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure - http://www.denvor.bartwebsites.com/

    It is still very much in development but I am frustrated with the look of these buttons in Firefox and Netscape. Also shows correctly in Maxthon.
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  4. #4
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding a height: 36px; to #leftside ul.topics li

    You'll have to play with padding to center your text vertically an adjust the height to compensate to that but ... that should get your bubble background to show up..

  5. #5
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great stuff - problem solved immediately.

    You can see how green I am with CSS - but I love it. I really think it is the way to go and not table for websites.

    I must admit for a "little" girl (your avatar) you are very good. You will be the world's best developer when you grow up

    Thank you again for the prompt solution.
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  6. #6
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank for the compliment

    Problems like this are very common when starting out with CSS ... I make them even now sometimes

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your <h4>Denvor has been writing songs since 1983</h4> the text doesn't drop a line as the screen reduces widthways making the first words impossible to read.

  8. #8
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much SRD I was so focussed on the buttons that I never noticed it. I will now have to fugure out why and what to do to solve the problem.
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com


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
  •