Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background image will not repeat in IE

    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:

    Code:
    <!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">
    		<!--[if IE]>
        <link href="css/ie_specs.css" rel="stylesheet" type="text/css" media="screen" >
    <![endif]-->
    		<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):
    Code:
    #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;}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mlecho,
    Remove height: 280px; from #fade
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


    Code:
    #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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have a look at my favorite method for clearing floats.

    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

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

  • #8
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    or add height to content_wrapper div- either way, same results

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by mlecho View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •