Bunched up UL in IE

[kristingish]

Hi,

I have been trying to change the CSS on this list to make it show right in Internet Explorer as it does in most other browsers.

The list is an unordered list functioning as a vertical left menu and can be seen at http://www.kristinrichey.com/morale/index.html

The CSS for the left sidebar is below:

/*Left Div background taken care of by Wrapper*/
#left{
width:269px;
float:left;
clear:right;
padding:0px 0px 5px 20px;
margin:0px;
text-align:left;
}

/*Left Vertical Menu Styling*/
ul#nav{
width:250px;
margin:0px;
padding-left:7px;}

/*Vert Menu - Category Styling*/
ul#nav li{
list-style:none;
background:url(images/leftbutton.png) left no-repeat;
color:#003366;
display:inline-block;
height:21px;
padding:7px 0px 3px 15px;
width:240px;
margin: 5px 0px 5px 0px;}

/*Vert Menu - Style for Arrow on Button*/
ul#nav .arrow{
background:url(images/leftbuttonarrow.png) left no-repeat;}

/*Vert Menu - Removes unnecessary padding from top button*/
ul#nav .top{
margin-top:0px;}

/*Vert Menu - Gives space between button and links*/
ul#nav li ul {
display:inline-block;
margin-top:10px;}

/*Vert Menu - Styles Links & Content*/
ul#nav li ul li{
list-style:none;
width:200px;
background:none;
padding:1px 0px;
margin:0px;
height:13px;
margin-left:-25px;
color:#003366;}

/*Vert Menu - Styles Non-Link Text*/
ul#nav .text{
height:auto;
display:block;
margin:10px 0px 0px -25px;
padding:3px 0px;}

/*Vert Menu - Link Colors & Decoration*/
ul#nav a:link{
color:#000066;
display:block;
height:12px;}
ul#nav a:visited{
color:#000066;}
ul#nav a:active{
color:#000066;}
ul#nav a:hover{
text-decoration:none;
color:#0066CC;}

/*Vert Menu - Search Box*/
.search{
background: url(images/searchbox.gif) no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
width:171px;
float:left;
clear:right;
padding:3px 0px 0px 5px;
margin:2px 0px 3px 0px;
height:21px;
border:none;
overflow:hidden;}

/*Vert Menu - Search Button*/
input.search{
width:20px;
height:22px;
padding:3px;
margin:5px 0px 3px 0px;
float:left;
clear:right;
background:url(images/searchbutton.png) no-repeat;}

The HTML for the Left Sidebar is below:

<div id="left">
<ul id="nav">
<li class="top arrow">My Shopping Cart
<ul>
<li><a href="#">0 items</a></li>
</ul>
</li>
<li>Categories
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
<li><a href="#">Menu Item 7</a></li>
</ul>
</li>
<li>Search
<ul>
<li>
<textarea name="search" cols="17" rows="26" class="search">
Search
</textarea>
<input type="submit" value="" class="search" /></li>
<li class="text">Use keywords to find the product you are looking for.</li>
</ul>
</li>
<li>Information
<ul>
<li><a href="#">Shipping &amp; Returns</a></li>
<li><a href="#">Privacy Notice</a></li>
<li><a href="#">Conditions of Use</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div>

I have no idea why it is sitting on top of itself. It shows fine from what I can see in IE 8 but no other IE.

The page validates just fine. Any help is greatly appreciated.

Thank you!

Kristin

[kristingish]

Im kind of bumping this. I havent gotten any response and Im not sure why.

[abduraooft]

It's a mess even in FF(2). How do you want to make it? A vertical drop down menu like http://htmldog.com/articles/suckerfi.../vertical.html ?

[kristingish]

I had used an online service to test browser compatabilkty which I guess was not as effective as I had thought.

Using firefox 3 it shows perfectly. It is supposed to be a vertical list menu but with no dropdown function. You are supposed to see all categories and links at all times.

The problem is that the links all seem to overlap And bunch up and I amnot sure why this is happening.

Thanks for the response

[abduraooft]

Try

#left{
width:269px;
float:left;
clear:left;
padding:0px 0px 5px 20px;
margin:0px;
text-align:left;
}
ul#nav li{
list-style:none;
background:url(images/leftbutton.png) top left no-repeat;
color:#003366;
display:inline-block;
/* height:21px; */
padding:0px 15px;
width:240px;
margin: 5px 0px 5px 0px;}

