WordPress.org

Ready to get started?Download WordPress

Forums

Browser bug with Header in non-IE browsers (5 posts)

  1. NytCrawlr
    Member
    Posted 8 years ago #

    Here is my site: http://hundredschoolsofthought.org/

    Not sure what to do here. The header is fine with just the chinese symbols in them, I can resize my window to as small as I want in any non-IE browser and it doesn't mess up. However, when I put the rest of the text in, like the quote that is in there now, and then resize my window to a smaller size (depending on how small) in all non-IE browsers the tagline juts out of the header border and starts encroaching onto the rest of the page.

    Doing this in IE, no matter how small I make the browser window, keeps it within the borders of the header.

    Any ideas how to resolve this?

    Here is my CSS for the header:

    #header
    {
    padding-top: 20px;
    margin-bottom: 20px;
    height: 250px;
    }

    #headerimg
    {
    font-size: 1.2em;
    text-align: left;

    margin-left: 200px;
    padding: 10px 10px 20px 20px;
    height: 7.0em;
    color: #00CC00;

    background-color: #336666;
    border: 2px solid #003333;
    }

    #header a
    {
    text-decoration: none;

    color: #33CC00;
    }

    #header h1
    {
    font-size: 3em;
    }

    .description
    {
    text-align: center;
    }

    Thanks for the help in advance. :)

  2. katie1
    Member
    Posted 8 years ago #

    Decrease your headerimg & h1 appropriately, and all is well in Moz, IE6, Opera, Net, FF (800x600)

    #headerimg{
    font-size: 1.2em;
    text-align: left;
    margin-left: 200px;
    padding: 10px 10px 20px 20px;
    height: 8.em; /*7.0em;*/
    color: #00CC00;
    background-color: #336666;
    border: 2px solid #003333;
    }

    #header h1{
    font-size: 2.7em; /*3em*/
    }

    Kate

  3. NytCrawlr
    Member
    Posted 8 years ago #

    Thanks.

    However it's still not resolved.

    That helps keep it in the 800x600 range sure, but I've had several friends lower their browser window size to even smaller than that and it still breaks.

    Any other suggestions?

  4. katie1
    Member
    Posted 8 years ago #

    How small do you want the screen to go?

    I tested your site using the minimum requirement: 800x600 screen resolutions on ALL browsers, which, frankly, most users have access to. Why bother fiddling for anything smaller?

    The reason your header breaks like that whenever you force your browser screen smaller than standard 800x600 is due to the font size of your h1.

    Don't forget that h1 (in fact ALL headers) automatically add an invisible padding to top and bottom; hence the space directly before and after insertion.

    The only way you're going to control the breaking is to decrease the h1 font size, like I said, and remove padding:0 altogether. Unfortunately, your header will - obviously - get smaller and will be less dramatic which will be in direct conflict to the point you were attempting to achieve. It is, after all, a header and your site's main title.

    If you knew ALL your visitors were/are using screen resolutions less than standard equipment 800x600 tell them to upgrade. It's not your problem if they choose to view your website on ridiclously minature screens.

    As for your friends, tell them to test the site under NORMAL conditions. You are catering for the majority not the minority.

    In the race to be seen against a billion other website owners, surely we - as designers & blog writers - have enough to contend with without being incredibly anal over nonsensical things :)

  5. NytCrawlr
    Member
    Posted 8 years ago #

    Forgive my analness, you do bring up some good points. :)

    Thanks again for the help!

Topic Closed

This topic has been closed to new replies.

About this Topic