Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to make each link height and width at 25px?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #161657
    knowledgenotebook
    Participant

    Hi,

    Please see the subject line.
    Here’s my code:
    a:link {
    font-weight: bold;
    background-color: lightgrey;
    height:25px; width:25px;
    text-decoration:none; /* unvisited link */
    }

    Many thanks.

    #161664
    Spiekerboks
    Participant

    Please add a little more context. What for example would be the content of such a link?

    #161665
    paulob
    Participant

    Hi,

    An anchor is an inline element by default so you can’t add dimensions to it unless you change its display property.

    You can use display:block which will make the element occupy a new line just like any other block element or you can use display:inline-block if you need it horizontal; both of which will allow dimensions to take effect (or indeed so would floating the element).

    e.g.

    a { 
    font-weight: bold; 
    background-color: lightgrey; 
    display:inline-block; 
    height:25px; 
    width:25px; 
    text-decoration:none;
    }
    

    Note that you were just styling the :link element which means that the unvisited state would not be styled. Just target the anchor instead and style all states in one go. However, it is unlikely that you want all anchors styled globally like that so use a class on the anchor to identify it.

    #161691
    paulob
    Participant

    Inline-block treats the elements almost like words so that any white-space in the html is treated like the space between words. Usually this is not a problem and there are a number of fixes but as you have links of the same size you could float them instead of using inline-block and then there will be no white-space at all between them. You can then control the gap explicitly with margins on each element.

    #161727
    paulob
    Participant

    Hi,

    Can you post a screenshot as I can see no difference with #D3D3D3 in any browser?

    Note that if you omit the hash the rule is invalid and should not be applied (unless you have no doctype and no one does that these days do they :)).

    Make sure you have a current doctype or your page will be in quirks mode and things won;t work as they should.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.