Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Styling Problem - Height
MatthewAlan
New
Yesterday, I started working on a design for Vanilla2, to test out the styling system, and I am very impressed. It's very very easy. Anyway, to my problem. I am trying to get an image to be the background of the #Body area, which is where the Content and Panel are located. I am not talking about the actual body of the page, but the id tag called #Body. Problem is, I can't get it to use the height property at all. My background is 980px wide and I want it to repeat down the page until it reaches the footer, but it doesn't recognize that there is any height to the div. The only way to get the background to appear is to use the Min-Height property, but only pixels work there.
You can see what I am talking about here: www.ispyderz.co.cc/forum/index.php/
I have a glass border around the content. Most of what you see is the actual background image, but on the left side of the Announcements title, you will see a spot where the glass doesn't have a purple tint in the background, it's just black. If you look across to the other side, there will be a black spot there too, in the same area. I currently have the min-height property set to 50px.
I figure somewhere it can't figure out the height of what is contained within the content and panel areas, but I can't figure out how to fix this problem. I have spent countless hours going through the HTML and CSS files in Firebug, and google chromes developer tool, and I can't find the problem anywhere. I am by no means new to CSS and HTML.
Can anyone help? I figure it has something to do with Vanilla, because I tried the same thing in a blank html file, and it worked just fine. Thank you.
You can see what I am talking about here: www.ispyderz.co.cc/forum/index.php/
I have a glass border around the content. Most of what you see is the actual background image, but on the left side of the Announcements title, you will see a spot where the glass doesn't have a purple tint in the background, it's just black. If you look across to the other side, there will be a black spot there too, in the same area. I currently have the min-height property set to 50px.
I figure somewhere it can't figure out the height of what is contained within the content and panel areas, but I can't figure out how to fix this problem. I have spent countless hours going through the HTML and CSS files in Firebug, and google chromes developer tool, and I can't find the problem anywhere. I am by no means new to CSS and HTML.
Can anyone help? I figure it has something to do with Vanilla, because I tried the same thing in a blank html file, and it worked just fine. Thank you.
0
Comments
<div style="clear:both;"> </div>before the close of the background div to make sure it wraps around all the content. It's a hack, but it's a fairly common one.