Hello all,

Currently I am switching from using table layout to CSS and I am encountering some difficulty. Design is not my forte so please excuse the novice mistakes that I make.

I have two issues. You can view these issues on the page:

http://www.youngamericangrowers.com/.../test/home.asp

The style sheet is located at:
http://www.youngamericangrowers.com/...nc/styles2.css

ISSUE #1 - I have two images that are being used as gutters on the left and right side of the page. Basically these gutters are images that I am setting as a background image to 100% height. Apparently the 100% height only means the viewable screen when the page loads. If there is content that extends beyond the viewable page the gutter images are no longer visible. I have done some researching on google and cannot find a solution to this problem.

ISSUE #2 - When this page is viewed in firefox there is whitespace that is inserted below every image. In ie it works fine. I cannot figure out why.

Any help is greatly appreciated.

Thanks

What you want to do is repeat your image. Here's an example to repeat vertically:

background: url('img.jpg') #FFF top left repeat-y;

Hope it helps, but I'd also recommend you fix the 27 errors W3C validation is reporting

Thanks for the input mjm but I still have the same problem. I inserted background-repeat: repeat-y; on the div id in the style sheet but there was no effect. I then attempted to additionally add background-attachment: scroll; but that did not work either.

Still stuck.

You mean like this?

If you want those divs to extend with your content, you have to wrap both divs around your content. Like this:

<div id="gutterLft">
<div id="gutterRgt">
...
...
</div>
</div>

Hi Adam,

yes, what you showed in your example is similar to what I am looking for. Previously I have already tried your suggestion which gives an output exactly like your page which is part of the problem. If I put the closing div tags around all of the other divs, the gutters then end up to the far right and far left part of the page. They are not but-up against the main content area. Your suggestion makes logical sense but for some reason it doesn't give the output i expect.

The main outer div has a width of 760px. Then there are three div's within the main outer one. Two of the div's are the gutters which have a width of 20 px's and the other div (which contains the main image) has a width of 720px's.
psuedocode example:
<div width=760px>
<div gutterRight= 20px>
<div gutterLeft = 20px>
<div mainArea = 720px></div>
</div>
</div>
</div>
This puts the gutters to the far right and left as mentioned before.

I'm still baffled.

I would also suggest that you not use the 'gutter' images at all. Take a horizontal slice of your shadowed background which includes the shadow and make THAT the background for your containing div. That will completely eliminate the need for your 'gutters' and remove the column width problem.

LadynRed

Your suggestion is what I am currently doing on the page but that does not help the problem of extending the background down the entire length of the screen. Why are the inner div's not conforming the fill the entire space of the outer main container div?

You have to set height: 100% on the BODY.

height already is 100% on body and html in the style sheet

Your suggestion is what I am currently doing on the page

Unless you've made that change and haven't uploaded it to the URL you posted, that is NOT what you are doing. The CSS I see still has the 2 'gutter' divs with the shadow images and that is what is not 'stretching'.

I'll just refer you to this Community MX article:
http://www.communitymx.com/abstract.cfm?cid=BAD95

ladynred,

Sorry! I misinterpreted your answer the first time I read it. You are right - if I create one image that has both gutters and set it as a background to the main containing div then that solves the problem. Thank you very much.

Any ideas on my second issue concerning the difference in the way firefox is handling the page as opposed to IE?

Great, I'm glad that background solution worked for you. Sorry if I wasn't clear the first time around. This is a method I use for a LOT of my sites.

Get rid of the gutters, IE is dropping #co1 below them.

Add this to the body section:
text-align: center;
margin: 0 auto;

That will center #co1 in both browsers.
Set #co1 to position: relative - it's your main container for everything else. Anything you position INSIDE of it will be positioned in relation to #co1 and NOT the body.

See if that works.

ladynred,

Thanks again for the input but I am not sure that we are talking about the same thing from your last suggestion. If you look at my original post my second issue was that firefox seemed to be inserting space after all of my images. I was originally having the same problem in IE but when I put margin: 0 auto; and padding: 0px; for the img selector in my style sheet it solved the problem in IE but the problem remains in firefox.

In firefox, if you look just below the main image there is a space between that and the main navbar. In addition to that if you look at the my account and current orders image there is also that "space" that I cannot get rid of.

IE appears to be handling this the correct way whereas firefox is not doing what I expect. Any thoughts?

In case anyone is interested I found an article that helped me solve my second issue. The solution is to put {display: block;} within the div of image.

The article is located at:
http://developer.mozilla.org/en/docs...ysterious_Gaps

Thanks for all the help!