I intended for the original post to be on the Dynamo list but I made a mistake so this is a continuation of that thread.
I’ve made a small bit of progress. Essentially I need to mimic the CSS Apple uses for the menu bar. In my example, for the graphic buttons to appear as intended on this page <http://anoptic.com/demo/inline_block/index.html> the “a” link needs to be set to { display: block } to ensure the graphic is displayed in full (100x20) but the problem is that it overrides the ul[id=‘global_menu’] li { display: inline } which normally would lay the list out horizontally so I have to use inline-block instead. While this works in Safari it breaks in everything else and the list ends up a vertical stack instead of horizontal.
If I remove the display: block from the “a” style and instead use padding to expose the image I can get the horizontal list but I also get uneven spacing between the graphics which is why I wanted to use “block” along with a defined width and height.
I can’t believe I’m struggling with this, I’m sure it’s a simple fix but what am I overlooking?
Try making the address display:block, but set a fixed size on the
next container up, in this case, the LI. If you set a fixed dimension
on the LI, then you can still have a block A inside it, and the
dimensions will stay the same.
Walter
On Apr 6, 2008, at 2:39 PM, Todd wrote:
I intended for the original post to be on the Dynamo list but I
made a mistake so this is a continuation of that thread.
I’ve made a small bit of progress. Essentially I need to mimic the
CSS Apple uses for the menu bar. In my example, for the graphic
buttons to appear as intended on this page <http://anoptic.com/demo/
inline_block/index.html> the “a” link needs to be set to { display:
block } to ensure the graphic is displayed in full (100x20) but the
problem is that it overrides the ul[id=‘global_menu’] li { display:
inline } which normally would lay the list out horizontally so I
have to use inline-block instead. While this works in Safari it
breaks in everything else and the list ends up a vertical stack
instead of horizontal.
If I remove the display: block from the “a” style and instead use
padding to expose the image I can get the horizontal list but I
also get uneven spacing between the graphics which is why I wanted
to use “block” along with a defined width and height.
I can’t believe I’m struggling with this, I’m sure it’s a simple
fix but what am I overlooking?
I tried this earlier and while it solves the dimension aspect when I
change the ul li style from “inline-block” to just “inline” the list
still will not display inline in most browsers.
Todd
On Apr 6, 2008, at 6:07 PM, Walter Lee Davis wrote:
Try making the address display:block, but set a fixed size on the
next container up, in this case, the LI. If you set a fixed dimension
on the LI, then you can still have a block A inside it, and the
dimensions will stay the same.
Walter
On Apr 6, 2008, at 2:39 PM, Todd wrote:
on this page http://anoptic.com/demo/inline_block/index.html the
“a” link is set to { display:
block } to ensure the graphic is displayed in full (100x20) but the
problem is that it overrides the ul[id=‘global_menu’] li { display:
inline } which normally would lay the list out horizontally so I
have to use inline-block instead. While this works in Safari it
breaks in everything else and the list ends up a vertical stack
instead of horizontal.
If I remove the display: block from the “a” style and instead use
padding to expose the image I can get the horizontal list but I
also get uneven spacing between the graphics which is why I wanted
to use “block” along with a defined width and height.
I tried this earlier and while it solves the dimension aspect when I
change the ul li style from “inline-block” to just “inline” the list
still will not display inline in most browsers.
Todd
On Apr 6, 2008, at 6:07 PM, Walter Lee Davis wrote:
Try making the address display:block, but set a fixed size on the
next container up, in this case, the LI. If you set a fixed dimension
on the LI, then you can still have a block A inside it, and the
dimensions will stay the same.
Walter
On Apr 6, 2008, at 2:39 PM, Todd wrote:
on this page http://anoptic.com/demo/inline_block/index.html the
“a” link is set to { display:
block } to ensure the graphic is displayed in full (100x20) but the
problem is that it overrides the ul[id=‘global_menu’] li { display:
inline } which normally would lay the list out horizontally so I
have to use inline-block instead. While this works in Safari it
breaks in everything else and the list ends up a vertical stack
instead of horizontal.
If I remove the display: block from the “a” style and instead use
padding to expose the image I can get the horizontal list but I
also get uneven spacing between the graphics which is why I wanted
to use “block” along with a defined width and height.
Thanks for the reminder, I was trying to think of other examples I had seen but was coming up blank. Perhaps they have a better solution than mine. In any event I finally remembered what I was missing (sheeesh) and that was floating the “a” style which remedied the problems and the list now displays horizontally in most browsers (not IE6).
Todd
On Apr 7, 2008, at 7:33 AM, Walter Lee Davis wrote:
Have you looked at the code created by List-a-matic[1]? They have
some horizontal ULs there that seem to work well cross-browser.
In any event I finally remembered what I was missing
(sheeesh) and that was floating the “a” style which remedied the
problems and the list now displays horizontally in most browsers (not
IE6).
Todd
To get IE 6 to stop acting its age, try using one element to set the width, and another to set the height. For example, set the padding that creates the height only on the A, and set the padding that creates the width only on the LI, but use an equal and negative margin on the left and right of the A to pull the color box out to meet the edges of the LI.
#mylist li a { float: left; padding: 4px 0; height: 12px; margin: 0 -4px; }
#mylist li { float: left; padding: 0 4px; margin:0; }
That’s off the top of my head, but I know I have solved IE6 issues in this sort of manner before. If this is not the correct order of things, then try reversing the instructions, and pushing and pulling the padding in the opposite directions.