1
It seems w3 don't want us applying widths to our inline elements, I can't see why not and indeed if you throw in the 'position: absolute' property (without any 'top' 'bottom' etc) Firefox, Opera & to some extent IE let you. This is ideal for making graphical links. Sadly though, when you apply a background colour (or image) underneath such a link IE gets literal about the 'absolute'ness of position and won't let these elements move/flow even when other blocks are hidden/unhidden with 'display: none/block'.
For all I know IE might be doing this right, indeed as inline widths are not kosher there may be no right / wrong way of dealing with this however... That still leaves me with a problem - if it can't be solved this way, is there another similarly concise way of solving it?
Thanks for your help :-)
Roger.
Code follows...
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
/*.results {background-color: #0f0;} if this is uncommented it breaks in IE */
.mltd {vertical-align: top;}
.lst_details{display: none;}
.ml{background-image: url(http://www.technicalbloke.com/more_less.png);
background-position: 0px 0px;
background-repeat: no-repeat;
position: absolute;
width: 35px; height: 14px;}
</style>
<script type="text/javascript">
function flip(id, img, offset)
{ var item = document.getElementById(id);
var g = document.getElementById(img);
if(item.style.display == 'block')
{ item.style.display = 'none';
g.style.backgroundPosition = '0px 0px'; }
else
{ item.style.display = 'block';
g.style.backgroundPosition = offset+' 0px'; } }
</script>
</head>
<body>
<div class="results">
Item One<span><a class="ml" id="mb_1" onClick="javascript:flip('lst_1', 'mb_1', '-35px')"> </a></span><br>
<div class="lst_details" id="lst_1"> Details for item one.</div>
Item Two <a class="ml" id="mb_2" onClick="javascript:flip('lst_2', 'mb_2', '-35px')"> </a><br>
<div class="lst_details" id="lst_2"> Details for item two.</div>
Item Three <a class="ml" id="mb_3" onClick="javascript:flip('lst_3', 'mb_3', '-35px')"> </a><br>
<div class="lst_details" id="lst_3"> Details for item three.</div>
</div>
</body>
</html>
[/HTML]
