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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Div Background overlaps in IE, not FF

    Hi Everyone,

    I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE.

    I have created a sample page, and I'm really confused as to what is going on in IE. FF renders the page exactly as I expect. IE renders the page with everything in the correct location, but it seems to double the background image for a sub-div section that is moved up using a negative margin (#menu { ... margin-top: -200px; ... }). Also, this "duplicate background" seems to "flicker" on and off in certain areas, but part of it is always there. (I think there may be more than one duplicate?)

    To view what's happening, check it out in FF, and then in IE:
    HTML Page
    CSS Page

    The server above was down earlier, so I posted them on another site, as well. If the links above don't work, try these:

    HTML Page
    CSS Page


    CSS:
    Code:
    .logo_banner { background-image:url(../images/new/logo_web1.png); background-repeat:no-repeat; background-position:left top; height:188px; }
    .spacer { height:10px; }
    .spacer_10px { height:10px; }
    .spacer_40px { height:40px; }
    .spacer_50px { height:50px; }
    .spacer_separator { height:1px; background-image:url(../images/bg_separator.png); background-repeat:repeat-x; background-position:center top; }
    
    #menu { height:50px; margin-left:200px; margin-top:-80px; }
    
    #home_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; }
    #home1_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:120px; margin-top:-50px; }
    #home2_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:240px; margin-top:-50px; }
    #home3_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:360px; margin-top:-50px; }
    #home4_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:480px; margin-top:-50px; }
    
    .spacer_dotted_line { background-image:url(../images/new/dotted_line.png); background-repeat:repeat-x; width:860px; height:2px; margin-left:auto; margin-right:auto; }
    
    .div_body_top { background-image:url(../images/backgrounds/bg_dark_body_top1.png); width:900px; height:20px; background-repeat:no-repeat; }
    .div_body_middle { background-image:url(../images/backgrounds/bg_dark_body_middle1.png); height:auto; background-repeat:repeat-y; padding-left:20px; padding-right:20px; }
    .div_body_bottom { background-image:url(../images/backgrounds/bg_dark_body_bottom1.png); width:900px; height:20px; background-repeat:no-repeat; }
    
    .footer_bar { background-color:#2B2D20; height:60px; text-align:center; }
    .footer_text { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:60px;}
    
    .text_style_body { text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; color:#CECECE; font-size:10px; }
    .content_body { height:auto; width:900px; margin-left:auto; margin-right:auto; }
    
    .text_area { padding-top:10px; padding-left:20px; padding-right:20px; padding-bottom:20px; width:860px; margin-left:auto; margin-right:auto; }
    And here is the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Page 1</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    
    	<div class="content_body">
    		<div class="div_body_top"></div>
    		<div class="div_body_middle">
    			<div class="logo_banner"></div>
    			<div id="menu">
    				<div id="home_btn"></div>
    				<div id="home1_btn"></div>
    				<div id="home2_btn"></div>
    				<div id="home3_btn"></div>
    				<div id="home4_btn"></div>
    			</div>
    
    			<div class="spacer_10px"></div>
    			<div class="spacer_dotted_line"></div>
    			<div class="spacer_40px"></div>
    
    			<div class="text_style_body">
    				Here is some content. Love that content. One day this text will actually say something.
    				...
    				<br/>
    				<br/>
    				Here is some content. Love that content. One day this text will actually say something.
    				Here is some content. Love that content. One day this text will actually say something.
    				Here is some content. Love that content. One day this text will actually say something.
    				...
    			</div>
    
    			<div class="spacer_50px"></div>
    			<div class="spacer_40px"></div>
    		</div>
    		<div class="div_body_bottom"></div>
    	</div>
    	<div class="spacer">&nbsp;</div>
    	<div class="footer_bar footer_text">Copyright 2008</div>
    </div>
    </body>
    </html>

    Any help is GREATLY appreciated. Thanks!
    Last edited by thephatp; 12-18-2008 at 07:43 PM.

  • #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 thephatp,
    I think you would have better luck positioning elements using floats and margins, instead of the negative margins your using now.
    There is also no need for spacer divs, you can put a space in by adjusting the top or bottom margin.

    I didn't look at it in IE6 so I can't really be sure about your bg image but I suspect the negative margin is causing that...
    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
    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 this and see if IE likes it better -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body, html {
    	font: 10px Geneva, Arial, Helvetica, sans-serif;
    	color: #cecece;
    	background: #141414 url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_page_green.png);
    }
    .content_body { 
    	width:900px; 
    	margin: 0 auto 10px auto;
    }
    	.div_body_top {
    		background:url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_dark_body_top1.png) no-repeat;
    		width:900px;
    		height:20px;
    	}
    .div_body_middle {
    	background:url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_dark_body_middle1.png) repeat-y;
    	overflow: auto;
    }
    .logo_banner {
    	background:url(http://www.chadmorris.net/Samples/test/images/new/logo_web1.png) no-repeat 20px top;
    	height:158px;
    	width: 900px;
    	padding-top: 1px; /*hack to eliminate uncolapsing margin*/
    }
    #menu { 
    	height:50px; 
    	margin: 110px 0 0 230px;
    	overflow: auto;
    }
    	#home_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
    	#home1_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
    	#home2_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
    	#home3_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
    	#home4_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
    .spacer_dotted_line {
    	width:860px;
    	height:2px;
    	margin: 10px auto 40px auto;
    	background: url(http://www.chadmorris.net/Samples/test/images/new/dotted_line.png) repeat-x;
    }
    .text_style_body {
    	text-align:left;
    	padding: 10px 20px;
    }
    			.spacer_40px { height:40px; }
    			.spacer_50px { height:50px; } 
    .div_body_bottom {
    	background:url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_dark_body_bottom1.png) no-repeat;
    	width:900px;
    	height:20px;
    }
    .footer_bar { 
    	background: #2B2D20;
    	height: 60px; 
    	line-height: 60px; 
    	text-align: center;
    }
    .footer_text { 
    	color: #FFFFFF; 
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div class="content_body">
    		<div class="div_body_top"></div>
                <div class="div_body_middle">
                    <div class="logo_banner">
                        <div id="menu">
                            <div id="home_btn"></div>
                            <div id="home1_btn"></div>
                            <div id="home2_btn"></div>
                            <div id="home3_btn"></div>
                            <div id="home4_btn"></div>
                        </div>
    				<!--end logo_banner--></div>
                    			<div class="spacer_dotted_line"></div>    
            <div class="text_style_body">
                Here is some content. Love that content. One day this text will actually say something.
                ...
                <br/>
                <br/>
                Here is some content. Love that content. One day this text will actually say something.
                Here is some content. Love that content. One day this text will actually say something.
                Here is some content. Love that content. One day this text will actually say something.
                ...
            </div>    
                                <div class="spacer_50px"></div>
                                <div class="spacer_40px"></div>
                <!--end div_body_middle--></div>
    		<div class="div_body_bottom"></div>
    	<!--end content_body--></div>
    <!--end container--></div>
    <div class="footer_bar footer_text">Copyright 2008</div>
    </body>
    </html>
    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

  • #4
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator,

    Thank you SO MUCH! That works like a charm!

    I've never really used overflow before. What does that provide in the menu?

    Again, thank you so very much for the help! Getting used to using all divs takes a little work and a lot of learning experiences!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    overflow:auto; is one method of clearing floats. Read about it here.

    Code:
    Getting used to using all divs takes a little work and a lot of learning experiences!
    I was lucky and started out with CSS. I never learned tables so I didn't have to unlearn bad habits.
    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
    •