Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Help with Flexible Layout

    Howdy,
    I am having trouble making some text in my layout be able to increase in size and have the layout stay flexible. I am referring to increasing the text size in browsers like Firefox (ctrl+ "+").

    The troubled text is located in my header, in my nav, and the text over my main image. Could someone please give me a pointer in how I can make my current layout flexible when the text size is increased?

    The .html file is located here:http://www.mikeperla.com/webtest/test.html

    and the css file is:
    http://www.mikeperla.com/webtest/site.css

    Thanks for the help,
    PoJ

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    In order to have scalable text in IE6 you must not specify font sizes using pixel measures. Any other measure will work. But there are problems with the pt (point) measure since this depends on the users dpi setting. You should probably use percentages or the em unit. For example:
    Code:
    font-size: 1em;
    If you do this throughout your entire stylesheet you will have text that obeys scaling through the CTRL+'+' in IE (or CTRL+ mouse wheel).

    If you want to go even further, you could also specify your div widths and other element widths using this measure. This is not so common, but it is then possible to create layouts where (almost) all elements magnify when users use the browsers CTRL+'+'. Personally I like this.

    Nothing prevents you from doing this with images also. Strangely I almost never see this. Does anyone know why? And does anyone know why we don't have zoom buttons in our browsers just like in the Acrobat Reader when we view PDF's? I would like to know.

    Edit: Fantastic..., I just learned that IE7 and Opera 9 indeed does have something that resembles real page zoom.

    Your post reminded me of Jakob Nielsen's excellent discussion about usability and font sizes where IE was highly critisized.
    Last edited by koyama; 01-02-2007 at 04:18 AM.

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Howdy,
    I switching my font sizes over to em units. Now users can increase the font size in the new IE browser.

    My only issue is that not everything in the actually layout is being flexible. Everything below the navigation is flexible when the font size is increased through both browsers (IE, Firefox).

    However, the header and the navigation text increase in size and break the layout.

    How can I remedy this situation? Should I layout the top part (header & nav) differently?

    Thanks,
    PoJ

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    You can use the overflow: auto declaration if you want to keep the box a fixed size; scroll‐bars will be provided on the element when content no longer fits. If the content is not that important, you can hide it instead when it gets too big using overflow: hidden. If you with to always offer scroll‐bars, overflow: scroll does that. If you only want to control scroll‐bars in one dimension, CSS3’s overflow-x and overflow-y properties are suitable for that, but the generic overflow property should also be provided for those browsers that haven’t implemented that part of the CSS3 Box Model Module (draft) yet.

    You can also simply not specify dimensions on those elements or make their dimensions relative (percentages, ems, exes, points). You can also make their dimensions semi‐relative using min-height and min-width so that they have a minimum size, but not a maximum size.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Arbitrator,
    Thank you very much for your response, however I don't think it is exactly what I was looking for.

    I would like it so that when the text in the header... like the phone number... is increased in size (when a user hits CTRL+ "+" with their browser) the nav and the rest of the page will get pushed down so the header text does not get overlap other page elements.

    The overflow would be good if I wanted to keep the div tags housing the text to stay the same size... but I am looking for something a little different.

    Thanks,
    POJ

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Like Arbitrator says, you should then specify your div size etc using em unit. Example:
    Code:
    div#flexible {
    width: 30em;
    height: 10em;
    }
    
    div#not_flexible {
    width: 300px;
    height: 100px;
    }
    How should your wrapper behave under CTRL+"+" ? If you want the whole page to be flexible you must also have a flexible wrapper with the width specified using the em unit.

    In short, there must not be a single statement involving the px unit.
    Last edited by koyama; 01-03-2007 at 12:37 AM. Reason: typo

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    You can use absolute units with the min-height property I mentioned. It’s too bad Internet Explorer 6 doesn’t support it though. You will still need to account for horizontal expansion though, which probably means the overflow property if you want a semi‐fixed layout.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New Coder
    Join Date
    Jan 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Howdy,
    Thanks for explaining it further guys. I really appreciate your help!

    Thanks,
    PoJ


  •  

    Posting Permissions

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