ultrus Posted August 29, 2008 Share Posted August 29, 2008 Thanks to a great tip from rhodesa in this post, I was able to make my bullet ted list look great (in FireFox, Safari). However the bullets issue resurfaced from the depths of hell to haunt me once again when being displayed in Internet Explorer. The bullets don't line up with the lines they are assigned to. You can see this in action here: http://www.christopherstevens.cc/fun/bulletsFromHell.html You can ignore the second set of bullets on the page as they are a revised version for a different template. They too have the same bullet image issues though. Here is the code: ... <style type="text/css"> body { background-color: #FFFFFF; } ul { list-style-type: none; } ul li { background: url(http://christopherstevens.cc/fun/bulDiamSB.gif) left no-repeat; padding-left: 11px; } ul ul li { background: url(http://christopherstevens.cc/fun/bulDiamSB2.gif) left no-repeat; } ul ul ul li { background: url(http://christopherstevens.cc/fun/bulDiamS.gif) left no-repeat; } ul ul ul ul li { background: url(http://christopherstevens.cc/fun/bulDiamS2.gif) left no-repeat; } #sidebar ul { list-style-type: none; margin-left: 0px; } </style> ... <ul> <li>level 1</li> <ul> <li>level 2</li> <ul> <li>level 3</li> <ul> <li>level 4</li> </ul> </ul> </ul> </ul> ... Any thoughts on how to resolve this? Thanks muchly. Quote Link to comment https://forums.phpfreaks.com/topic/121886-bullets-from-hellllll-strike-back/ Share on other sites More sharing options...
wildteen88 Posted August 29, 2008 Share Posted August 29, 2008 Its because your html is incorrect. <div id="sidebar"> <ul style="display: inline;"> <ul> <li>level 1</li> <ul> <li>level 2</li> <ul> <li>level 3</li> <ul> <li>level 4</li> </ul> </ul> </ul> </ul> </ul> </div> Remove the highlighted code above. What I'd apply is apply a class (eg: <ul class="inline">) to the first ul tag, and apply the following css #sidebar ul.inline { display: inline; } Quote Link to comment https://forums.phpfreaks.com/topic/121886-bullets-from-hellllll-strike-back/#findComment-628988 Share on other sites More sharing options...
ultrus Posted August 29, 2008 Author Share Posted August 29, 2008 Right, My second group is a bit messed up. I'm still having issues with the first group getting the bullets to line up with the bulletted items in Internet Explorer. I just re-uploaded the page without reference to #sidebar items, visible on a refresh at: www.christopherstevens.cc/fun/bulletsFromHell.html . Here is the updated script in full: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Bullets From Helllllll!</title> <style type="text/css"> body { background-color: #FFFFFF; } ul { list-style-type: none; } ul li { background: url(http://christopherstevens.cc/fun/bulDiamSB.gif) left no-repeat; padding-left: 11px; } ul ul li { background: url(http://christopherstevens.cc/fun/bulDiamSB2.gif) left no-repeat; } ul ul ul li { background: url(http://christopherstevens.cc/fun/bulDiamS.gif) left no-repeat; } ul ul ul ul li { background: url(http://christopherstevens.cc/fun/bulDiamS2.gif) left no-repeat; } </style> </head> <body> <ul> <li>level 1</li> <ul> <li>level 2</li> <ul> <li>level 3</li> <ul> <li>level 4</li> </ul> </ul> </ul> </ul> </body> </html> Any thoughts on how to correct this in IE to make it look presentable? Thanks much again in advance. Quote Link to comment https://forums.phpfreaks.com/topic/121886-bullets-from-hellllll-strike-back/#findComment-629081 Share on other sites More sharing options...
TheFilmGod Posted August 29, 2008 Share Posted August 29, 2008 Hey Ultrus, I played around with the code and then I realized you forgot a really important thing! <ul> can only contain <li> tags! So if you want to nest a list you need to enclose it within <li> tags. - That may sound easy, but you need to set a special class for <li> tags that are nesting a list so they too don't have a background image. Here's my code. Feel free to modify / use it. Oh, and if you are wondering how I figured this out I had my good old friend "google" help me out! HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> @import url("test.css"); </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Bullets from hell strike back! - Copyright Greg Solak<title> </head> <body> <!-- Html Page Div --> <div id="html_page"> <div id="list"> <ul> <li>Level One</li> <li class="nested_list"> <ul> <li>Level Two</li> <li class="nested_list"> <ul> <li>Level Three</li> <li class="nested_list"> <ul> <li>Level Four</li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <!-- End of HTML Page Div --> </div> </body> CSS: /* Master CSS - controls basic layout - Copyright Greg Solak */ /* Change of browser default properties */ body{margin: 10px auto 30px 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} a {text-decoration: none;} a:hover {text-decoration: underline;} * {margin: 0;padding:0} /* Layout Div */ #html_page {margin: auto; width: 1000px; border: 1px solid #000;} #list { padding: 10px 0 5px 20px; } #list ul { margin: 0; padding: 0; list-style: none; } #list ul li { background: url(http://christopherstevens.cc/fun/bulDiamSB.gif) left no-repeat; padding: 0 0 0 10px; } #list ul li.nested_list { background: none; } #list ul ul { margin: 10px 0 0 20px; } #list ul ul li { background: url(http://christopherstevens.cc/fun/bulDiamSB2.gif) left no-repeat; } #list ul ul ul { margin: 10px 0 0 40px; } #list ul ul ul li { background: url(http://christopherstevens.cc/fun/bulDiamS.gif) left no-repeat; } #list ul ul ul ul { margin: 10px 0 0 60px; } #list ul ul ul ul li { background: url(http://christopherstevens.cc/fun/bulDiamS2.gif) left no-repeat; } Quote Link to comment https://forums.phpfreaks.com/topic/121886-bullets-from-hellllll-strike-back/#findComment-629180 Share on other sites More sharing options...
ultrus Posted August 29, 2008 Author Share Posted August 29, 2008 Hello TheFilmGod, Thank you! I've been searching but must have missed it. Now I can sleep well tonight knowing that the bullets are not creating violence. I made a few tweaks and posted on the same page. Now I just need to figure out how to make the spacing between lists look right in IE while it already looks right in Firefox/Safari. Much appreciated! Quote Link to comment https://forums.phpfreaks.com/topic/121886-bullets-from-hellllll-strike-back/#findComment-629232 Share on other sites More sharing options...
TheFilmGod Posted August 30, 2008 Share Posted August 30, 2008 Glad it worked out for you! Quote Link to comment https://forums.phpfreaks.com/topic/121886-bullets-from-hellllll-strike-back/#findComment-629695 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.