CSS bolding text problem

Discussion in 'HTML' started by Joe Blow, Dec 28, 2005.

  1. Joe Blow

    Joe Blow Guest

    Joe Blow, Dec 28, 2005
    #1
    1. Advertising

  2. Joe Blow wrote:

    > http://www.wiavic.org.au/test/bold.html
    >
    > When hovering over the links, why does it "push" the trailing links text
    > across, once the link turn bold?


    Bold text is text with wider strokes. Since the strokes are wider, so are
    the letters. Since the letters are wider, they take up more space. So the
    anchor takes up more space. So everything after the anchor has to move to
    make room for it.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Dec 28, 2005
    #2
    1. Advertising

  3. Joe Blow

    Joe Blow Guest

    David Dorward wrote:
    > Joe Blow wrote:
    >
    >
    >>http://www.wiavic.org.au/test/bold.html
    >>
    >>When hovering over the links, why does it "push" the trailing links text
    >>across, once the link turn bold?

    >
    >
    > Bold text is text with wider strokes. Since the strokes are wider, so are
    > the letters. Since the letters are wider, they take up more space. So the
    > anchor takes up more space. So everything after the anchor has to move to
    > make room for it.
    >

    I am trying to eliminate the use of tables, which i have used for the
    navigation at wiavic.org.au

    Is it possible to define a maximum "cell" width (which is currently
    used) for each anchor so that the movement can be eliminated?

    Joe
     
    Joe Blow, Dec 28, 2005
    #3
  4. Joe Blow wrote:
    > I am trying to eliminate the use of tables, which i have used for the
    > navigation at wiavic.org.au
    >
    > Is it possible to define a maximum "cell" width (which is currently
    > used) for each anchor so that the movement can be eliminated?


    Not directly, because anchors are inline-level elements by
    default (i.e., they're part of a line, not a box like e.g. a
    paragraph). To specify width, first use display:block to
    turn the anchors into blocks/boxes, then e.g. width:10%.

    Alternatively, put each "a" into a "li" which is block-level
    by default, and specify width for li. In this case (which is
    semantically better), you'll have to use float:left and
    list-style-type: none on li's so they'll make a horizontal
    menu instead of a vertical one.
     
    Mitja Trampus, Dec 28, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jason

    datagrid row bolding?

    Jason, Aug 31, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    430
    Thomas Dodds
    Aug 31, 2004
  2. Paul Watt

    css text position problem

    Paul Watt, Mar 31, 2006, in forum: HTML
    Replies:
    7
    Views:
    2,136
    Beauregard T. Shagnasty
    Mar 31, 2006
  3. freesoft_2000

    CSS Bolding

    freesoft_2000, Sep 23, 2006, in forum: HTML
    Replies:
    8
    Views:
    4,273
    Jonathan N. Little
    Sep 24, 2006
  4. leo
    Replies:
    1
    Views:
    289
    Bob Lehmann
    Dec 5, 2005
  5. Replies:
    8
    Views:
    195
Loading...

Share This Page