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 9 of 9
  1. #1
    Member tlcook's Avatar
    Join Date
    Nov 2006
    Posts
    38
    Member #
    14386
    Hi,

    I have the following as part of my CSS file on my main website:
    Code:
    .navigation a {
     font-family:Verdana, Arial, sans-serif;
     font-size:0.8em;
     color:#fff;
     background-color:#f88;
     height:auto;
     padding-right:10px;
     padding-left:10px;
     padding-top:5px;
     padding-bottom:5px;
     text-decoration:none;
     width:120px;
    }
    But when the page (http://www.tlcook.com) is rendered in Firefox or Opera, the links do not have a fixed width. They only have the padding, which makes each one a different width. In IE, they have the fixed width! For the first time, my site actually looks better in IE!

    Is there a particular value or unit I have to use to get Firefox's and Opera's attention?

    Any help would be greatly appreciated

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I'm highly suspicious that they're being rendered as inline, which is what the a element usually is. Inline elements won't extend to their width. Try setting them to display:block.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    Quote Originally Posted by Steax
    I'm highly suspicious that they're being rendered as inline, which is what the a element usually is. Inline elements won't extend to their width. Try setting them to display:block.
    Agreed. Although if you display them as block, they'll need to be floated to create a horizontal menu, is that right?

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I thought he wanted a vertical menu... and yes floating is how to create a horizontal menu. If you want to try it out, tlcook, you might want to put them near the header.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  6. #5
    Member tlcook's Avatar
    Join Date
    Nov 2006
    Posts
    38
    Member #
    14386
    Thanks for the fast response. I just added in 'display:block' and it worked! But I'm not sure as to what display:block actually does. I mean, besides the obvious, diplaying them as a block.

    It worked though cheers!

  7. #6
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    display: block simply puts the element in its own line, like how paragraphs or headers automatically put blank spaces before and after it. Divs are also block elements. If you've ever put a border or background on a header/paragraph/div, you'll notice they expand to fill their containers. Try giving a background to a <h1> element. It fills up the entire line, as wide as the container of the <h1>. Set it's display to inline, though, which is the opposite of block, and the background only fills up to the text's length.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  8. #7
    Member tlcook's Avatar
    Join Date
    Nov 2006
    Posts
    38
    Member #
    14386
    Ah! Thanks Steax I understand now. Well, I think I understand. So for an example, if <h1> was given a width of 200px but the text inside it was only 2 characters, the background color would only span to two characters and any padding applied, right? So if I then add in display:block to the properties, the background color will then span the whole 200px instead?

    Oh I do love CSS

  9. #8
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    No, a heading by default will be in display: block. Same goes for divs (their inline equivalent is span), paragraphs, lists, or anything in particular that logically should not share a line with other elements. So by default it would fill the whole 200px, unless you set it to display: inline in which case it only fits the text.

    Btw, if you don't specify width, it'll automatically have the width of it's container minus its margin (if it's a block element) or have the width of it's contents plus padding (if it's an inline element).

    Oh I do love CSS
    And shall everyone else.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  10. #9
    Member tlcook's Avatar
    Join Date
    Nov 2006
    Posts
    38
    Member #
    14386
    Oh right. Okay I get it now. Simple, once understood

    Thanks Steax!


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:48 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com