I’ve created inline lists time and again but for some reason I’m choking on this one. If you look at the CSS on this page <http://anoptic.com/demo/inline_block/index.html> I coded a list and set the “a” link style to
display: block
and the ul li style to
display: inline-block
With the exception of Safari the menu is a stacked mess in several browsers (Camino and IE etc.). I must be overlooking the obvious with regard to the display attribute but I can’t for the life of me get it to work.
Todd
You know, Todd - the problem here isn’t jumping out at me. It looked fine to me in Win IE7… in IE6 it’s as if the CSS code in the header is ignored. In Safari it’s a gem but in FireFox Mac there was some space below the ul although was still inline. I can only assume you’ve tweaked it some since first posting this. I see that “display:inline-block” is now just “display:inline” which is good. IE6 may be thrown off by the unique way you’re identifying id’s in your style code. The easiest and most universal method for indicating the id selector is # – so instead of brackets… targettag[id=“suchnsuch”] you’d have targettag#suchnsuch.
It’s a slick looking menu btw. The image replacement technique you’re using seem to degrade nicely in the broken IE6 version.
On Sat, Apr 5, 2008 at 3:35 PM, Todd wrote:
I’ve created inline lists time and again but for some reason I’m choking on this one. If you look at the CSS on this page <http://anoptic.com/demo/inline_block/index.html> I coded a list and set the “a” link style to
display: block
and the ul li style to
display: inline-block
With the exception of Safari the menu is a stacked mess in several browsers (Camino and IE etc.). I must be overlooking the obvious with regard to the display attribute but I can’t for the life of me get it to work.
–
Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/
Hi Ernie,
You’re right, I have indeed tweaked it a bit though I still need to try Walter’s most recent suggestion about splitting the dimensions between the a and li. Yeah, IE6 is a real mess with this list. Normally my inline lists are fine in 6 but I approached this one differently and I’m paying for it now. Also, FWIW, my IE6 conditional stylesheet hasn’t been updated to reflect the most recent changes so that may also be a problem.
I’ll try your suggestion about the id, I forgot why I chose the current method in the first place, I just started typing and away I went. ; )
Thanks for looking and if you have any more ideas let me know.
Todd
On Apr 7, 2008, at 1:57 PM, Ernie Simpson wrote:
You know, Todd - the problem here isn’t jumping out at me. It looked fine to me in Win IE7… in IE6 it’s as if the CSS code in the header is ignored. In Safari it’s a gem but in FireFox Mac there was some space below the ul although was still inline. I can only assume you’ve tweaked it some since first posting this. I see that “display:inline-block” is now just “display:inline” which is good. IE6 may be thrown off by the unique way you’re identifying id’s in your style code. The easiest and most universal method for indicating the id selector is # – so instead of brackets… targettag[id=“suchnsuch”] you’d have targettag#suchnsuch.
It’s a slick looking menu btw. The image replacement technique you’re using seem to degrade nicely in the broken IE6 version.