Problem with background image within a div in firefox

  • Site: project-jericho.com
    An organization recently hired me to give their web site a “face lift”. Everything was working fine until I tried to tile a background within the main content div.
    If you go to the page in internet explorer, you’ll see how it’s supposed to look. In firefox, however, the background stops repeating after 400px. I’m guessing this has something to do with the min-height: 400px within html #content;, but I have no idea why it’s not working.

    The css (if necessary): (this is the css for everything under /* content */ which I’m fairly sure is where I’ve isolated the problem to. 

    /* content */
#main{

	width:680px;
	color:#333;margin:auto;
        background-image: url('img/bgx2.jpg'); background-color: #000;
	text-align:left; background-repeat: repeat-y;
}

#content{
	width:440px;
	float:left;
	padding:10px 10px 20px 10px;
}
* html #content{
	padding-top:20px;
}
html #main{
        minheight: 400px;
        height: auto !important;
        height: 400px;}

#content .post
{
	margin:0 0 3em 0;
}
#content .cat
{
	margin:0;
	padding:0;
	color:#999;
}
#content .post-info
{
	color:#777;
	text-align:right;

}
#content .post-info em
{
	font-style:normal;
	float:left;
	margin:0 5px 0 0;
}
em.user
{
	padding-left:12px;
	background:url(img/user.png) no-repeat left center;
}
em.date
{
	padding-left:15px;
	background:url(img/date.gif) no-repeat left center;
}
#main .post-comments
{
	background:url(img/comments.gif) no-repeat left center;
	padding-left:12px;
}

    I’ve been wasting hours in this office on this and any help would greatly greatly appreciated. Thank you so much in advance.

    -Josh

Viewing 5 replies - 1 through 5 (of 5 total)

  • 1. You can combine #main { } and html #main { }
    2. In html #main { } – there is no minheight property
    3. In #main { } – there is no background-text-align property

    Anything to do with fixed height / min height in a blog is suspect. Ditch it.

    Thread Starter heyitsjosh

    (@heyitsjosh)

    Thank you both for your help, but I must just be a complete idiot. I cannot understand, why backgrounds for #main will work in Internet Explorer all day long, but they do not show up in Firefox.

    I’m completely lost

    Well that is pretty much the predicted behavior for both browsers. The CSS spec is not clear on this issue. I think you need to add a clearer div or 2.

    I found a fix for this. I use Firefox mainly and even tried the faux columns fix, which STILL didn’t work.

    What finally DID work was adding this line of code to the CSS for the container:

    {display: table;}

    Hope this helps.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Problem with background image within a div in firefox’ is closed to new replies.