SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Manchester
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small Problem when text size is increase

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you size the outer in ems then it will expand also.

    In your nav for example;
    Code:
    .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

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Manchester
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add a float: left; to your .menuBar class and that should sort your problem in Firefox

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Manchester
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks csswiz that's done the job.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    HTML Code:
    <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.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Manchester
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to all for your help on this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •