At 15:16 -0500 2/2/07, Zoe M. Gillenwater wrote: >Douglas Fraser wrote: >> At 11:24 -0500 2/2/07, Zoe M. Gillenwater wrote: >> >>> Douglas Fraser wrote: >>> >>>> I have a set of the links the client wants displayed in a grid >>>> format. Using a table is the obvious solution, even if it's not "the >>>> correct thing to do" presentation wise. The issue is that they want >>>> the text of the links to turn bold as the mouse hovers over them. >>>> Ok, that's all fine, but the problem is the table cell gets resized >>>> width-wise and so the other columns shift around. That looks bad.... >>>> >>>> Browsers don't do dynamic padding / margins, table cells can't take a >>>> max-width.... Using a table does not look like the right thing to >>>> do. I can make this grid using all divs - using all divs solves the >>>> problem of things shifting around - and positioning them nicely with >>>> PHP based logic (using the less supported display: properties is not >>>> an option (IE...)) but the problem is the width of the text / # of >>>> characters in a link is all different, so I can not easily make the >>>> columns to be spaced out nicely like when a table is used. >>>> >>>> I could write some javascript to get the browser to calculate the >>>> ultimate max width of a column and thus shift things around on page >>>> load to space out columns in a regular fashion, but if there is an >>>> easier way... I have not tried table-layout:fixed yet, but I >>>> suspect that won't help as the client would like no forced breaks in >>>> the text (e.g. this-is-a-really-long-link not get broken in the >>>> middle due to a fixed width column). And the number of columns may >>>> differ from page to page... And would table-layout prevent the >>>> cell/table from getting redrawn / expanded anyways? >>>> >>>> >> >> Access to the real page is controlled, but I went and made a >>static page that >> does not have working links, but you can see the effect I'm (not) >> after. Just hover >> over the director names >> >> http://www.acmefilmworks.com/menus.html >> > >I agree with Sophie -- you either need to set a width or stop bold on >hover. The design is super tight as it is. It's not going to stand up to >text resizing anyway, so you might as well set fixed widths for each of >the columns.
the client now wants to fiddle with fonts and the like, probably go smaller, so that is going to help things. some columns will be needlessly wide I fear if width is set... so it looks like no bolding or pay me to write some javascript... >Another thing you could play around with, but which probably wouldn't >end up being robust enough, would be to use letter-spacing to space out >the letters a little bit when not hovered in order to create space for >the bolding. Then, when you hover, take the letter-spacing back down to >zero. It might work, but probably not well enough to stop all text bumps. I did try that, forgot to mention it, but the results did not look so great sometimes and the client is very detail oriented.... thanks again! doug ______________________________________________________________________ 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/
