SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background issues - content collapses

    I built a website RNL Services LLC

    Looks like crap when viewed in 600 x 800 browsers. The content collapses. If you are on a higher resolution browser you can see what I am talking about by resizing your browser.

    I would like to emulate what happens at the following website Merchants Bonding Company

    The following is my css

    Code:
    html, body, #wrapper {
        height:100%;
        margin: 0;
        padding: 0;
        border: none;
        text-align: center;
    }
    #wrapper {
       margin: 0 auto;
       text-align: left;
       vertical-align: middle;
       width: 400px;
    }
    #page_home {
    	height: 635px;
    	width: 974px;
    	margin-top: -8px;
    	margin-right: auto;
    	margin-left: auto;
    }
    Go to RNL Services LLC to see the source.

    Thanks in advance for any help

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Try removing the height on #page_home and giving it "overflow:hidden;" instead. THe problem is that the children are flaoted and the parent doesn't recognize it is there, thus it is collapsing in height.

    I wasn't able to really see what you meant but that seems like the obvious solution to what you are describing.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan but that didn't seem to work. It is still doing the same thing.

    Basically in a nut shell. This site fails on a computer with a screen resolution of 800x600. I am assuming your computer has a higher resolution than that. Basically go to RNL Services LLC and collapse your browser so that it is smaller than the website I created. You will see how it fails. Now go to Merchants Bonding Company and do the same thing. Their site does not collapse.

    If you look at my site I have drops of water going off of the edge of the site. If you look at my site on a 800x600 resolution screen or an IPhone or something like that I want the outside water drops to be ignored so it fits correctly on the screen.

    I hope that makes sense. If you look at the source code imbedded in the website I have
    Code:
    body {
    	background-color: #c02327;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size:11px;
    	color: #000;
    	background-image: url('images/rnl_services_home.jpg');
    	background-repeat: no-repeat;
    	background-attachment:fixed;
    	background-position: top center; 
    }
    I put images/rnl_services_home.jpg in the background.

    Thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Lose the fixed value on the background image and set a min-width for html,body.

    e.g.
    Code:
    body {
        background-color: ;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:11px;
        color: #000;
        background:#c02327 url('http://www.rnlservicesllc.com/images/rnl_services_home.jpg') no-repeat 50% 0;
    }
    html,body{min-width:1000px}
    It has nothing to do with the above problem but as Ryan said also remove #wrapper from the height:100% routine as that won't do what you expect.

    Use a min-height if needed instead.

    Code:
    html, body {
        height:100%;
        margin: 0;
        padding: 0;
        border: none;
        text-align: center;
    }
    #wrapper {
        margin: 0 auto;
        text-align: left;
        width: 400px;
        min-height:100%;
    }
    * html #wrapper{height:100%}/* IE6 min-height*/
    Although you don't seem to be doinh anything that needs the 100% effect.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works!

    I just have one other issue. Check out the following image



    I would like to remove the red on the left of the website. I want the red bubbles to be ignored and the website to be seen. I have a feeling if I made that background larger it would knock off the website.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now that I looked at the rnl_services_home.jpg I don't think the background is affecting the browser. Why do I see that red on the left?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Set the min-width to the same size as the center portion of that image (974px I think) and then change the other #page element to match.

    Code:
    html,body{min-width:974px}
    #page {
        height: 635px;
        width: 974px;
        background-repeat: no-repeat;
        margin-top: -8px;
        margin-right: auto;
        margin-left: auto;
        background-color: #c02327;
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Success! That did it! I love it when it all comes together. With all of your help of course. Thanks a million.


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
  •