Many thanks for the solution Ingo. I tried using inline-block before, but I think it only worked in Opera, so your solution is very welcome.
There is one slight glitch (which may be due to my incorrect implementation of your solution). When I first view the page in Firefox (2.0.0.1 on Linux) it displays the row as a column. Hitting refresh fixes it. To reproduce it just restart Firefox. I've posted my implementation of your solution here: http://endlessvoid.com/test_css/test3.html Yasir > Yasir Assam wrote: > >> Hello, >> >> I'm trying to create a horizontal menu where each menu item is an image >> with a centred caption below it. I'd like the whole menu to be centred >> within its containing element (which itself is an absolutely position >> element). >> >> Here's the test page: >> http://endlessvoid.com/test_css/test2.html >> >> I can't seem to centre the menu without explicitly setting a width >> (which I'd rather not do). >> >> Here's what it looks like when it's centred: >> http://endlessvoid.com/test_css/test1.html >> >> I've drawn borders around some of the divs to help me see what I'm doing. >> >> If anyone can help me do this without explicitly setting the menu width >> I'd be very grateful. I have total control over the generated HTML so I >> can change it if needs be. >> >> This needs to work across all the major browsers. >> >> > Without a width, display:block will take all the space available. > > You'll need a shrink-to-fit/shrink-wrap behavior for the wrapper. > > This can be achieved by display:table and display:inline-block (float > would shrink, but not center). > > Unfortunately, the 'major browsers' do not support them adequately, so a > bit of hacking is needed: the IE-family needs inline-block, others need > a css table. > > #menu_container {display:table;} > #menu_row{display:table-row;} > > Note this new element #menu_row, Gecko needs it because of timing issues > (a child coming too late would be placed in a new anonymous row), so we > explicitely declare a table-row. > > <div id="menu_container"> > <div id="menu_row"> > <div class="menupic"> > ... > > Hacking is done via a conditional comment for IE/Win in the end of the > head section. > > <!--[if IE]> > <style> > > #bottom{ > /* centers the inline-block #menu_container */ > text-align: center; > > /* must not 'inherit' the width in IE6, overwrites your code */ > width: 100%; > } > > #menu_container { > /* applies haslayout to an inline level element: results in inline-block > behavior */ > > display:inline; > zoom: 1; > } > > </style> > <![endif]--> > > > IE-Mac may have its own solution, but my ambitions are low these days, > see [1] and following for ideas. > > Ingo > > > [1] http://www.brunildo.org/test/shrink_img2.html > > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
