Hi
My site has breadcrumbs that appear on each page. The breadcrumbs are
contained in a div. Occasionally, the trail will become too long for a
fixed-width div and will overflow to the next row which sits outside
of the box.
To remedy this problem, I allow the div to resize according to its
contents. To maintain the background gradient, I placed an absolutely-
positioned image with height: 100% in the div. This image should scale
according to the size of the div. It works perfectly under standards-
compliant browsers. Under IE6, the image refuses to scale beyond its
initial height. In IE7, the image overflows the box entirely and
proceeds halfway down the page.
Does anybody have any suggestions? I'd be very grateful for any
assistance.
Dave
HTML:
<div id="breadcrumbs">
<img src="http://foodanddrink.mintel.com/site_media/layout/common/
bg_breadcrumb.jpg" class="bg" />
<a href="/"><img src="/site_media/layout/common/icon_home.gif"
alt="Home" class="home"/></a>
<ul>
<li></li>
...
<li></li>
</ul>
<div style="clear:both;"></div>
</div>
CSS:
#breadcrumbs {
margin:3px 0px 1px 0;
padding:3px 0px 0px 5px;
position:relative;
width:964px;
zoom:1;
}
#breadcrumbs img.bg {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
#breadcrumbs img.home {
float:left;
width:11px;
height:21px;
margin-right: 5px;
border:0;
}
#breadcrumbs ul{padding:0; margin:0; display:inline; line-height:
21px;}
#breadcrumbs li{ list-style-type:none; display:inline; height: 21px;}
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
