0

This is slowly converting me to a suicidal lunatic :P

I have an ordered list with class="funkynumbers". The CSS is as follows:

ol.funkynumbers
{
	list-style-type:decimal;
	list-style-position:inside;
	margin:0;
	padding:0;
}

ol.funkynumbers li
{
	font-size:42px;
	padding: 10px 0px 10px 12px;
	font-weight:bold;
	background:url(nem/images/layout/circle_orange.gif) no-repeat 0% 10px;
	color:white;
	<if condition="is_browser('ie')">
	vertical-align:top;
	display:list-item;
	</if>
	min-height:30px;
}

ol.funkynumbers li div.list_content /* once IE6 usage drops significantly, ditch the class and use ol.funkynumbers li > div */
{
	font-size:12px;
	font-weight:normal;
	color:#555;
	float:right;
	width:840px;
	margin-top:<if condition="is_browser('ie')">5<else />-<if condition="is_browser('opera')">5<else />42</if></if>px;
}

and the markup is like that:

<ol class="funkynumbers">
	<li>
		<div class="list_content">blah blah blah</div>
	</li>
	<li>
		<div class="list_content">blah blah blah</div>
	</li>
	<li>
		<div class="list_content">blah blah blah</div>
	</li>
	<li>
		<div class="list_content">blah blah blah</div>
	</li>
	<li>
		<div class="list_content">blah blah blah</div>
	</li>
	<li>
		<div class="list_content">blah blah blah</div>
	</li>
</ol>

The <li> background-image hides the list markers in IE, whereas in all other browsers the list marker is in front of it, creating the desired effect.

I've searched a lot about this issue, and haven't found anything. :(

Any ideas?

Thanks in advance...

PS: The <if condition=""> syntax is a proprietary convenience of the software platform I'm using, just ignore it.

2
Contributors
6
Replies
7
Views
9 Years
Discussion Span
Last Post by langsor
0

Try to simplify the problem on a different page, when it's just not working out...
This is working in Firefox 3 and IE 7 on Windows.

<html>
<head>
<style type="text/css">
ol {
  list-style-type:decimal;
  list-style-position:inside;
}

div {
  display: inline; /* your line-wrap problem */
    /* or use an inline element not block element */
}

li {
  padding-left: 10px;
  padding-top: 3px;
  background:url(http://stb.msn.com/i/B6/32E46DE281A68B9C33FC582D2569D.gif) no-repeat 0 0;
}

</style>
</head>
<body>
<ol>
  <li><div>blah blah blah</div></li>
  <li><div>blah blah blah</div></li>
  <li><div>blah blah blah</div></li>
  <li><div>blah blah blah</div></li>
  <li><div>blah blah blah</div></li>
  <li><div>blah blah blah</div></li>
</ol>
</body>
</html>
0

I'm afraid you didn't understand what the problem is...
The list marker (the number, eg 1., 2., 3. etc) is behind the <li> background image in IE (and Opera, as I recently discovered).

For now I hardcoded the numbers in the markup, but it doesn't feel right :(

0

What version fo IE are you using?

I tested the above that I submitted yesterday in IE 7 and the list numbers are in front of the images.

I only have IE 7 on my computer these days and not Opera.

Sorry if my CSS comment about line wrapping was deceptive.

0

You're right! In your code, the list markers do appear in front of the background images!
WTF?
I'll try to isolate the issue I had, and I'll post my findings.

Thanks!

0

Oh my...
It was the usual suspect: hasLayout.
Once I put in a declaration that gives <li> "layout", that problem arises.
In that case, it was min-height.

I still can't figure out what the problem was in Opera though.

0

Darn that Opera, it's one of the most CSS compliant browsers but a real pain in my arse when it comes to CSS layout or JavaScript dynamic scripting...

Okay, I installed the latest Opera just for you. The styles I submitted yesterday are working in this latest version of Opera 9.51 with the list markers over the background image...so I can't debug it unless I go back to what you originally submitted...possibly the browser is throwing some kind of error on your conditional <if> statements, which is not standards compliant (to my knowledge)...you might remove those and see if it helps.

Or post here what you have done since then and I will try and help.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.