Results 1 to 6 of 6

Thread: How to fix page for browser text size changes

  1. #1
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to fix page for browser text size changes

    Ok, take a look at http://www.rivervalleylodgeandcampground.com . Everything looks pretty decent until I test it with a browser text size change (IE or Firefox) and then it messes it up some. If you increase the text size in Firefox you will notice that the navigation (sunset) image jumps up into the brown horizontal bar. How can I correct this problem.
    Thanks and Merry Christmas,
    Don

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    I'm not getting that glitch (in IE at least). The thing I do notice is that your image and sample text run off the page. You might want to check the CSS ruling that division (maybe a fluid width instead of an absolute one).

  3. #3
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking

    Quote Originally Posted by Medyman View Post
    I'm not getting that glitch (in IE at least). The thing I do notice is that your image and sample text run off the page. You might want to check the CSS ruling that division (maybe a fluid width instead of an absolute one).
    For some unknown reason we are seeing different problems. I still see my original problem that I mentioned (yes, even in IE) but do not see my sample text and/or image running off the page. We will see what others have to say.

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    It happens to me as well. I would remove all the text-size: codes from the CSS, unless for a special purpose, something very specific you don't want to use font-size. Instead you can use font-weight.

    font-weight: 600; for example is a slightly bolder font than normal, but not blurry bold.

    Also you have a lot of decimal px sizes. I would avoid that as well. Use em instead of px where you can. EM is the width of one character of that font size, so it pushes gracefully to edges. If you must use px, try to use whole numbers.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  5. #5
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BLiZZaRD View Post
    It happens to me as well. I would remove all the text-size: codes from the CSS, unless for a special purpose, something very specific you don't want to use font-size. Instead you can use font-weight.

    font-weight: 600; for example is a slightly bolder font than normal, but not blurry bold.

    Also you have a lot of decimal px sizes. I would avoid that as well. Use em instead of px where you can. EM is the width of one character of that font size, so it pushes gracefully to edges. If you must use px, try to use whole numbers.
    You are definitely the man that I wanted to answer. OTOH, I did not really want to hear that the same thing happened to you.

    The more I look at this problem the more interesting it gets. The 'Welcome' and 'Thanks for visiting, blah, blah, blah' text were intentionally set to a fixed pixel size so that a text size change in a browser would not enlarge them and drop the brown horizontal bar down into my navigation image. If you change text sizes in IE or Firefox and look closely you will see that only the background color, and not the background image or text, are changing in vertical size in H1 and thus dropping the brown bar down into my navigation image. Why is this happening? I though that a browser would only change the text size (except Opera).
    Your comments would be appreciated,
    Don

  6. #6
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    You could try placing the text in it's own div. Like make a "wrapper" div with all the components in it, like positioning, padding, etc. and then put that outside the text div which holds the text sizes etc.

    Code:
    <div id="wrapper">
    <div id="text">
    text text text
    </div>
    </div>
    I will have a closer look and a better idea once I get to my programming computer at home.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

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
  •