Little Tip
posted on february 15, 2003, tag: site
As I was making the changes here I came across a few little problems with CSS layout techniques that caused little glitches in Safari and Internet Explorer for the PC. One of the most annoying was finding a way to make certain layout styles show up properly so that a 100% of the vertical width of the comment popup contained the proper white area with its correct borders.
I use several nested DIVs to lay out the comment popup. The first specifies the width of the content area (in this case, 360 pixels), and inside of this DIV I have four others. One is only used to make sure the contents don't have extra margin space and the other three make up the two 8px borders (left and right) and the center column that contains the content.
If the content does not contain enough copy to fill the popup vertically (the window is 440px high), there's a problem. Because CSS won't just fill to the bottom of the window, if there are no comments for a specific entry, it's possible you'll see the white background of the three columns ending prematurely on the page. This is no good. In an effort to fix this, I assigned the main DIV (that holds all others) a margin-bottom of -5 pixels. In theory, this would tell that DIV to be 5 pixels longer than the bottom of the page, and hopefully that would mean even if there isn't enough content, the background would fill the whole window.
This works in Mozilla, but not in IE or Safari. Looking for a solution, I tried assigning the main DIV a position of fixed, and giving it a specified height of 442 pixels (roughly two pixels taller than the window itself). This worked in IE, but not in Safari. Always looking for the complete solution, I began to dig through the CSS2 Specification, looking for something that could help me. I hoped there might be something like minimum height, and I was happy to find there was. Min-height did exactly what I needed. I set the minimum height of the content column DIV to 460px, which is 20 pixels more than the height of the window (Safari pads its popups, so this makes up for that), and now the background is flush to the bottom of the window even if there isn't any copy in the content column. The DIV style looks like this:
#ccontent {
background-color: #fff;
margin-left: 8px;
width: 342px;
text-align: left;
border-left: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
min-height: 460px;
}
Note that I add two lines for people using IE on a PC. I do this using PHP, as I have my CSS files set to be parsed by the PHP engine in Apache. The IE style looks like this:
#ccontent {
background-color: #fff;
margin-left: 8px;
width: 342px;
text-align: left;
border-left: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
min-height: 460px;
height: 460px;
position: fixed;
}
I thought I would post this because I don't think very many people know about the min-height property, and it really came in handy for me. There have been plenty of times in the past when this information would have helped me out quite a bit, and maybe it will help one of you out in the future.
Also, related to design, Steve is finally back online.