Sidebar & List width 1

[skiflyer]

So I have a sidebar navigation system working of nested
unordered lists.

I've put the whole thing in a div and set the width of that div. Then I've set list-style-type: none because I don't want the bullets. That leaves my navigation shifted about 30 pixels to the right inside my div so I use a relative position to shift it left 30 pixels.

This whole process leaves the total div the right width, and puts the left side of my navigation where I want it, but it leaves 30 pixels of dead color in my div, causing my links to wrap way too early and often.

If I set my width in list tag instead I end up with the same problem. Is there a way to reclaim these 30 pixels for my list without modifying the width of the DIV?

I imagine I could set an absolute for the div and the list and set everything just so... but that defeats my purpose of being able to move things around naturally.

Obviouslly there's plenty more code, but I believe this covers the issues at hand, let me know if not.

#sideNav {
	position : absolute;
	width : 170px; 
	background: #CCC; 
	margin-top: 5px;
	font-size: 80%;
	left : 10px;

	padding-bottom: 125px;
	padding-top: 5px;
	border-right: 2px solid #000000;
	border-bottom : 2px solid #000;
	border-top:1px solid #000;
	border-left:1px solid #000;


}

ul#persistentNav
{
	list-style-type: none;
	position : relative;
	left : -30px; 
	
}

<div id=&quot;sideNav&quot;>
<ul id=&quot;persistentNav&quot;>
  <li class=&quot;cat&quot;>Category1
    <ul id=&quot;subNav&quot;>
       <li class=&quot;link&quot;><a class=&quot;nav&quot; href=&quot;...&quot;>Link1</a></li>
    </ul>
and so on
   </li>
and so on
</ul>

 

[skiflyer]

God I hate when I find a solution seconds after posting... it was exactly the code I left out that had the solution, in case anyone else needs to know... I needed to remove my width=170px from the div, then put width: 140px in both the persistentNav and the subNav portions.

ul#persistentNav
{
	list-style-type: none;
	position : relative;
	width: 140px; 
	left : -30px; 
	
}

 

[skiflyer]

Ok, I spoke to soon, that solves it in real browsers, but Internet Explorer really botches it... any advice?

 

[Vragabond]

You're messing with the wrong property. I can't test this now but you would probably want to change the padding-left of your list. All lists apply padding-left of around 40px to generate the indentation effect. If you do not want that indent, just add

padding-left: 0px;

to your ul#persistentNav declaration. Hope it helps.

 

[skiflyer]

That works great in Firefox... but IE just pushes it that many pixels to the right. God I hate that browser.

 

[Vragabond]

Sorry, it's been a while since I've done that. Try:

ul#persistentNav
{
    list-style-type: none;
    margin: 0px;
    padding-left: 0px;
}

That worked for me in IE6.

 

[skiflyer]

You, Vragabond, are very helpful... thanks much, that did the trick!

 

[skiflyer]

Might I add, this makes it work in Opera as well... the other Mozilla only solutions were very unstable (though sometimes worked) in Opera.

 

[Vragabond]

For debugging such things I suggest Mozilla's built-in DOM Inspector. Click on the element and get all the style declarations that apply to that element. Check all of them (not just those you specified) to see what exactly are the defaults for the element. Then just try and reverse the defaults. Happy coding.