Jump to content

Bullets from hellllll strike back!

ultrus

By ultrus
in CSS Help

 Share

Recommended Posts

ultrus Regular Member

ultrus

Posted
Posted

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. :)

Link to comment
Share on other sites
wildteen88 Regular Member

wildteen88

Posted
Posted

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;
}

Link to comment
Share on other sites
ultrus Regular Member

ultrus

Posted
  • Author
Posted

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. :D

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

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!  ;D

 

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;
}

 

Link to comment
Share on other sites
ultrus Regular Member

ultrus

Posted
  • Author
Posted

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!  ;D

 

 

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.