Browser bug with Header in non-IE browsers

  • Here is my site: https://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. ??

Viewing 4 replies - 1 through 4 (of 4 total)

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

    #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

    Thread Starter nytcrawlr

    (@nytcrawlr)

    Thanks.

    However it’s still not resolved.

    That helps keep it in the 800×600 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?

    How small do you want the screen to go?

    I tested your site using the minimum requirement: 800×600 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 800×600 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 800×600 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 ??

    Thread Starter nytcrawlr

    (@nytcrawlr)

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

    Thanks again for the help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Browser bug with Header in non-IE browsers’ is closed to new replies.

Tags