Sent by Thomas O. Isaksson on 24 July 2004 21:09
Hello people!
Ok I've spent a good portion of today implementing workarounds for the
IE6 flickering problem that occurs when you have temporary pages set to
always in the browser settings. I've managed to get rid of all of them
except one. I'm out of ideas and might need some fresh eyes to help me
solve the problem.
The problem with the flickering is that it seem to be bound to
everything within an <a href>. Now my problem is quite a difficult one
to solve:
Here's the markup:
<ul class="buttons">
<li class="bbutton bbutton1"><a href="#" title="Browse all our free
downloads"><span class="btext freedownloads">All Free
Downloads</span></a></li>
<li class="bbutton"><a href="#" title="Check what's most popular right
now"><span class="btext downloadslist">Downloads Toplists</span></a></li>
<li class="bbutton"><a href="#" title="Check who's most popular right
now"><span class="btext artistlist">Artists Toplists</span></a></li>
</ul>
The span is used so that I can set the background image onto something
different then an a (to avoid flickering) and so that it will center in
IE5 Mac. The flickering workaround for the surrounding button lies
within the li.bbutton having the hover state background position
(sharing the same image as the a.bbutton does) set to it. The problem is
that I cannot place the span outside the a, since I need to position the
background icons used in the span in relation to the text. So, with the
span inside the <a href> I'm getting the flickering effect on the icons
anyway. Anyone have a suggestion for how to solve this? I'm all ears!
To see a live page with the problem in question, go to
http://wwwng.thesimsresource.com - it is the middle buttons in the
content area.
Here is the CSS:
ul.buttons {
margin:0;
padding:0;
list-style:none;
}
li.bbutton {
float:left;
display:block;
margin:12px 0 0 6px;
font-weight:bold;
line-height:25px;
text-align:center;
background:url(/images/content/bbutton.gif) 0 -29px no-repeat;
}
li.bbutton1 {
margin-left:12px;
}
li.bbutton a {
display:block;
width:189px;
height:29px;
background:url(/images/content/bbutton.gif) 0 0 no-repeat;
}
li.bbutton a:hover {
background-image:none;
text-decoration:none;
}
span.btext {
cursor:hand;
padding:1px 0 1px 20px;
}
span.artistlist {
background:url(/images/icons/artistlist.gif) 0 2px no-repeat;
}
span.downloadslist {
background:url(/images/icons/downloadslist.gif) 0 1px no-repeat;
}
span.freedownloads {
background:url(/images/icons/freedownloads.gif) 0 1px no-repeat;
}
Best regards,
Thomas O. Isaksson
Oddjob Media ab
www.oddjob.se
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/