«

Greetings all,

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?

Joe

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 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 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.