ul#nav li ul li{
list-style:none;
width:200px;
background:none;
padding:1px 0px;
margin:0px;
/*height:13px;*/
/*margin-left:-25px;*/
color:#003366;}

[kristingish]

If I modify the code as follows, I get bad results in FF3 without even testing other browsers:

/*Left Div background taken care of by Wrapper*/
#left{
width:269px;
float:left;
clear:left;
padding:0px 0px 5px 20px;
margin:0px;
text-align:left;
}
ul#nav li{
list-style:none;
background:url(leftbutton.png) top left no-repeat;
color:#003366;
display:inline-block;
/* height:21px; */
padding:0px 15px;
width:240px;
margin: 5px 0px 5px 0px;}

ul#nav li ul li{
list-style:none;
width:200px;
background:none;
padding:1px 0px;
margin:0px;
/*height:13px;*/
/*margin-left:-25px;*/
color:#003366;}


/*Vert Menu - Style for Arrow on Button*/
ul#nav .arrow{
background:url(images/leftbuttonarrow.png) left no-repeat;}

/*Vert Menu - Removes unnecessary padding from top button*/
ul#nav .top{
margin-top:0px;}


/*Vert Menu - Styles Non-Link Text*/
ul#nav .text{
height:auto;
display:block;
margin:10px 0px 0px -25px;
padding:3px 0px;}

/*Vert Menu - Link Colors & Decoration*/
ul#nav a:link{
color:#000066;
display:block;
height:12px;}
ul#nav a:visited{
color:#000066;}
ul#nav a:active{
color:#000066;}
ul#nav a:hover{
text-decoration:none;
color:#0066CC;}

/*Vert Menu - Search Box*/
.search{
background: url(images/searchbox.gif) no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
width:171px;
float:left;
clear:right;
padding:3px 0px 0px 5px;
margin:2px 0px 3px 0px;
height:21px;
border:none;
overflow:hidden;}

/*Vert Menu - Search Button*/
input.search{
width:20px;
height:22px;
padding:3px;
margin:5px 0px 3px 0px;
float:left;
clear:right;
background:url(images/searchbutton.png) no-repeat;}

I also have an issue if I modify it as below as well:

#left{
width:269px;
float:left;
clear:left;
padding:0px 0px 5px 20px;
margin:0px;
text-align:left;
}

/*Left Vertical Menu Styling*/
ul#nav{
width:250px;
margin:0px;
padding-left:7px;}

/*Vert Menu - Category Styling*/
ul#nav li{
list-style:none;
background:url(leftbutton.png) top left no-repeat;
color:#003366;
display:inline-block;
/* height:21px; */
padding:0px 15px;
width:240px;
margin: 5px 0px 5px 0px;}


/*Vert Menu - Style for Arrow on Button*/
ul#nav .arrow{
background:url(images/leftbuttonarrow.png) left no-repeat;}

/*Vert Menu - Removes unnecessary padding from top button*/
ul#nav .top{
margin-top:0px;}

/*Vert Menu - Gives space between button and links*/
ul#nav li ul {
display:inline-block;
margin-top:10px;}

/*Vert Menu - Styles Links & Content*/
ul#nav li ul li{
list-style:none;
width:200px;
background:none;
padding:1px 0px;
margin:0px;
/*height:13px;*/
/*margin-left:-25px;*/
color:#003366;}

I am feeling very frustrated. This should be a simple thing to style. It's a very basic unordered list and I'm not including a dropdown function or any Javascript. I just am not sure what I'm doing wrong here.

My goal is for the list to appear as shown in the image below in IE & FF2, which it does in FF3 with the CSS I included in my first post of this thread:



I really appreciate your help.

Thanks

Kristin

[kristingish]

Any ideas?

[kristingish]

I have validated the HTML in this page through W3.org as XHTML 1.0 Strict. The HTML is all valid.

The CSS does not validate as it shows that my default link color and body background color are the same, which is ok because I need it that way.

No problems reported in relation to this unordered list on the left side and I'm completely stuck. Any help is very greatly appreciated.

[kristingish]

Please anyone