Grow your CSS skills. Land your dream job.

CSS bg issues

  • # September 8, 2009 at 1:57 am

    Hi guys,

    I have an issue with a website I’m currently building and I wondered if I could get some help with the CSS.

    you can find the shell of the template here:
    http://www.guardiancomics.com/straycats/

    The two problems I’m having are as listed:

    1.) When I resize my browser window, or view the website on a laptop, the backgrounds begin to cut off. I’m unsure what that is about.
    I have body, html {height:100%;} and each parent div with height:100%

    2.) I’m using the feature content slider that Chris made, however for some reason on versions of IE, it asks me to allow the activex content before it will format the div’s correctly. I’d like the page to load properly without having to do any confirmations. Strangely, chris’s demo files don’t ask me for the popup.

    Any help on this would be great!
    I appreciate it.

    –Paul Spencer

    # September 8, 2009 at 2:46 am

    well I don’t see the background issue you are talking about on the page. What browser are you using? I viewed the page in I.E 8 and had no issue. anyway, try setting a min-width property and see if that helps

    I didn’t have any problems viewing the slider

    # September 8, 2009 at 3:01 am

    Sorry, I should have mentioned, it’s the height, not the width. I have min-height:100%; in my bg containing divs. No help.

    It’s only when you view it on a smaller monitor. Or if you resize your browser window.

    # September 8, 2009 at 3:17 am

    try adding overflow: hidden; to your css for #fancywrap

    # September 8, 2009 at 3:42 am

    Hey cybershot,

    That helps, but has other unwanted results.
    For example in attached picture you see that by making the overflow hidden the scroll bar vanishes.
    I have two bg wraps in this design. One for the black gradient at the top of the page and the other for the promotional background that sites to the side of the content (fancywrap).

    Would it help if I supplied the css? I just assumed you’d firebug it.

    # September 8, 2009 at 12:20 pm

    try adding overflow: auto to your body tag. diagnosing the issue in firebug is a little hard

    # September 9, 2009 at 1:48 am

    Hi Cybershot,

    I created a new page without any of the elements and just the divs and stylesheet for debugging.
    Please find it attached.

    I appreciate the help

    # September 9, 2009 at 2:00 am

    ok, try this. In your style2.css at the top, you have styles set for html, body

    right underneath those styles you have styles for the body again. I took all the styles from the top and pasted them into the body styles and seem to be getting the results I think you are looking for.

    so here is the style2.css with those corrections. Try it and let me know if it’s right for you

    Code:
    @charset “utf-8″;
    /* CSS Document */

    * { margin: 0; padding: 0; }

    body {
    background-image: url(../images/bg-purple.gif);
    background-repeat: repeat;
    background-color:#936;
    margin:0;
    padding:0;
    height:100%;
    font-family: Arial, Helvetica, sans-serif;
    }

    #clear {
    clear:both;
    }

    /*
    Background wrapping divs
    */

    #bgwrap {
    height: 100%;
    min-heigh:100%;
    background-image:url(../images/bg-black.png);
    background-repeat: repeat-x;
    background-attachment: scroll;
    }

    #fancywrap {
    background-image:url(../images/bg-fancy.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: scroll;
    height:100%;
    min-height:100%;
    }

    /*
    Header information
    */

    #title {
    width:630px;
    height:100px; /**/
    text-align: center;
    margin-left:auto; margin-right:auto;
    }

    /*
    Beginning of body
    */

    #bodywrap{
    margin-left:auto; margin-right:auto;
    width:685px;
    }

    #body{
    margin-left:auto; margin-right:auto;
    width:630px;
    height: 500px;
    background-color: #FFF;
    }

    /*
    Footer information
    */

    #network {
    margin-left:auto; margin-right: auto;
    background-color:#c9afd2;
    width: 590px;
    height: 144px;
    padding-left: 20px;
    padding-right: 20px;
    }

    #footerwrap {
    width: 685px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    }

    #footer {
    width: 585px;
    height: 105px;
    margin-left: auto;
    margin-right:auto;
    padding-bottom: 8px;
    font-size: .75em;
    background-color: #000;
    text-align:left;
    }

    #footer-copyright {
    height: 27px;
    width: 585px;
    padding-top: 5px;
    font-size: 0.7em;
    color:#FFF;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    font-weight: bold;
    }

    # September 9, 2009 at 10:06 pm

    Sorry Cybershot,

    I made those changes but I still get the same issue.
    Do you see what I mean?

    I don’t get it. The page looks perfectly fine, until you make the browser window smaller and scroll down.

    # September 9, 2009 at 10:28 pm

    I see that the person on the left gets cutt off when you make the browser small, when I made that change, that didn’t happen. So I guess I don’t know what you mean

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

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