Grow your CSS skills. Land your dream job.

Background and nav dissapears when browser minimized

  • # May 20, 2009 at 2:12 am

    Hi everyone. I have a sample of the issue instead of the whole web page. Here is the code, any help would be greatly appreciated. I think you will be able to see the problem. When I minimize the browser window and then scroll to the right the navigation bar and the background is cut off. This seems to happen with IE7 and latest version of Firefox. Any suggestions I am stumped. Thank you.

    Code:
    @charset “utf-8″;
    /* CSS Document */
    /* =CALL LIBRARY */
    @import url(“reset-min.css”); /* ——- Reset all CSS Styles */

    /* =GENERAL – the general styles */
    #header{
    height: 253px;
    background:url(../images/top_bg.jpg) top repeat-x;
    position: relative;
    /*overflow:hidden;*/
    }
    .container{
    width:900px;
    margin: 0 auto;
    position: relative;
    overflow:hidden;
    }

    #navigation li{
    float: left;
    padding-right: 5px;
    margin-right: 5;
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: normal;
    }
    #navigation li a{color: #fff;}
    #navigation li a:hover,#navigation li.active a{color: #2c2c2c;}
    #navigation{
    position: absolute;
    right: 0;
    top: 20px;
    }
    body{
    font: 62.5%/2.2em “Lucida Grande”, Tahoma, Verdana, Arial, Helvetica, sans-serif;
    color: #4b4942;
    background: #fff;
    }

    a{text-decoration: none;color: #5599a7;}
    a:hover{color: #bb800f;}
    hr{display: none;}
    strong{font-weight: bold;}
    ul.borderedlist li{
    border-bottom: 1px dashed #d1cfcd;
    }
    ul.borderedlist li a{
    display: block;
    padding:3px 0 0 2px;
    height: 26px;
    color: #42423b;
    }
    ul.borderedlist li a:hover{background: #E5E5E4;color: #42423b;}

    #header .container{height: 253px;}
    /* logo */
    h1{
    position: absolute;
    height: 15px;
    top: 15px;
    }
    h1 a{
    font: 24px/24px Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: -2px;
    padding: 22px 9px 25px 20px;
    display: block;
    color: #fff;
    background: url(../images/logo_bg.gif) left top no-repeat;
    }
    h1 a:hover{color: #fff;}
    h1 a span{
    height:71px;
    width: 13px;
    position: absolute;
    top:0;
    right: -13px;
    cursor: pointer;
    background: url(../images/logo_right.gif) right top no-repeat;
    }

    here is the import at the top

    Code:
    /*
    Copyright (c) 2007, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:

    http://developer.yahoo.net/yui/license.txt

    version: 2.2.2
    */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:”;}abbr,acronym {border:0;}

    and here is the html

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Matt

    # May 20, 2009 at 2:33 am

    there are few errors in ur markup and css

    validate them

    class names in ur li’s are not enclosed with quotes…correct them……..

    # May 20, 2009 at 4:18 am

    I know for a fact what you reccomended there has nothing to do with it.

    # May 20, 2009 at 4:26 am

    i am sorry but i can’t help u without a live link in this case since u have some images involved ….i copied ur entire page and its css files …i dont see anything on ma browser ..as if its hidden….so if u could gimme a live link …it will help

    # May 20, 2009 at 4:41 am
    "mattjfox" wrote:
    the nav bar to extend when the page is minimized.

    okie i am not able to understand this statement…..how can u see anything when the browser is minimized ?????

    or do u mean that when the browser is resized ????

    If this is what ur looking for then check this
    http://css-tricks.com/how-to-resizeable-background-image/ tutorial from Chris

    it will help u …also u have applied the background on the div ..is that background meant only for the header ??

    just in case u can’t figure out
    add width:1280px; to #header in ur css

    # May 20, 2009 at 11:48 am
    "mattjfox" wrote:
    I know for a fact what you reccomended there has nothing to do with it. Im not looking for a lesson in mark up I just want the background to extend beyond and the nav bar to extend when the page is minimized. Its a pretty basic thing I would think.

    If it’s so basic, you shouldn’t have a problem figuring it out yourself.

    Bring a new attitude to the table.

    # May 20, 2009 at 11:53 am

    I meant to say when there is content off the page and you need to scroll

    Take a look at the example below

    http://www.folkartvillage.com/nav/tester.htm

    See if you minimize the browser window so it needs a scroll bar you’ll notice that the smaller with the window more of the navigation and background gets cut off. I just want to know why. I would like to have it so users who minimize the window would still be able to scroll over to the navigation without having to maximize the window again.

    I thought maybe this was an overflow:hidden issue, but I have tweaked those and am not finding any luck.

    Thanks for your help on this.

    Best Regards,

    Matt

    # May 20, 2009 at 11:56 am

    Sorry Doc didn’t mean to have a bad attitude, just had been working on this all day…

    # May 20, 2009 at 12:30 pm

    You know what putting the 1280 px in the header seemed to work pretty well. Only problem with it is in IE I need to actually put 1260px in the header or there is an ugly horizontal scroll bar at the bottom of the page. Then the result is in Firefox there is about a 3 to 4 pixel gap of white space.

    Any ideas about how to use a conditional statement depending on the users browser for different display? Or would your recommend against that.

    Thanks,

    Matt

    # May 20, 2009 at 12:47 pm

    Is there any reason why you can’t put the background on the body? You could then put the header inside the container without any problems.

    # May 20, 2009 at 1:45 pm

    This works even bette apostrophe. The weird thing is I tried that yesterday before posting, and it didn’t work, but I reset the CSS in case I made any buggy changes this morning, tried your fix and it worked.

    Thanks for all your help guys.

    Best,

    Matt

    # May 20, 2009 at 4:13 pm

    I found the ultimate fix for this without setting widths for headers and so on. Background in the body and put this in the body as well. Just thought I would let you know if anyone was wondering.

    Code:
    body {
    min-width: 1280px; /*–or whatever size you want it to be–*/
    }
    # May 20, 2009 at 5:17 pm

    Won’t that force a horizontal scrollbar on anything but the largest monitors?

    # May 20, 2009 at 5:34 pm
    "apostrophe" wrote:
    Won’t that force a horizontal scrollbar on anything but the largest monitors?

    Yes, certainly not ideal.

    # May 21, 2009 at 12:12 am

    Best way out of this is to apply the background to the body rather than the div,,,,,,,that way …..we will get the image won’t cut off when resized

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".