2 replies [Last post]
GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 6 years 43 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

what's up CSS Creators!

I'm having some problems getting the image bullets in my list to line up correctly when the text in a list item wraps. i'll include the xhtml & css, as well as link to a live example.

Specifically, while some of the current list items are only one line of text - others wrap to 3 lines of text.

when that happens, the image bullets line up on the second line of wrapped text. obviously, i want the image bullet to ALWAYS align with the 1st line of text regardless of whether the text in the list item wraps or not. what am i doing wrong?

here's the CSS i'm using:

div#content ul { font-size: .8em; margin: 0 2em 2em 2em; padding: 0; list-style: none; } div#content ul li { margin: 2px 0 6px 0; padding: 0 0 0 25px; line-height: 1.5em; background-repeat: no-repeat; background-position: 0 50%; } .arrow { background-image:url(../images/arrow.gif); } /* icon */

here's the XHTML:


  • Bachelor’s of Science, Majoring in Nutritional Sciences (pre-med)

  • 4 years Canadian College of Naturopathic Medicine, 1500 hours, board exams

  • Certified Advanced Bowen Therapist – Trained and completed all modules including advanced level, with Dr. Manon Bolliger and the creators of Bowtech, Ossie and Elaine Rentch

  • Board Certified Acupuncture

  • Board Certified Intra-Venous therapies

  • Outside the clinic setting, Dr. Dhiman is often found doing larger setting seminars around town, writing articles, lunch and learn business sessions, and on occasional gluten-free cooking classes


here's the current link:
http://70.87.128.242/~drneetu/about.php

this site is still under heavy construction... permanent link *will be* drneetu.com/about.php

i *think* i originally got the CSS from simplebits.com.. but i'm not sure.

anyhow, i'm hoping one of you CSS Masters can help me out! thanks!

brendan, fresh-off.com

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

This is the reason

This is the reason why:
div#content ul li {
margin: 2px 0 6px 0;
padding: 0 0 0 25px;
line-height: 1.5em;
background-repeat: no-repeat;
background-position: 0 50%;
}
Change it to something like 4px;

GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 6 years 43 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

THANKS!

thanks a lot wolfcry911!! :thumbsup: