Member Avatar for Lucrezia

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
  • 164 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by langsor
Member Avatar for langsor

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>
Member Avatar for Lucrezia

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 :(

Member Avatar for langsor

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.

Member Avatar for Lucrezia

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!

Member Avatar for Lucrezia

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.

Member Avatar for langsor

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.