Displaying lists correctly in IE - works in Safari/firefox

[joe8232]

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?

 

[davethewave]

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:

#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

 

[joe8232]

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.??

 

[davethewave]

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

 

[angelwatt]

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.

 

[joe8232]

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>....

 

[angelwatt]

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.

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.

margin-left

should become

padding-left

 

[davethewave]

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

semantically speaking, this is a bad practice.
instead of adding the image in the css, i would suggest you to have something like

  <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

 

[SrWebDeveloper]

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

 

[davethewave]

Out of curiosity, why?

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

<ul><li>***</li></ul> <ul><li>***</li></ul> <ul><li>***</li></ul> <ul><li>***</li></ul>

bye
DV