By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,787 Members | 1,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,787 IT Pros & Developers. It's quick & easy.

IE not handling background on empty anchors.

r0g
P: 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')">&nbsp;</a></span><br>
<div class="lst_details" id="lst_1">&nbsp;Details for item one.</div>
Item Two <a class="ml" id="mb_2" onClick="javascript:flip('lst_2', 'mb_2', '-35px')">&nbsp;</a><br>
<div class="lst_details" id="lst_2">&nbsp;Details for item two.</div>
Item Three <a class="ml" id="mb_3" onClick="javascript:flip('lst_3', 'mb_3', '-35px')">&nbsp;</a><br>
<div class="lst_details" id="lst_3">&nbsp;Details for item three.</div>
</div>
</body>
</html>
[/HTML]
Jan 6 '08 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
The definition of 'inline' is that content is in an 'inline box', such as text. I fyou don't want part of it to be inline, then use a span, as you do, and say 'display:block'. Then you can move it around without having to use abs pos.
Jan 6 '08 #2

P: 32
Position absolute takes an element out of the normal document flow and places it in an 'absolute' location. Funnily enough.

Setting its parent element to
[HTML]position:relative; [/HTML]
will allow the box to be absolutely placed within the parent element.
like so;

[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;
}
.linkparent { position:relative;}
</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 class="linkparent"><a class="ml" id="mb_1" onClick="javascript:flip('lst_1', 'mb_1', '-35px')">&nbsp;</a></span><br>
<div class="lst_details" id="lst_1">&nbsp;Details for item one.</div>
Item Two <a class="ml" id="mb_2" onClick="javascript:flip('lst_2', 'mb_2', '-35px')">&nbsp;</a><br>
<div class="lst_details" id="lst_2">&nbsp;Details for item two.</div>
Item Three <a class="ml" id="mb_3" onClick="javascript:flip('lst_3', 'mb_3', '-35px')">&nbsp;</a><br>
<div class="lst_details" id="lst_3">&nbsp;Details for item three.</div>
</div>
</body>
</html>[/HTML]


That being said, I can think of a number of ways of doing this better, using
a) semantic markup
b) progressive enhancement (ie not relying on javascript)
c) valid CSS

Heres a starting point.
[HTML] <style type="text/css" media="screen">
dl,
dl dd,
dl dt { margin:0; padding:0;}
dd { display:none; }
</style>

<div>
<dl>
<dt>Item One</dt>
<dd id="details_1">Details for item one.</dd>
<dt>Item Two</dt>
<dd id="details_2">Details for item two.</dd>
<dt>Item Three</dt>
<dd id="details_3">Details for item three.</dd>
</dl>

</div>[/HTML]
Jan 7 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.