Displaying lists correctly in IE - works in Safari/firefox

Discussion in 'Web Design and Development' started by joe8232, Nov 10, 2008.

  1. joe8232 macrumors regular

    Joined:
    Jun 21, 2005
    #1
    Hi all,

    I'm having some problems with a new website I'm creating. I have created a list for navigation and have set each element a different class so that it can have a different list-style-image but for some reason these don't show up in IE. Here is the website: www.st-and.ac.uk/~jl386/quantum the css is:
    #nav ul {
    padding:0;
    margin-left:70px;
    }
    #nav li {
    float:left;
    margin-left:25px;
    margin-bottom:10px;
    padding-right:30px;
    padding-bottom:2px;
    list-style-position: outside;
    font-size:13px;
    text-align:left;
    }
    li.element1 {
    list-style-image:url(list/1.jpg);
    }

    where there is a different element2, element3 ... and then for the main code I have <ul><li class="element1"><a href="index.php">Home Page</a></li> and so on.

    Any ideas?
     
  2. davethewave macrumors member

    Joined:
    Jul 30, 2007
    Location:
    Trieste, Italy
    #2
    this time, IE is right.
    the code you post lacks of specificity (see in exemple http://htmldog.com/guides/cssadvanced/specificity/)

    in this case you would like to use this kind of selectors:
    Code:
    #nav ul { 
               padding:0;
    	margin-left:70px;
    }
    #nav ul li { 
               float:left;
    	margin-left:25px;
    	margin-bottom:10px;
    	padding-right:30px;
    	padding-bottom:2px;	
    	list-style-position: outside;
    	font-size:13px;
    	text-align:left;
    }
    #nav ul li.element1 {
    	list-style-image:url(list/1.jpg);
    }
    #nav ul li.element2 {
    	list-style-image:url(list/2.jpg);
    }
    #nav ul li.element3 {
    	list-style-image:url(list/3.jpg);
    }
    
    and so on.
    bye
    DV
     
  3. joe8232 thread starter macrumors regular

    Joined:
    Jun 21, 2005
    #3
    Hi Dave, thanks for writing back so quickly. I've tried adding #nav ul to each of the elements yet it still isn't displaying properly. Do I need to change anything in the actual html as well besides having class="element1" etc.??
     
  4. davethewave macrumors member

    Joined:
    Jul 30, 2007
    Location:
    Trieste, Italy
    #4
    mmmh... I'm stuck.
    I can't spot any error. beside of specificity of the selectors, all of the code seems good... :(
    later I will retry...
    bye DV
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    According to a few threads I found, IE has problems with the list-style-image when the element if also floated, like you have. Rather than floating, you should use display:inline to get the effect you want. There's tutorials on doing a horizontal navigation with CSS if you search for them.
     
  6. joe8232 thread starter macrumors regular

    Joined:
    Jun 21, 2005
    #6
    Argh this is very annoying. By taking out the float:left I get a vertical list with the images displayed correctly in both IE and Safari but when I add display:inline I get a horizontal list with no images in both safari and IE.

    EDIT: i've gotten round the problem by just using a new list for each element ie <ul><li></li></ul><ul>....
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    You may have to play with the paddings some. When a element is inline the margin styles no longer apply. An alternative to using the list-style-image is to use a background image that you place at the left of the list item. You can try this if you continue to have trouble with the list item style. I've done ways before so I know both are possible.

    Code:
    margin-left
    should become
    Code:
    padding-left
     
  8. davethewave macrumors member

    Joined:
    Jul 30, 2007
    Location:
    Trieste, Italy
    #8
    semantically speaking, this is a bad practice.
    instead of adding the image in the css, i would suggest you to have something like
    Code:
      <ul>
         <li><img src="img1.png" .../><a href="link1">link 1 </a></li>
         <li><img src="img2.png" .../><a href="link2">link 2 </a></li>
         <li><img src="img3.png" .../><a href="link3">link 3 </a></li>    
      </ul>
    
    with the images in the html and not in the css.
    bye
    DV
     
  9. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    Out of curiosity, why?

    Images are considered content, and one of the most basic best practices is to separate content from style. Knowing that referencing the image as a background image, making it into a hyperlink, setting its size, alignment and all cosmetic attributes can all be set very, very easily via standard CSS, what is the distinct advantage in doing it the way you outlined?

    In a nutshell, I do my best to always do something via CSS if I can, first. There are exceptions due to browser incompatibilities and known CSS problems, but this example is not one of those situations.

    Please do not take this as confrontational - I really am asking! :)


    -jim
     
  10. davethewave macrumors member

    Joined:
    Jul 30, 2007
    Location:
    Trieste, Italy
    #10
    it is a workaround =)
    you're right SrWebDeveloper, as I said before, this solution too is not semantically correct.
    i liked this one better than incorporate a lot of
    Code:
    <ul><li>***</li></ul> <ul><li>***</li></ul> <ul><li>***</li></ul> <ul><li>***</li></ul>
    bye ;)
    DV
     

Share This Page