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. 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. >> Also, to start a new thread, do not reply to an existing message. When >> you do this, >> your message gets threaded on to the old thread, which messes up the >> archives >> > > Interesting... I did hit reply-all to something but only because I'm > lazy and didn't want > to type css-d.... I did change the subject and To: headers to that > of a new message > but you're telling me there is some hidden header that gets brought over? > that > eudora didn't bother to display? Software is just getting too clever > these days.... > Yep, Thunderbird was not tricked. :-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ 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/
