List markers behind li background image in IE

Please support our HTML and CSS advertiser: 50% Off 6 Months Web Hosting from 1&1. The World's #1 Host!
Reply

•
•
Join Date: Jul 2007
Posts: 18
Reputation: Lucrezia is an unknown quantity at this point 
Solved Threads: 0
Lucrezia Lucrezia is offline Offline
Newbie Poster

List markers behind li background image in IE

 
0
  #1
Aug 3rd, 2008
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 11:55 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 383
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 35
langsor langsor is offline Offline
Posting Whiz

Re: List markers behind li background image in IE

 
0
  #2
Aug 4th, 2008
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 18
Reputation: Lucrezia is an unknown quantity at this point 
Solved Threads: 0
Lucrezia Lucrezia is offline Offline
Newbie Poster

Re: List markers behind li background image in IE

 
0
  #3
Aug 4th, 2008
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 383
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 35
langsor langsor is offline Offline
Posting Whiz

Re: List markers behind li background image in IE

 
0
  #4
Aug 4th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 18
Reputation: Lucrezia is an unknown quantity at this point 
Solved Threads: 0
Lucrezia Lucrezia is offline Offline
Newbie Poster

Re: List markers behind li background image in IE

 
0
  #5
Aug 4th, 2008
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!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 18
Reputation: Lucrezia is an unknown quantity at this point 
Solved Threads: 0
Lucrezia Lucrezia is offline Offline
Newbie Poster

Re: List markers behind li background image in IE

 
0
  #6
Aug 4th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 383
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 35
langsor langsor is offline Offline
Posting Whiz

Re: List markers behind li background image in IE

 
0
  #7
Aug 4th, 2008
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.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum


Views: 3728 | Replies: 6
Thread Tools Search this Thread



Tag cloud for HTML and CSS
alignment background blog browser cart cascade center chrome code compatibility containers create css deleted design designing distortion div divs dreamweaver drupal editor emailmarketing embed explorer fail firefox float font fonts format free frontpage google helprequired-urgent hover html ide ie6 ie7 iframe image input internet internetexplorer iphone javascript jpeg js links list map maps margin marketshare missing mozilla mp3 navigationbars newb object opacity opera override overwrite perl player pnginie6 position positioning prevent problem scroll seo shopping strings studio style table tables tag templates text translation url validation visual visualization w3c web webform website websitedesign windows7 word wordpress xhtml xml xsl youtube
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2010 DaniWeb® LLC