943,926 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > List markers behind li background image in IE
Ad:
Permalink
Aug 3rd, 2008
0

List markers behind li background image in IE

Expand Post »
This is slowly converting me to a suicidal lunatic

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

CSS Syntax (Toggle Plain Text)
  1. ol.funkynumbers
  2. {
  3. 	list-style-type:decimal;
  4. 	list-style-position:inside;
  5. 	margin:0;
  6. 	padding:0;
  7. }
  8.  
  9. ol.funkynumbers li
  10. {
  11. 	font-size:42px;
  12. 	padding: 10px 0px 10px 12px;
  13. 	font-weight:bold;
  14. 	background:url(nem/images/layout/circle_orange.gif) no-repeat 0% 10px;
  15. 	color:white;
  16. 	<if condition="is_browser('ie')">
  17. 	vertical-align:top;
  18. 	display:list-item;
  19. 	</if>
  20. 	min-height:30px;
  21. }
  22.  
  23. ol.funkynumbers li div.list_content /* once IE6 usage drops significantly, ditch the class and use ol.funkynumbers li > div */
  24. {
  25. 	font-size:12px;
  26. 	font-weight:normal;
  27. 	color:#555;
  28. 	float:right;
  29. 	width:840px;
  30. 	margin-top:<if condition="is_browser('ie')">5<else />-<if condition="is_browser('opera')">5<else />42</if></if>px;
  31. }

and the markup is like that:
HTML Syntax (Toggle Plain Text)
  1. <ol class="funkynumbers">
  2. 	<li>
  3. 		<div class="list_content">blah blah blah</div>
  4. 	</li>
  5. 	<li>
  6. 		<div class="list_content">blah blah blah</div>
  7. 	</li>
  8. 	<li>
  9. 		<div class="list_content">blah blah blah</div>
  10. 	</li>
  11. 	<li>
  12. 		<div class="list_content">blah blah blah</div>
  13. 	</li>
  14. 	<li>
  15. 		<div class="list_content">blah blah blah</div>
  16. 	</li>
  17. 	<li>
  18. 		<div class="list_content">blah blah blah</div>
  19. 	</li>
  20. </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.
Last edited by Lucrezia; Aug 3rd, 2008 at 12:55 pm.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Lucrezia is offline Offline
18 posts
since Jul 2007
Permalink
Aug 4th, 2008
0

Re: List markers behind li background image in IE

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 and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. ol {
  5.   list-style-type:decimal;
  6.   list-style-position:inside;
  7. }
  8.  
  9. div {
  10.   display: inline; /* your line-wrap problem */
  11.     /* or use an inline element not block element */
  12. }
  13.  
  14. li {
  15.   padding-left: 10px;
  16.   padding-top: 3px;
  17.   background:url(http://stb.msn.com/i/B6/32E46DE281A68B9C33FC582D2569D.gif) no-repeat 0 0;
  18. }
  19.  
  20. </style>
  21. </head>
  22. <body>
  23. <ol>
  24.   <li><div>blah blah blah</div></li>
  25.   <li><div>blah blah blah</div></li>
  26.   <li><div>blah blah blah</div></li>
  27.   <li><div>blah blah blah</div></li>
  28.   <li><div>blah blah blah</div></li>
  29.   <li><div>blah blah blah</div></li>
  30. </ol>
  31. </body>
  32. </html>
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Permalink
Aug 4th, 2008
0

Re: List markers behind li background image in IE

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Lucrezia is offline Offline
18 posts
since Jul 2007
Permalink
Aug 4th, 2008
0

Re: List markers behind li background image in IE

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.
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Permalink
Aug 4th, 2008
0

Re: List markers behind li background image in IE

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!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Lucrezia is offline Offline
18 posts
since Jul 2007
Permalink
Aug 4th, 2008
0

Re: List markers behind li background image in IE

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Lucrezia is offline Offline
18 posts
since Jul 2007
Permalink
Aug 4th, 2008
0

Re: List markers behind li background image in IE

Darn that Opera, it's one of the most CSS compliant browsers but a real pain in my **** 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.
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Rotating pictures
Next Thread in HTML and CSS Forum Timeline: [urgent]Searching the static site...





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC