WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > List markers behind li background image in IE

Closed Thread
  Thread Tools Display Modes
Old 3rd August 08, 05:54 PM   #1
Lucrezia
WLC Member
 
Join Date: Aug 2008
Location: Greece
Posts: 1
Default List markers behind li background image in IE

This is slowly converting me to a suicidal lunatic

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

Code:
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:
HTML Code:
<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.
Lucrezia is offline  
Old 6th August 08, 01:05 PM   #2
eatanicecream
WLC Lover
 
Join Date: Mar 2008
Posts: 74
Default Re: List markers behind li background image in IE

Please link to a page, we can't see your images.
eatanicecream is offline  
Old 6th August 08, 02:30 PM   #3
ewwatson
WLC Member
 
ewwatson's Avatar
 
Join Date: Dec 2007
Location: Carlsbad CA
Posts: 48
Default Re: List markers behind li background image in IE

Hello,

On a different note - it seems to me that no one returns to respond to any of these replies anyway so this most lilely is falling on deaf ears anyway. If so - that's the straw - I'm out!

But on to your problem - you can't have a <div> in an <li>. That is most likely your problem. Hope that helps!
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
ewwatson is offline  
Old 30th June 10, 06:11 PM   #4
jdarias
WLC Member
 
Join Date: Jun 2010
Posts: 8
Default Re: List markers behind li background image in IE

What if you use z-index for the list items? Put a high number.
I used it recently to create a list of tabs: the ul had a bottm border wich i wanted hidden by the selected li┤s bottom border wich is white. i accomplished this with z-index.
It┤s a very different problem but may work.

edit: revived old thread. i was searching for something related ordered lists, didn┤t noticed. I┤m sorry.
jdarias is offline  
Closed Thread


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:27 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.