CSS and Unordered Lists

  • Thread starter skip0110
  • 3 comments
  • 370 views
5,178
United States
Worcester, MA
skip0110
I'm having an issue with CSS and unordered lists.

The site is : http://people.bu.edu/nkundu/indexsmall.html

Towards the end of the page, you see bulleted list under the header "Independent Work". I'd like this list to line up with the other tabbed-in text better. Ideally, the left edge of the bullets should line of with the other indented text, but I'd settle for the list item text lining up and the bullets hanging off the edge.

Code:
ul
   {
   list-style-position: outside;
   list-style-type: square;
   }
What else do I need in there?
Thanks in advance for any help :)
 
Can I make a suggestion on the HTML? The format of your Work Experience section really lends itself to definition-list use.

Anyway, all you have to do to rectify the bulleted list problem is to re-work the left-hand padding on the bulleted list. So, for hanging bullets (which, even though you've said that that's not the most desirable solution, it's actually the most typographically correct), you'd add:
Code:
.details ul
   {
   padding-left: 0;
   }
Just play with the number to get whatever you want.
 
Sage
Can I make a suggestion on the HTML? The format of your Work Experience section really lends itself to definition-list use.
Right now I'm just focused on making it look the way I want, but I'll tag them that way in the inevitable revision 2.

Anyway, all you have to do to rectify the bulleted list problem is to re-work the left-hand padding on the bulleted list. So, for hanging bullets (which, even though you've said that that's not the most desirable solution, it's actually the most typographically correct), you'd add:
Code:
.details ul
   {
   padding-left: 0;
   }
Just play with the number to get whatever you want.
Worked perfectly :) Thanks so much Sage 👍
 
Back