Bullets in List Items hidden by left floated navbar

Is there a better cross-browser fix to show the bullets?

[Wizcrafts]

I originally posted this to the stylesheets NG, but nobody offered any help there.

This problem applies to both IE 6, current version, and Firefox 0.8 browsers,
which I am using for my testing, on a Windows 2000 computer.
My html and css codes are listed at the bottom of this post.

I have a design in progress that uses a relatively positioned, left-floated,
122px wide navbar, with the main content padded to the right by 10px,
wrapping under after it exceeds the height of the navbar. Everything looks
fine, except when it comes to ordered and unordered list items. The bullet
dots, or decimal numbers are hidden inside the navbar, by approximately
5px. I have managed to push them back into the content area by applying
this inline style to the UL and OL tags: <ul style="margin-left:70px;
padding-left:70px">. This pushes the bullets into the main content area by
about 12 px from the edge of the navbar. Is this the correct fix, or is
there a better method?

I even tried wrapping the lists inside a blockquote, to no avail;
the blockquote was not indented either.
I can get the lists to display normally if I add a
<div style="clear:left"> or <br clear="left">, before the list starts, but
this defeats the design by dropping the lists entirely under the navbar.

I notice that with this fix the list items that should wrap under the navbar
do not, but are offset about 132px to the right, all the way to their end,
whereas paragraphs and headings float to the left edge.
If I remove the margin and padding the list items that have passed the
navbar do go close to the left edge of the body.
This tells me that list items are being positioned relative to the left edge
of the html and body, rather that the containing (main) DIV. Is this correct?
Is there a workaround to make lists behave like other floated block items?

While I am willing to post URLs to the pages it is against TOS, therefore,
here are relevant code snippits ...

Basic layout code:

 
<div id=header>
 Top-of-page header with logo, search and banner areas
</div>
<div id=container><!-- wrapper for 3 columns of content page -->
 <div id=sidebar>
 the left-floated nav-bar with all links 
 </div>
 <div id=affils>
 text ads go here, in right floated 140px wide ad-bar
 </div>
 
 <div id=main>
 main content, including list items, goes here, 
 floating between sidebar and adbar
 </div>
</div><!-- End Container Div -->
<div id=footer>
 page bottom links and address
</div>
<!-- Here are the applicable css rules: -->
html, body {position:relative; width:100%; height:100%; margin:0; padding:0; font-family:arial,helvetica,sans-serif; color:black; background-color:white;}
#header {position:relative; top:0; left:0; width:100%; height:86px; background-color:#FFF; border-bottom:1px solid black; overflow:hidden}
#container {position:relative; width:100%; height:100%}
#sidebar {float:left; padding:0px; background-color:#0000CD; width:122px; margin-right:5px;}
#main {border:1px solid #fff; padding:0 5px;}
#affils {margin-left:5px; margin-bottom:0; float:right; background#F0F8FF; border:1px solid black; z-index:3; width:150px}
#footer {clear:both; padding:5px; border-top:1px solid black}
<!-- End CSS -->
The list codes are both single item and lists within lists; 
<ul>
 <li> single item </li>
 <li>
 <ul>
 <li> multi-items embedded </li>
 <li> ... </li>
 </ul>
 </li>
 <li> ... </li>
</ul>
The above clean html code causes the bullets to be 
hidden inside the right edge of the left sidebar.
 
This is my fix to display the bullets:
<ul style="margin-left:70px; padding-left:70px;">

Thanks in advance, Wiz

[iamlost]

I have not yet tested your code.

Quick query: have you tried:

<ul style="list-style-position: inside">

and what dif did it make?

[Wizcrafts]

IamLost asked:

Quick query: have you tried:
<ul style="list-style-position: inside">

and what dif did it make?

I have and still am trying that. The first result of position-inside is that all the main bullets reappear, along the original left edge of the main content section. If they were stand-alone list items that would be my solution. However, many of the main li's contain one or two levels of nested lists, which are hidden unless asked to be seen. I use the nested list items for deeper explanations of the main topics, in up to two additional levels. If I simply use

ul li {list-style-position:inside}

, all of the bullets are displayed along the same horizontal plane, even the ones two levels deep. This makes for a useless nest. I am experimenting with different margin-left amounts, for the various nests, and the seem to show some promise, but are also offsetting the main li items that flow under the sidebar. And the display in Firefox is hideous!

