Background issues - content collapses

HTML & CSS
1

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


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

Success! That did it! I love it when it all comes together. With all of your help of course. Thanks a million.

3

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.

4

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 [url=http://www.merchantsbonding.com]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


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

5

Lose the fixed value on the background image and set a min-width for html,body.

e.g.


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.


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.

6

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.

7

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?

8

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.


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