Problem with background-repeat: repeat-y;

[amcbdc1]

I am having a problem with my boarders on a website. The top section works just fine, however I can't get my left boarder to work correctly

This is my question. On my new website… www.vgbhpa.com the left repeat-y boarder isn’t working correctly. In Firefox, it is set to a height of ? no matter what page it shows up on. Then in IE, it only shows the image on time with no repeat-y which isn’t very pretty either.

The css is:

#header_logo_repeat_y {

background-image: url(images/new_sidebar_repeat.gif);
background-repeat: repeat-y;
position: absolute;
height: 100%;
width: 109px;
left: 0px;
top: 220px;

}

Could you please let me know what I am doing wrong. The repeat-x boarder is working correctly for the top header.

Thanks for your help,
Brian

[gnarly]

I think you mean borders, not boarders

The problem is that your <div id="header_logo_repeat_y"> is empty, so it won't take up any space. For once, IE is doing the right thing.

You should try putting the background image on <div id="main">, then using padding to push the contents across, eg:

#main {
    background-image: url(images/new_sidebar_repeat.gif);
    background-repeat: repeat-y;
    padding-left: 125px;
}

[DCS]

Make a style for your body and apply that image as the background there not as you have it now.


You have it in a an empty div and there is no content to expand it downward. IE does not support height very well.

Also....make sure on your body you set you backgound color to white. In IE if you don't specify it defaults to the user's color settings, in my case your background shows as grey.

[amcbdc1]

It worked.

Thanks