Problem positioning a repeat-x background image

[wiser3]

Don't know what to call the layout i'm trying to do, but it's often used on restaurant menus. You have a column of items on the left with their prices in a column on the right and a row of dots connecting them together.

ie:
food item .......... $14.95
desert .............. $4.11

This has been harder to achieve then i expected. I've got a section of the technical product data i'm dealing with laid out properly (using an unordered list with the left and right columns in spans). My problem is that regardless of weather i use a bottom-border or a repeating background image for the dots they go all the way across under each row.

How do i move the border or the background image up so that it goes behind the spanned text? I'd prefer to use the background image. I've put a background colour on the spans which should prevent the image from appearing behind the text.

Here's the code i'm working with:

<div class="techdata">
	<ul>
		<li><span class="property">Manufacturer</span><span class="spec">JOKAB SAFETY</span></li>
		<li><span class="property">Ordering Data</span><span class="spec">RT7A delay 0 - 1.5 s</span></li>
		<li class="extradata"><span>RT7B delay 0 - 3.0 s</span></li>
		<li><span class="property">Color</span><span class="spec">black and beige</span></li>
		<li><span class="property">Weight</span><span class="spec">405 g (24 VDC), 550 g (24-230 VAC)</span></li>
		<li><span class="property">Supply Voltage (A1-A2)</span><span class="spec">24 VDC +15/-20%,</span></li>
		<li class="extradata">24/48/115/230 VAC, +/-15%, 50-60 Hz</li>
		<li class="heading">Power Consumption</li>
		<li><span class="label">DC supply, nominal voltage</span><span class="spec">4.6 W</span></li>
		<li><span class="label">AC supply, nominal voltage</span><span class="spec">8.7 VA</span></li>
		<li><span class="property">Connections S13</span><span class="spec">Short-circuit</span></li>
		<li class="extradata">protected voltage output,</li>
		<li class="extradata">70mA +/- 10% current limitation.</li>
		<li class="extradata">Is used for the inputs S14, S32 and S44</li>
		<li><span class="property">Connections S53</span><span class="spec">Short-circuit</span></li>
		<li class="extradata">protected voltage output,</li>
		<li class="extradata">internal automatic fuse, max 270 mA.</li>
		<li class="extradata">Is used for the reset and autoreset</li>
		<li class="extradata">inputs X1 and X4.</li>
	</ul>
</div>

/* Technical Data UL styles */
div.techdata { width:100%; margin:0 auto; padding:0px 0; margin:0 auto; border:1px solid #ccc; clear:both; text-align:right; }
div.techdata ul { width:100%; list-style:none; display:block; padding:0; margin:0; }

div.techdata ul li { background:url(../images/misc/dot.gif) repeat-x left bottom #fffef2; clear:both; display:block; text-align:right; }
/* background-image: url(../images/misc/dot.gif); background-repeat: repeat-x; background-position: left bottom; */
/* background:url(../images/misc/dot.gif) repeat-x left bottom #fff; */
/* border-bottom:2px dotted black; */

li span.property { display:block; float:left; font-weight:bold; clear:left; padding:0; margin:0; background-color:#fffef2; top:5px; }
li span.label { display:block; float:left; font-weight:normal; clear:left; padding:0; margin:0; background-color:#fffef2; top:5px; }
li span.spec { display:block; text-align:right; padding:0; margin:0; background-color:#fffef2; }

div.techdata ul li.extradata { text-align:right; border:0; background:none; clear:both; }
div.techdata ul li.heading { text-align:left; font-weight:bold; background:none; clear:both; margin-top:0.6em; }

 

[wiser3]

With a bit more tweaking i got it working in IE6. But my dots aren't showing up at all in FF.

Here's my test page:

http://www.trep4.com/newjsna/products/safetyrelay/RT7TechData.html

And the latest css:

div.techdata { width:100%; margin:0.5em auto; padding:0px 0; margin:0 auto; border:1px solid #ccc; clear:both; text-align:right; }
div.techdata ul { width:100%; list-style:none; display:block; padding:0; margin:0; }

div.techdata ul li { background:url(../images/misc/dot.gif) repeat-x; background-position:5% 70%; clear:both; display:block; text-align:right; padding:0; margin:0; }
/* background-image: url(../images/misc/dot.gif); background-repeat: repeat-x; background-position: left bottom; */
/* background:url(../images/misc/dot.gif) repeat-x left bottom; */
/* border-bottom:2px dotted black; */

li span.property { display:block; float:left; font-weight:bold; clear:left; padding:0; margin:0; background-color:#fffef2; top:5px; }
li span.label { display:block; float:left; font-weight:normal; clear:left; padding:0; margin:0; background-color:#fffef2; top:5px; }
li span.spec { display:block; float:right; width:auto; padding:0; margin:0; background-color:#fffef2; }
div.techdata ul li.extradata { text-align:right; border:0; background:none; clear:both; }
div.techdata ul li.heading { text-align:left; font-weight:bold; background:none; clear:both; margin-top:0.6em; }

Thanks

 

[Vragabond]

I could not find your dot.gif in the reference you give it. Neither could my browser. Maybe that's why it's not showing up.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[wiser3]

Oops, i forgot to upload the dot.gif file to my test site. It's up now and you'll see it appear in IE but not FF. Haven't tested with anything else.

 

[Vragabond]

Your <li> elements have only two elements inside: two floated spans. Since floated elements do not contribute to the height of their parent (in modern, standards-compliant browsers) your <li> is treated like it has no content and is therefore 0px high. You need to have some height in your li.

You could google for different methods in clearing floats (which is what you have to do to cause the <li> to wrap around the floated elements) but since in your case it works in IE6 and not the other browsers you could simply try with adding [tt]overflow: auto;[/tt] to your <li> css. This method works for all other browsers but IE6.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[wiser3]

Adding overflow: auto; to the li tag didn't work.

 

[Vragabond]

Not much to say, but it works for me. If I look at your page in both IE7 or FF the dots appear. Similarly Opera and Safari do not fail me either. Which is the browser that failed you?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[wiser3]

Found a web page with a solution:

http://www.quirksmode.org/css/clearing.html

And now have it working in FF, IE6/7. If others would like to test with other browsers i'd be interested in the results. Thanks. In addition to adding the overflow:auto i had to give the li a height. It's now working on everything i test in.