Gradients, CSS and Overflow

Last year, I built a website (http://www.joebeernink.com) to handle aspect of my burgeoning writing career.  I also used it to learn ASP.NET MVC.

I had a designer do the styles and the graphics, but I did all the HTML work.  When I originally laid everything out, the content all fit nicely on a single 800px long div which exactly matched the length of the repeating vertical gradient the designer put together for me for the outer background. 

Once the content got too long, the repeating style left a lot to be desired.  It not only repeated across the X axis, but the Y axis as well, which meant starting at pixel 801, I had this nasty black line across the bottom of the screen, and then the gradient began again.  Yuck.

So instead of that, I set overflow = auto on all my inner divs, which for a while meant that the one page that had too much content had an inner scroll bar.  I was kind of okay with that (I shouldn’t have been), but CSS has never been something I’ve worked with a lot, so I ignored it.

Lately, as I’ve been upgrading my site for an upcoming conference, every page began to have the scroll bar, and it was killing me.  I talked to my designer at work and they shook their heads and said, “Dude, that’s like one line of CSS to fix.  Don’t be such a loser.”  Okay they didn’t say that, but they should have.  They said it was pretty easy, and could be done in a single line of CSS.  They were going to send me that line of CSS, but must have forgot.  So yesterday, knowing that a single line solution existed, I got ready to do some CSS spelunking, and eventually came up with the solution.

Out with the old CSS Classes

.page
{
    background-image: url("../../Content/beernink_pagebkgd.jpg");
    margin-left: auto;
    margin-right: auto;
    background-repeat: repeat;
}

#main
{
    margin-left: auto;
    margin-right: auto;
    padding: 20px 30px 20px 30px;
    background-image: url("../../Content/beernink_insideBkgd.jpg");
    background-repeat: repeat;
    margin-bottom: 5px;
    width: 740px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    overflow: auto;
    height: 500px;
}

And in with the new

.page
{
    background: #252E33 url("../../Content/beernink_pagebkgd.jpg");
    margin-left: auto;
    margin-right: auto;
    background-repeat: repeat-x;
}

#main
{
    margin-left: auto;
    margin-right: auto;
    padding: 20px 30px 20px 30px;
    background-image: url("../../Content/beernink_insideBkgd.jpg");
    background-repeat: repeat;
    margin-bottom: 5px;
    width: 740px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    /* overflow: auto;
    height: 500px; */
}

The #252E33 is the color at the bottom of the gradient. The color nicely fills the page beyond the 800px line, and looks great. 

There are probably better ways to do this, but this was simple and allowed me to say the site was ‘done-done’ for the conference later this month.

Of course, now I want to find a real blogging engine in ASP.NET MVC that I can deploy with my site.  Any recommendations?