IE6 Problem with inheriting previous div

caitlin

01-04-2008, 08:49 PM

Having some weird issues in IE6.

Way it should look (taken in IE7):
http://www.nolemonplease.com/hp/ie7.jpg

Way it looks in IE6:
http://www.nolemonplease.com/hp/ie6.jpg

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:

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

#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;
}

Excavator

01-04-2008, 11:43 PM

Hello caitlin,
The js script for .png is famous for not working on background images.
This might be more dependable.
<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?

Excavator

01-04-2008, 11:57 PM

Try this... I didn't have your images so you'll have to swap them.<!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>
</div>
</body>
</html>

caitlin

01-05-2008, 05:04 PM

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.

Excavator

01-05-2008, 05:37 PM

Oops, I even read that bit about the repeating background on the middle div.

This works then:<!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>
</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?

caitlin

01-05-2008, 08:11 PM

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.

caitlin

01-05-2008, 08:14 PM

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.

Excavator

01-05-2008, 09:20 PM

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...

caitlin

01-14-2008, 06:06 PM

...anybody?

caitlin

01-15-2008, 08:21 PM

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!