I really must find a way to make the left sides of a list behave like other block items do. Headings, images, divs and paragraphs all lineup and wrap perfectly. Lists and blockquotes don't.

Still hoping for input...Wiz

[SuzyUK]

Hi Wizcrafts..

#sidebar {float:left; padding:0px; background-color:#0000CD; width:122px; margin-right:5px;}

#main {border:1px solid #fff; padding:0 5px;}

If you left margin the #main div 125px or so (to suit your spacing) that should do it.. the anonymous inline block of text that is wrapping around the float is the text part of the list only the bullets are being handled differently in each browser, and are basically appearing under the float, and explains why the nested list does not indent too..

This will also mean that text in the main div will not wrap below the float, but I don't know if that's a concern or not?

Suzy

[Wizcrafts]

Suzy;
It is important that normal text be allowed to wrap under the floated sidebar, if it exceeds it's height; that's why I floated it. Only my list items misbehave, and only to the degree that the bullets are either hidden, or line up along the same vertical plane when nested. If I un-nest the lists, push the margins out a bit, and just go with a longer, single depth list, I think it will be easier to sort out.

What is not shown here is the fact that I am hiding the nested lists with a javascript and ID="xyz" / display:none, and showing them with ID="xyz" display:block when a "more details" link is clicked. I have been using this method of expanding hidden list items for about 5 years, on my existing website, with no layout issues in any browser. It's only since I started to replace the old frame-based design with CSS-P that the anomalies are popping up.

I have more or less given up trying to make the lists indent normally against a left floated block, and, if my idea of un-nested lists doesn't pan out, I will probably revert to a styled, master table layout, which resolves that problem entirely.

Too bad, I was so close to a totally CSS-P layout! I may get there yet.

Wiz

[SuzyUK]

OK.. so the wrap is a concern

the solution, if you want would then be to dimension the list <ul>. If a specified width (which would be the easiest choice) will cause problems between IE5 and 6 you can hack in height,

/* hide from mac \*/
* html ul#nested {
height: 1%;
}
/* end hide */

<ul id="nested"> 
<li> first level</li> 
<li> 
  <ul> 
  <li> multi-items second level </li> 
  <li> second level </li> 
  </ul> 
</li> 
<li> first level</li> 
</ul>  

else try width 100% on the list, but I'm pretty sure this causes cross IE/float differences hence the height hack..

Suzy

[Wizcrafts]

Suzy, and World;
Here is what I finally had to do to display list item bullets and have nested lists indented, when they follow a left-floated block containing a 122px by whatever height sidebar:

<div id="sidebar">Lots of 122 px wide, tall vertical content, and nav links</div> 
<div id="main"> <!-- wrapper for padding main content --> 
 <h1> Heading </h1> 
 <h4> Intro </h4> 
 <p> Content 
 <p> More content 
 <div class="list"> 
 <ul> 
  <li>First major section ... click for more details (shows hidden section) 
   <ul id="security"> 
    <li>Second level of list items 
     <ul> 
      <li>Third level of list 
      <li>... 
     </ul> 
    </li> 
    <li>... 
    <li>... 
   </ul> 
  </li> 
  <li>Four more nested lists, hidden unless "more details" is clicked 
   <ul> 
    <li>Etc, etc 
   </ul> 
  </li> 
 </ul> 
 </div> 
 <ul>  
  <li>This section has no nests, just first level list items ... 
  <li> ... 
  <li> ... 
 </ul> 
 <p>Advertising content 
  
 <div> Webring banners and Google search box</div> 
</div> <!-- close main div --> 

Here is the relevent CSS for these list items (some code is omitted):

html, body {position:relative; width:100%; height:100%; margin:0; padding:0; font-size:100%}
li {margin-bottom:10px}
ul li {list-style-position:inside}
.list {margin-left:80px}
#sidebar {float:left; padding:0px; width:122px; margin-right:5px}
#main {padding:0 5px}

This seems to work in a satisfactory manner. All bullets are displayed (inside) in the main div area, instead of being hidden in the sidebar. The nested lists indent in staggered stages, as they should. The unadorned list items wrap under the sidebar, if the user expands the hidden nests enough to overflow the floated sidebar height, as I wanted. I also dropped it onto Firefox 0.9 and it looks great!

Wiz