Forum Moderators: not2easy

Message Too Old, No Replies

Links cause text to break at white space

test displays normally until link attached

         

CaptnGordo

8:17 pm on Jun 30, 2005 (gmt 0)

10+ Year Member



Anybody know what might cause this, and how to fix?

style as follows

#nav .blue{
display: block;
font: 12px 'Lucida Grande', Geneva, Verdana, Arial, sans-serif; color: #ffffff;
padding-top: 7px;
background-image: url(images/blue_tab.gif);
background-repeat: no-repeat;
width: 84px;
height: 25;
float: left;
text-align: center;

}

Thanks

treeline

9:58 pm on Jun 30, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Take a look for subtleties like you introduce an extra space while linking, or link text has a different font face or size than standard text.

SuzyUK

11:00 pm on Jun 30, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




height: 25;
float: left;

aside, as in not really related, but height needs to have a unit of measurement (px, em, cm) attached or it will not know how high to be.

but I think more the cause is because it is the floated it will become a new block level element by default, which will cause a line-break, a block level element always takes up it's own space which will be 100% width unless otherwise stated.

I think what might be needed here is display: inline-block; (without the float), this particular property allows you to treat the element as inline but format the contents as if it were a block level element (i.e. give it height and width)

But support of this is sketchy.. and as I'm not quite sure how you want this to work ~ have you links within a paragraph (inline), or do you want a vertical list?

A small demo of your code might help to find the best method..

Suzy