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
  • 194 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #380484

Dani AI

Generated

This thread is a classic example of the old IE “hasLayout” vs list-marker stacking problem. tracked the symptom to a layout-triggering property (min-height); ‘s stripped-down test demonstrated the expected behavior when that forced layout is removed. The difference between browsers comes down to how the rendering order for the marker is implemented when an element acquires layout.

Short technical summary: older IE (and some browser quirks modes) can paint the list marker as part of the element’s background/early paint pass when the element hasLayout. That makes the marker appear behind any LI background. Opera differences often follow from doctype/quirks mode or small HTML/CSS differences, so a minimal, valid test page usually exposes the cause.

Practical options that reliably avoid the problem (pick one that fits the project):

  • Remove hasLayout from the LI: move min-height/presentation to an inner wrapper and leave the LI without layout-triggering props. This keeps browser markers in front.
  • Replace the browser marker with a generated one (CSS counters or server-side/HTML number) so the number is an ordinary positioned element that can be layered with z-index. Example modern approach:
/* generated marker approach (works in modern browsers) */
ol.counter-list { counter-reset: item; list-style: none; padding-left: 72px; }
ol.counter-list li { position: relative; padding: 12px 10px 12px 12px; background: url(circle_orange.gif) no-repeat 6px 50%; min-height: 30px; }
ol.counter-list li::before { counter-increment: item; content: counter(item) "."; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 42px; font-weight: bold; color: #fff; }
  • For legacy IE only, serve an IE-specific stylesheet (conditional comments) that either hides the native marker and injects numbers, or moves the decorative background to an inner element.

Final notes: validate DOCTYPE and HTML, test with a minimal page as did, and keep server-side conditional output well-formed (malformed markup can change layout behavior). The generated-marker approach gives the most predictable cross-browser layering and avoids relying on native marker painting quirks.

Recommended Answers

All 6 Replies

Member Avatar for Member #380484

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() 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 Member #380484

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 Member #380484

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.