Grow your CSS skills. Land your dream job.

SOLVED – - having a problem with ul, li & CSS

  • # December 19, 2008 at 2:38 pm

    Hey everyone,

    I want to move only the bullets that are nested within another list. I want them to move more to the left so less of an indentation, however in some browsers they are just normal indentation (which I want smaller) in others (ie8) it works.

    ok here is the test code forgive the indentation if it is not correct it is just stole direct from my editor.

    Code:


    • Testing – 1
    • Testing – 1.2
    • Testing – 1.3
  • Testing – 2
  • Testing – 3

it works ok, but not perfect, I have tested with the ul within an li e.g:

Code:
  • test 1 //not closing the li tag here
    • test 1.1

seems to work better for some reason

the problem I have is I want to adapt this to a site I have made, as I need to add in new links which have a hierarchy and I have developed the site so, that code is broken down into snippets of html code but saved as php but it does not lessen the indentation.

here is my CSS for the un-ordered lists including the nested ones from the site.

Code:
li
{
display:list-item;
color:#3c4a55;
margin-left:-23px; //sits perfectly as I want on the site
line-height:1.5em;
}

.inside
{
margin-left:-25px; //does nothing in browsers but IE8
}

some html of the sidebar but links and text hidden but structure same

what am I doing wrong?

# December 20, 2008 at 3:46 am

ok, now changing the nested ul to have the inside class, works perfect in all browsers except IE.

IE forces the list items to go further to the left.

how to fix? can anyone shed light? or how can I force IE to work on different code?

EDIT: here is 2 images of the side bar. 1 is IE8 the other is FF but safari, opera & chrome looks the same as FF
[img]http://www.honeycomb-web.co.uk/images/1.jpg[/img]
[img]http://www.honeycomb-web.co.uk/images/2.jpg[/img]

# December 20, 2008 at 6:20 am

I eventually got them all to work.

I had to start from fresh, and I had to make sure that nested ul was within a list item.

problem solved, but will take ages to fully fix.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".