Small Problem when text size is increase

[virtuaffinity]

Hi all,

can anyone tell me why when the text size is increased on this page,

http://admin.virtuaffinity.net/map/

the size of the holding div doesn't expand to accomodate it?


It works fine in IE but not in FF.


Any help would be much appreciated.

TIA

[Paul O'B]

If you size the outer in ems then it will expand also.

In your nav for example;

.MenuBar  {
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 margin: auto;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #1667C2;
 font-size: 80%;
 width: 758px;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #1667C2;
 min-height: 2em;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #1667C2;
 border-left-color: #1667C2;
 line-height: 2em;
  }

Now try the text-resizing.

Paul

[virtuaffinity]

Thanks for replying so quickly Brian unfortunately your answer hasn't quite achieved what I was after.

I need to replicate what's happening in IE for FF where the text size increases and the border below drops keeping all the menu items within it's own border.

Any ideas?

http://admin.virtuaffinity.net/map/

Thanks.

[DaveWoods]

add a float: left; to your .menuBar class and that should sort your problem in Firefox

[virtuaffinity]

Thanks csswiz that's done the job.

[AutisticCuckoo]

I had written a long reply to this. Then I posted and saw that Paul had beaten me to it, and replied something quite different. I assumed I'd gotten the wrong idea about the problem, so I deleted my post.

The reason you had a problem is that all the LIs in the menu UL are floated. This removes them from the document flow, so the UL actually gets zero height and width. By floating the .menuBar, you make it extend to enclose its floated children.

Another option is to add a clearing element after the UL, like this:

<div style="clear:both; line-height:0">&nbsp;</div>

(But with a class rather than an inline style, of course.)

There are other ways to do it that doesn't require extra markup, but those aren't fully cross-browser compliant, IIRC.

[virtuaffinity]

Thanks to all for your help on this.