...

View Full Version : Floated UL container, different heights, odd line breaks. Inline-block not working



senselocke
06-28-2010, 08:30 AM
I'm trying to re-design the central content div of our website. I'm wanting to use sliding containers to have a band of green with the item title, the image and short description below with a white background, then a green stripe with the price below. The upper right corners and lower left corners are "rounded" using the Nifty Corners technique:
http://www.html.it/articoli/nifty/nifty1.html

I found and tried to implement this source for the floated list:
http://www.css-lab.com/demos/image-display/inline-block-caption.html

I want the containers to slide from line to line as the screen width shrinks.

However, I cannot get that to work. It seems something in my rounded corners container is interfering. I've tried to set display:inline-block to both the li and the li a, but it doesn't work.

Here's the code I have so far:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<style type="text/css">

body {text-align:center;background-color:#FFF;font-size:11px;line-height:1.6em;}

#outer {
width:60%;
background:#FFFFFF;
margin:0 auto;
text-align:center; }

#container {
list-style:none;
text-align:center; }

#container li {
display:-moz-inline-box;/* FF2 & under */
display:inline-block;/* for modern browsers */
vertical-align:top;
font-size:1.4em;
float:left;
width:150px;
margin:20px 10px 0 10px;
float:left;/*IE6/7 needs haslayout*/ }

#container li a {
text-decoration:none;
background:#FFF; }

#container a:hover {
background:#CCC;
color:#000; }

.c-img img {border:none;}
.c-head, .c-title, .c-body, .c-img, .c-foot, .c-price,
.tr, .tr b, .ur, .ur b, .bl, .bl b, .ll, .ll b {display:block;}
.c-head, .c-body, .c-foot {width:150px;}
.c-title, .c-img, .c-price {padding:0 8px;color:#000;}
.c-body, .c-foot {position:relative;}
.c-title {text-align:left;}
.c-img {text-align:center;border:1px solid #6B8E23;padding:2px;}
.c-price {text-align:right;}
.c-title, .c-foot, .ur b, .ll b {background:#6B8E23;}
.tr b, .bl b {background:#FFF;}
.tr, .ur {float:right;}
.bl, .ll {float:left;position:absolute;left:0;bottom:0;}
.tr, .ur, .ll, .bl {width:9px;height:9px;font-size:1px;}
.tr b, .ur b, .ll b, .bl b {overflow:hidden;}
.t1, .t2, .u1, .u2, .l1, .l2, .b1, .b2 {height:2px;}
.t3, .t4, .t5, .t6, .t7, .u3, .u4, .u5, .u6, .u7,
.l3, .l4, .l5, .l6, .l7, .b3, .b4, .b5, .b6, .b7 {height:1px;}
.t1, .u1 {margin:0 0 0 8px;} .b1, .l1 {margin:0 8px 0 0;}
.t2, .u2 {margin:0 0 0 7px;} .b2, .l2 {margin:0 7px 0 0;}
.t3, .u3 {margin:0 0 0 6px;} .b3, .l3 {margin:0 6px 0 0;}
.t4, .u4 {margin:0 0 0 5px;} .b4, .l4 {margin:0 5px 0 0;}
.t5, .u5 {margin:0 0 0 4px;} .b5, .l5 {margin:0 4px 0 0;}
.t6, .u6 {margin:0 0 0 2px;} .b6, .l6 {margin:0 2px 0 0;}
.t7, .u7 {margin:0 0 0 0;} .b7, .l7 {margin:0 0 0 0;}

</style>

<!--[if lt IE 8]>
<style type="text/css">
#navlist li{
display:inline;
}
</style>
<![endif]-->


</head>
<body>
<div id="outer">
<ul id="container">


<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM! Cans cans cans cansCans cans cans cansCans cans cans cans

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



<li><a href="http://www.armygear.net"><span class="c-head"><span class="tr"><b class="t7"></b>
<b class="t6"></b><b class="t5"></b><b class="t4"></b><b class="t3"></b><b class="t2"></b>
<b class="t1">&nbsp;</b></span><span class="c-title">

THIS IS THE TITLE

</span></span><span class="c-body"><span class="ur"><b class="u7"></b><b class="u6"></b><b class="u5"></b>
<b class="u4"></b><b class="u3"></b><b class="u2"></b><b class="u1"></b></span><span class="c-img">

<img src="http://www.armygear.net/armygear/images/mini/50ca%20g%20th.jpg" alt="thumbnail" height="70" width="90"><br>
Cans! BUY'EM!

</span><span class="ll"><b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
<b class="l5"></b><b class="l6"></b><b class="l7"></b></span></span><span class="c-foot">
<span class="c-price">

PRICE

</span><span class="bl"><b class="b1">&nbsp;</b><b class="b2"></b><b class="b3"></b><b class="b4">
</b><b class="b5"></b><b class="b6"></b><b class="b7"></b></span></span></a></li>



</ul>

<br style="clear:both">

</div>
</body>
</html>



As you can see, the container that's supposed to slide to the next line gets "stuck" on the taller element in the previous line. I need this to be scalable to many resolutions--it's for an army surplus site, and we have a lot of customers that use widely varied screen resolutions and browsers. I could just pad the unused lines with line breaks, but when customers increase the font size, the problem arises.

Help? Or, while you're at it, optimizations?

senselocke
06-30-2010, 07:27 PM
Two days, no replies. Kabump.

senselocke
07-10-2010, 04:16 AM
12 days, no answer. Does anyone code in the summer?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum