IE Not Showing Custom Bullet Image

Hi, we’re almost done with a site, but just have a couple nagging issues that I can’t figure out. The site is a Joomla site if that makes any difference.

The problem is that my custom bullet image for the sub-navigation links is not working in IE (I checked v.6 & v.7). Works fine in FF (Mac & PC), Safari, Chrome.

You can view on the page below. Look in FF to see the little right arrow symbol ( > ) that is used for the bullet to show what page you are on in the right side sub-navigation. You’ll see the icon for the page you land on, but you will also see a second-level navigation item underneath that works just the same.

Here’s a sample page: Sample Page

I’m using pretty simple margin & padding, and a background image. I tried swapping margin & padding, but this didn’t help. I do call up an IE-specific style sheet for a couple issues, but it is not affecting this (I tried disabling this style sheet with no help).

I’m sure it’s something simple I’ve missed. THANKS!

OK, sorry. I just figured it out.

Turned my thinking ‘upside down’ a bit and used a top margin on the list items instead of a bottom margin. In most cases this would cause the opposite problem between the top of the list and the preceding heading, but in this case I lucked out as the margin between the heading & list was already greater than what I’m applying here.

As there are so many different ways to accomplish the same basic result with CSS, it’s incredibly challenging to know the ‘best’ way to do things! How exactly does one find the ‘best’ or ‘most proper’ ways to accomplish a task such as this? The book I read, and most informative sites I read, give the basic concepts and theories, but again - there are just soo many ways to skin the same cat with CSS!

Thanks again for the tip on the hasLayout, though!

Thanks again for the tips! I did end up removing the XML declaration at the top of the document.

So lists are tough! I’ve always struggled with providing a margin to control the space between the list items, but what to do with the final bottom margin that is on the last item and how it affects what comes after it. I wish there was an easy way to apply the margin to all BUT the last item in a list (I suppose that’s what margin collapsing is SUPPOSED to do).

#right ul.categorySubmenu li#current{margin-bottom:0}

Unfortunately, if I add this code, then it removes the margin that is needed for selected (#current) list items that do not have second-level navigation lists below them (which is most).

There’s also the issue that in a couple places, there is more than one second-level list item. You can see that on this page.

Any other ideas how I can overcome this IE issue? It was only introduced when I added the ‘hasLayout’ hacks.

THANKS! I’ve spent most of my efforts ‘trying’ to learn how to style things properly (which is complex enough). I haven’t had a lot of time to spend learning all the various IE hacks yet.

Thanks for the reply! The XML declaration is part of the template the site uses, so I’d rather not change it if I don’t fully understand all ramifications. That being said, I did try temporarily removing it, but it didn’t help anything here.

So I added the ‘hasLayout’ fix as described, and that did cause the images to be seen! The only problem now, though, is that there is extra space now added under the second-level navigation list item. If that can be fixed, I think we’re good.

And I do have IE specific style sheets (one for IE 6, one for IE7) with just a couple fixes in them currently. So if this is good, I’ll probably move the declarations to these style sheets. Maybe if you could point out what is IE6 or IE7 specific, I can move them over correctly.

Thanks again!

First thing to try is to remove the xml declaration from above the doctype as this will trip quirks mode in IE and use the broken box model among other bad things. It’s optional anyway and can safely be removed.


[B]<?xml version="1.0" encoding="utf-8"?>[/B]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Make sure that the doctype is always the first thing on the page and don’t put anything above it (including comments).

If that doesn’t work then the next thing is to give the list element “haslayout”.

re.g.


 ul.categorySubmenu li{min-height:0}
* html  ul.categorySubmenu li{height:1&#37;;overflow:visible}

If that doesn’t work the I’ll take another look later.

Hi,

I wish there was an easy way to apply the margin to all BUT the last item in a list

Well :last-child would have solved that but it’s not that supported in IE8 and under. You could reverse the margins and use :first-child on the first element instead which is supported from IE7 (but is still a little buggy).

Margin collapse should have solved the issues with double margins on the lists but because we had to trigger haslayout then IE stopped collapsing the margins (a side-effect much in the same way that overflow other than visible would do).

Lists are just the same as other elements (apart from whitespace bugs) but when dealing with nested lists it gets complicated because all rules cascade into the inner elements and you just have to be logical in your approach

The beauty and at the same time the difficulty of css is that there are many ways to achieve the same thing but often there is only one right way. A lot of this is learned from experience but a lot of it does depend on understanding the rules correctly in the first place and not assuming that things should happen just like that :slight_smile:

Css isn’t difficult compared to other programming languages but it does have certain rules and certain properties will behave differently depending on circumstance. (e.g. margin-collapse, float clearing, overflow).

The best approach is to try and understand why something happens when it goes wrong and then you learn out about how things are supposed to work - which is what you are doing now :slight_smile:

Hi,

The gap is because you have two bottom margins being applied in IE.

The 15px bottom margin on the list that holds the nested ul and the 15px bottom margin on the last list element in that nested list. Other browsers collapse the margin but ie doesn’t.

Therefore you will have to address it specifically.


#right ul.categorySubmenu li#current{margin-bottom:0}

The rule with the “* html” at the start is for IE6 and the min-height rule is for IE7 but will do no harm if left in place.

If you don’t remove the xml declaration then anywhere that you have added padding/borders and a width then IE6 will be wrong as it uses the broken box model in quirks mode. This means that padding and borders are subtracted from the width rather than being added to it. Also in quirks mode IE6 doesn’t understand auto margins and won’t center elements unless you use other hacks. Effectively it turns IE6 into more like ie5 (although not an exact copy) .