background image will not repeat in IE

mlecho

01-02-2008, 05:36 PM

i have a container div with a background image set to repeat on the y scale. The problem i am having is that in safari and firefox, it loads great, and will repeat till the end of the text. in ie, it will not do the same. I thought maybe it had to do with the next div loading (a footer) , but even after taking that away, it still will not load repeat for as long as the text runs.

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" rev="stylesheet" href="css/main.css">
<link rel="stylesheet" rev="stylesheet" href="css/pages.css">

<script type="text/javascript" src="js/shover.js"></script>
<script type="text/javascript" src="js/epicjs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >

<title>SITE :: Team</title>

</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header"><?php include("includes/nav.php"); ?>
</div>
<div id="content">
<div id="content_wrapper">
<div id="fade">
<?php include("includes/inc_team.php"); //main text, varies in length ?>
</div>
</div>
<?php include("includes/footer.php"); ?>
</div>
</div>
</div>
</body>
</html>

and css (most pertinent parts):

#fade{width: 941px; height: 280px;background: url(../imgs/bg_fade.png) no-repeat top;}
#content{background: url(../imgs/bg_filler.png) repeat-y;position: relative;top: -35px;}
#content_wrapper{position: relative;}

Excavator

01-02-2008, 07:02 PM

Hello mlecho,
Remove height: 280px; from #fade

mlecho

01-02-2008, 07:42 PM

hmm, is there any other way? i need that div property to be as is, as it has a different part of the background image which aligns just right in the over all page. If i remove 280px, it's gone all together...and in ie, while i can finally see the content div background image, i only get 1 line of the content div image regardless of the div height....

Excavator

01-02-2008, 09:04 PM

as it has a different part of the background image which aligns just right in the over all page

That's the problem with questions that use only a snippet of code. It would really help if you supply enough information that someone stands a chance of giving you a usable answer.
/rant="off"

Sorry but incomplete questions are becoming a pet peeve of mine.

As soon as your included inc_team.php gets bigger than the height: 280px you've set #fade at it will overflow.
I doubt you want to add overflow: hidden; to #fade. overflow-y: scroll; would not look right either - or maybe it would:confused:.
Maybe you need to re-think your layout, it could be another nested div is in order.

Re-reading your last post I notice you say when you remove the height:280px; that the div disapears entirely. That sounds like you didn't clear your floats.

mlecho

01-02-2008, 09:20 PM

yeah, i know, i tried to resolve this with minimal code sharing...before we go really big, can we elaborate more on clearing floats? The main content (where i am not getting the repeating background image) is two columns, using floats

#main{width: 45%; float: left;margin-left: 2em;}
/* CONTENT RIGHT- IMAGE and CAPTIONS*/
div#right{width:40%;float: right;margin-right: 4em;}

so should i clear the header, the fade or the footer?

i will try all while i wait a reply

Excavator

01-02-2008, 09:28 PM

Have a look at my favorite method for clearing floats. (http://www.quirksmode.org/css/clearing.html)

Do you really need to use % widths in #main and #right? Mixing % and em/px margin/padding usually doesn't do well when the viewing screen gets narrowed.

mlecho

01-02-2008, 10:16 PM

ok last post, then i will stop bothering you (and the public)

if i add a height property of the content div (with image) to a pixel range, it repeats the image...does that help at all?

#content{background: url(../imgs/bg_filler.png) repeat-y;position: relative;top: -35px;height: 800px;}

mlecho

01-02-2008, 10:19 PM

or add height to content_wrapper div- either way, same results

Excavator

01-02-2008, 10:41 PM

or add height to content_wrapper div- either way, same results

Definitely sounds like you need to clear the floats. Did you look at that link I gave you?
overflow:auto; is the trick.