Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Jun 2005
    Posts
    19
    Member #
    10364
    I'm doing a little bit of work on an amateur website located at http://www.starwing.co.uk/enter.htm.

    That is the original website.

    However, my question does not concern it. I intend to replace the image buttons with non-image buttons to decrease loading time.

    The result can be seen at http://www.starwing.co.uk/test/enter.htm. The image buttons have been replaced with text links that have been given borders and background colour.

    The entire navigation bar is driven by this css sheet:

    body { font-size: 4pt;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    color: #ffffff;
    background-color: #707070;
    margin-left: 5
    }

    p { font-size: 12pt;
    background-color: #000000;
    border: 3px solid;
    border-color: #555555 #333333 #333333 #555555;
    left: 0px;
    margin: 5px;
    text-align: center;
    line-height: 150%;
    width: 100%;
    }

    a:link { font-size: 12pt;
    background-color: #344fee;
    border: 3px solid;
    border-color: #6f9ef4 #0105a4 #0105a4 #6f9ef4;
    color: #ffFFff;
    left: 0px;
    margin: 1px;
    text-decoration: none;
    line-height: 150%;
    width: 100%;
    }

    a:visited { font-size: 12pt;
    background-color: #ee344f;
    border: 3px solid;
    border-color: #f46f9e #a40105 #a40105 #f46f9e;
    color: #ffFFff;
    left: 0px;
    margin: 1px;
    text-decoration: none;
    line-height: 150%;
    width: 100%
    }

    a:active { font-size: 12pt;
    background-color: #a0a0a0;
    border: 3px solid;
    border-color: #909090 #f0f0f0 #f0f0f0 #909090;
    color: #ffFFff;
    left: 0px;
    margin: 1px;
    text-decoration: none;
    line-height: 150%;
    width: 100%
    }

    a:hover {
    background-color: #24dd3e;
    border-color: #4ff27e #01a405 #01a405 #4ff27e;
    color: #ffFFff;
    }
    In IE, the buttons take up the desired width (as much of the navigation bar as possible). In Firefox, the buttons are only as wide as the words and the Internet time box seems to be wider than it should be, creating a horizontal bar at the bottom.

    I have no idea why this is so, as I have included a width value. Does anyone have any suggestions?

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Inline elements are annoying like this. When you say 100%, they don't really know 100% of what you're referring to, so they just expand to fit their contents. This goes for elements that have display: inline; set on them, as well. Fortunately, there's an easy way to fix this with CSS. Add a display: block; for all your a elements and you should be fine. Granted, from where I'm looking, doing that shows me that 100% is perhaps too wide, but that's something fixable.

  4. #3
    Junior Member
    Join Date
    Jun 2005
    Posts
    19
    Member #
    10364
    Thank you. This works very well.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com