[SOLVED] UL within UL Bugs

[Hartley]

Hey,

 

I'm running into an issue with IE. The attached image shows IE on the left and what every other browser (FF here) looks like on the right. I can't seem to get the code to line up. Below is the relevant HTML markup:

 

                <div class="s-mid">
                	<ul class="s-bar">
                    	<li id="s-email"><a href="#">Mail</a></li>
                            <ul id="s-profile-sub">
                            	<li><a href="#">Compose Mail</a></li>
                            	<li><a href="#">View Inbox</a></li>
                                <li><a href="#">Track Messages</a></li>
                                <li><a href="#">Edit Folders</a></li>
                            </ul>
                    	<li id="s-profile"><a href="#">Profile</a></li>
                        	<ul id="s-profile-sub">
                            	<li><a href="#">View Profile</a></li>
                            	<li><a href="#">Edit Profile</a></li>
                                <li><a href="#">Edit Photos</a></li>
                                <li><a href="#">Edit Settings</a></li>
                                <li><a href="#">Profile Privacy</a></li>
                            </ul>
                    	<li id="s-blog"><a href="#">Blog</a></li>
                    	<li id="s-stats"><a href="#">My Statistics</a></li>
                    </ul>
                </div>

 

And the CSS:

/* side menu */
.s-mid a {
color:#fff;
font:11px Verdana;
text-decoration:none;
text-transform:uppercase;
}
.s-mid a:hover { text-decoration:underline; }

.s-bar {
margin:0;
padding:0;
}
.s-bar li {
	height:20px;
	width:160px;
	list-style:none;
	text-indent:22px;
}

/* menu itemization */
#s-online { background:url(../images/icons/status_online.png) no-repeat 0 1px; }
#s-email {background:url(../images/icons/email.png) no-repeat 0 1px; }
#s-profile { background:url(../images/icons/vcard.png) no-repeat 0 1px; }
#s-blog { background:url(../images/icons/book.png) no-repeat 0 1px; }
#s-stats { background:url(../images/icons/chart_bar.png) no-repeat 0 1px; }

/* my mail */
#s-mail-sub { padding:0; position:relative; }
#s-mail-sub a { text-transform:none; }
	#s-mail-sub a:hover { text-decoration:underline; }

/* my profile */
#s-profile-sub { padding:0; position:relative; }
#s-profile-sub a { text-transform:none; }
	#s-profile-sub a:hover { text-decoration:underline; }

 

It's definitely some basic stuff I'm overlooking. Thanks in advance!

 

[attachment deleted by admin]

[Zane]

put the sub ULs into LIs

                   </pre>
<ul class="s-bar">
                       Mail
                       
                               Compose Mail
                               View Inbox
                                Track Messages
                                Edit Folders
                            

and add this to the top of your CSS

ul {  margin:0px; padding:0px;}

[dbrimlow]

Similar to what Zanus did, but to avoid a new list item, you should "embed" the sub list within the parent li tag.

 

So,

 

<ul class="s-bar">
                       <li id="s-email"><a href="#">Mail</a>
                            <ul id="s-profile-sub">
                               <li><a href="#">Compose Mail</a></li>
                               <li><a href="#">View Inbox</a></li>
                                <li><a href="#">Track Messages</a></li>
                                <li><a href="#">Edit Folders</a></li>
                            </ul>
                        </li>
                       <li id="s-profile"><a href="#">Profile</a>
                           <ul id="s-profile-sub">
                               <li><a href="#">View Profile</a></li>
                               <li><a href="#">Edit Profile</a></li>
                                <li><a href="#">Edit Photos</a></li>
                                <li><a href="#">Edit Settings</a></li>
                                <li><a href="#">Profile Privacy</a></li>
                            </ul>
                       </li>
                       <li id="s-blog"><a href="#">Blog</a></li>
                       <li id="s-stats"><a href="#">My Statistics</a></li>
                    </ul>

put this in the css:

ul ul {  margin:0px; padding:0px;}

 

[Hartley]

I see, IE was throwing off that list item. I tried those and it worked beautifully. I also found a CSS Reset set of items which, when I put it in, unified the pages across all browsers, even with those nitpick 1px differences.

 

Thank you everyone for the help!