www.webdeveloper.com
Results 1 to 6 of 6

Thread: Buttons question

  1. #1
    Join Date
    Mar 2003
    Location
    Escondido, CA
    Posts
    998

    Buttons question

    I'm hoping somebody has a better answer to this than to create button images.

    I've created my first site using CSS. Everything seems to work properly, except the nav buttons. I am using an external style sheet.

    What happens is that when the site is first accessed, the buttons are not displayed. What you see is textallruntogetherlikethis. The links still work, and once you visit a page, its button displays properly across the whole site.

    I can't find anything wrong with my code. I'll post it here if you think it will help, but it's pretty vanilla.

    My doctype statement is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, in case this has any bearing.

    TIA
    Aronya1

  2. #2
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571

    Re: Buttons question

    Originally posted by Aronya1
    I'll post it here if you think it will help, but it's pretty vanilla.
    Please do.
    Also tell us which browser you used.

  3. #3
    Join Date
    Mar 2003
    Location
    Escondido, CA
    Posts
    998

    Code posted

    OK, here's the code. I have to admit, I did find an error on the border-style setting of the hover & active buttons. I had a semi-colon (;) instead of a full colon (:). The code is corrected here, but I have not had a chance to test. Please let me know if you spot anything else.

    Many thanks.
    Aronya1


    a.button:link
    {
    font-size:10pt;
    font-weight:none;
    text-decoration: none;
    border-style:outset;
    border-color:white;
    border-width:5px;
    background-color:navy;
    width:"";
    color:white;
    }


    a.button:visited
    {
    font-size:10pt;
    font-weight:none;
    text-decoration:none;
    border-style:outset;
    border-color:white;
    border-width:5px;
    background-color:navy;
    width:"";
    color:white;
    }


    a.button:active
    {
    font-size:10pt;
    font-weight:none;
    text-decoration:none;
    border-style:inset;
    border-color:red;
    border-width:5px;
    background-color:white;
    width:"";
    color:red;
    }


    a.button:hover
    {
    font-size:10pt;
    font-weight:none;
    text-decoration:none;
    border-style:inset;
    border-color:red;
    border-width:5px;
    background-color:white;
    width:"";
    color:red;
    }

  4. #4
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    First of all, I'd rely on something more than just CSS to avoid textrunningintogether.
    <div class="button">
    <a href...>Link 1</a> <span>|</span> <a href...>Link2</a>...
    </div>
    and change the CSS to
    div.button a:link {...}
    and so forth. As well as add
    div.button span {display: none}

    Try using width: auto instead of width: ""; I am not sure how browsers will interpret the latter.

    To get spacing between images, set a margin (eg. margin: 0 10px}

    You can reduce the size of your CSS:
    a.button {font-size:10pt;
    font-weight:normal;
    text-decoration: none;
    border-style: outset;
    border-color:white;
    border-width:5px;
    background-color:navy;
    width:auto;
    color:white;
    }
    a.button:hover, a.button:active{border-style:inset;
    border-color:red;
    background-color:white;
    color:red;
    }

  5. #5
    Join Date
    Mar 2003
    Location
    Escondido, CA
    Posts
    998
    nkaisare,

    Thanks for the input. I'll try it out, but CSS is new to me, so I'll have to do some studying to better understand your code (I haven't used DIV or SPAN yet). I've already replaced the CSS buttons with a table (I know! I know!), but will switch it back if I can make things work.

    Thanks again, and I'll try to follow up here with the results.

    Aronya1

  6. #6
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Originally posted by Aronya1
    I've already replaced the CSS buttons with a table (I know! I know!)
    Hopefully you'll come back to CSS. We'll be "waiting for you" on this side of the fence

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles