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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Memphis, TN
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE6 Problem with inheriting previous div

    Having some weird issues in IE6.

    Way it should look (taken in IE7):


    Way it looks in IE6:


    I have a sidebar div (looks like a parchment of paper on the page) that is positioned absolutely. Inside it has three divs. There is a top and bottom, both of which to handle images to show ripped edges. These images are transparent pngs, which I am using the filter hack so they can work in IE. The middle is an expandable div to show sub nav links. It usually has a repeated background image, but I changed it to a solid red color to show my problem.

    My problem is that the bottomdiv is using the same background as the middle div, even though I close the middle div. Adding a transparent background color (even inline) to the bottom div does not help. The same problem happened in IE7, but I fixed it with a clear div. This clear div did not help in IE6.

    If I take the unordered list out, and just put in plain text, it works like it should. What's wrong with my unordered list?

    Appropriate HTML Section:
    Code:
    <div id="sidebar">
    	<div id="sidebar-top"></div>
    	<div id="sidebar-inside">
    		<h4>Coffee 101</h4>
    		<ul>
    			<li><a href="/terms/">Terms</a></li>
    			<li><a href="/brewing/">Brewing</a></li>
    			<li><a href="/coffee/">Coffee</a></li>
    			<li><a href="/devotion/">Devotion</a></li>
    		</ul>
    	</div>
    	<div class="clear"></div>
    	<div id="sidebar-bottom"></div>
    </div
    Appropriate CSS Section:
    Code:
    #sidebar {
    	display: block;
    	position: absolute;
    	width: 188px;
    	top: 20px;
    	left: 0;
    	padding: 0 16px 0 0;
    }
    #sidebar #sidebar-top {
    	display: block;
    	height: 30px;
    	width: 188px;
    	background: url(/layout_files/images/sidebartop.png);
    	* background: none;
    	* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/layout_files/images/sidebartop.png', sizingMethod='fixed');
    }
    #sidebar #sidebar-inside {
    	display:  block;
    	background: red;
    	padding: 0 25px;
    	margin: 0;
    }
    #sidebar #sidebar-bottom {
    	display: block;
    	height: 30px;
    	width: 188px;
    	background: url(/layout_files/images/sidebarbottom.png);
    	* background: none;
    	* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/layout_files/images/sidebarbottom.png', sizingMethod='fixed');
    }
    #sidebar ul {
    	margin: 0;
    	padding: 0 0 0 20px;
    }
    #sidebar ul li {
    	margin-bottom: 0;
    	margin-top: 0;
    	* margin-left: 5px;
    	padding-bottom: 5px;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello caitlin,
    The js script for .png is famous for not working on background images.
    This might be more dependable.
    Code:
    <div id="sidebar-top"><img src="/layout_files/images/sidebartop.png" width="188" height="30" alt="" /></div>
    Also, there isn't any float there. What is the clearing div for?
    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,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try this... I didn't have your images so you'll have to swap them.
    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">
    html, body {
    	background: #CCCCCC;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 750px;
    	height: 400px;
    	margin: 50px auto;
    	position: relative;
    	background: #6699CC;
    }	
    #sidebar {
    	display: block;
    	position: absolute;
    	width: 188px;
    	top: 20px;
    	left: 0;
    }
    #sidebar ul {
    	padding: 0 0 0 70px;
    }
    #sidebar ul li {
    	padding-bottom: 5px;
    }
    #sidebar h4 {
    	margin: 0px 0px 0px 20px;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="sidebar">
    		<img src="top.jpg" alt="" width="188" height="30" />
                <h4>Coffee 101</h4>
                    <ul>
                        <li><a href="/terms/">Terms</a></li>
                        <li><a href="/brewing/">Brewing</a></li>
                        <li><a href="/coffee/">Coffee</a></li>
                        <li><a href="/devotion/">Devotion</a></li>
                    </ul>
    		<img src="bottom.jpg" alt="" width="188" height="30" />
    	</div>
    <!--end container--></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
    Jan 2008
    Location
    Memphis, TN
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I need the top and bottom images separate from the middle div, though. The middle div has to have the repeating background image. If the top and bottom are inside the same div, then the transparent part background on the top and bottom will seep through (as IE6 is doing with the bottom.)

    Like I said, it's works fine when I don't use an unordered list. I think that there is something attributed to the ul that is causing the problem.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Oops, I even read that bit about the repeating background on the middle div.

    This works then:
    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">
    html, body {
    	background: #CCCCCC;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 750px;
    	height: 400px;
    	margin: 50px auto;
    	position: relative;
    	background: #6699CC;
    }	
    #sidebar {
    	display: block;
    	position: absolute;
    	width: 188px;
    	top: 20px;
    	left: 0;
    }
    #sidebar-top {
    	width: 188px;
    	height: 30px;
    	background: #33FF00;
    }
    #sidebar-bottom {
    	width: 188px;
    	height: 30px;
    	background: #CC9999;
    }
    #sidebar ul {
    	padding: 0 0 0 70px;
    }
    #sidebar ul li {
    	padding-bottom: 5px;
    }
    #sidebar h4 {
    	margin: 0px 0px 0px 20px;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="sidebar">		
    		<div id="sidebar-top"><img src="top.jpg" alt="" width="188" height="30" /></div>
                <h4>Coffee 101</h4>
                    <ul>
                        <li><a href="/terms/">Terms</a></li>
                        <li><a href="/brewing/">Brewing</a></li>
                        <li><a href="/coffee/">Coffee</a></li>
                        <li><a href="/devotion/">Devotion</a></li>
                    </ul>
    		<div id="sidebar-bottom"><img src="bottom.jpg" alt="" width="188" height="30" /></div>
    	</div>
    <!--end container--></div>
    </body>
    </html>
    I still don't know why transparent .png's are working as a background for you at all. That's not typical. Could be the * hacks you have, I don't know.
    As for why the ul is causing it to break for you, maybe it's getting a margin/padding from the browser? I use * {margin: 0;padding: 0;} to remove defaults.

    Any chance of a link so we can see this in action?
    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

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Memphis, TN
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, of course. Just a bit hesitant since it is a development site for work. Maybe an admin can come in and delete the link after this is figured out? I don't mind it being here, I just don't want it here forever.

    http://highpoint.webrocketdev.com/terms/

    http://highpoint.webrocketdev.com/get_involved/

    The * hacks that I am using are allowing the png's transparency.

    The first link gives you a page with a list in the sidebar. If you view it in ie6, the red leaks behind the bottom image. The second link has just a paragraph in the sidebar, which works completely fine everywhere.

  • #7
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Memphis, TN
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If it was a margin problem, then there would be spacing between the red and the bottom image, rather than red background leaking behind the bottom image.

    I also think that in trying to solve it, I applied some inline styles to see if I could override anything it was inheriting, but nope.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by caitlin View Post
    Yeah, of course. Just a bit hesitant since it is a development site for work. Maybe an admin can come in and delete the link after this is figured out? I don't mind it being here, I just don't want it here forever.
    You can come back and edit the link out yourself any time you feel like.

    I played with this for quite a while and never got it to work right. I see now that is a different png fix than I thought.
    I see removing the ul makes it work and I don't have a clue why.

    The only solution I could think of that I didn't try is presenting the top/bottom png's with src in there respective divs and using the .js png fix.

    Oh well, I'm sure you're about ready for someone else to have a go at this...
    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

  • #9
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Memphis, TN
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...anybody?

  • #10
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Memphis, TN
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well. If anyone is curious, I found a solution.

    I don't know why I didn't think of it before. I just decided not to use lists. Since it's nav, I just decided to use blocked anchors with a background image for the bullets. It all works good now!


  •  

    Posting Permissions

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