Re: [css-d] Frames or CSS? Dynamic section of page
Robert Tilley wrote: My page has a static top, sides, and bottom. I would like to have a dynamic center which changes according to menu (top of page) selections. The only solution which I understand is to use frames. It would work to reload the entire page with each selection, but avoiding is the main purpose of CSS. With my increasing knowledge of CSS, I'm trying to move away from such hacks and to code according to standards. This does do the job. Replies to this question as to a best solution is much appreciated. i don't know how you envision your menu items working, but divs laid on top of one another in the center that become visible or hidden as need be would be a solution. To make the current center stick even if the mouse moves off the menu item, you'll need a bit of javascript. See http://www.microcinemadvd.com/help/policies/how_to_order.html for something similar to what I think you want (click on the tabs etc) 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/
Re: [css-d] forcing an element to the bottom of a cell?
At 14:32 -1000 23/2/07, david wrote: Douglas Fraser wrote: On http://www.microcinemadvd.com/documentary/, I want to get the BROWSE ENTIRE STORE link (on the left side) to always end up just above the newsletter signup form. But on FF, the link always seems to end up in the middle of the page - on the first display of the page. If the page gets redrawn, the link goes to the bottom. Step one: fix the 346 HTML validation errors: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.microcinemadvd.com%2Fdocumentary%2F in my defense, this is like the 5th incarnation of the website and 200 of those errors aren't mine. Get It Done Now Because There's 23 Other Things to finish This Week is the guiding principle. (excuses, excuses...) So I've fixed 341 and the 5 left are character entities conversion issues I can't do much about as I'm pulling data from the database that is raw text - the people actually entering the text will absolutely refuse to type 39; when they want an apostrophe, so as you can see, fixing the errors did nothing to help the actual problem which my intuition told me so I'm still not fully convinced of the importance of completely validating a page - gross errors, sure but the little things I had to deal with? http://www.microcinemadvd.com if anyone wants to take a look I guess I will have to write some javascript now to auto-refresh the page 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/
Re: [css-d] forcing an element to the bottom of a cell?
At 00:29 +0100 26/2/07, Gunlaug Sørtun wrote: Douglas Fraser wrote: http://www.microcinemadvd.com if anyone wants to take a look Browsers seems to have problems calculating the left column to be 100% tall. A border on the 'height: 99%;' td for left column shows that it only expands as tall as the content pushes it in Safari, Opera and IE/Mac, and they don't change anything on reload. Firefox has similar problems, but seems to be able to calculate a height on reload. All height-values in percentages on nested table / td are of no use when parents lack proper height - as browsers see it, as there's nothing to calculate percentage-heights from. This is a normal problem with heavily nested tables IIRC (it's been a long time). Such heavy nesting may be valid enough, but it isn't making it easy for browsers to render as intended. yes, I understand now... I've tried all sorts of things, but and I don't have the time to make everything table-less. a javascript fix is just quicker (to add padding I think). the problem is the main content area is a variable length and so I can't use a fixed number. thanks 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/
[css-d] forcing an element to the bottom of a cell?
Hi, On http://www.microcinemadvd.com/documentary/, I want to get the BROWSE ENTIRE STORE link (on the left side) to always end up just above the newsletter signup form. But on FF, the link always seems to end up in the middle of the page - on the first display of the page. If the page gets redrawn, the link goes to the bottom. this link is within a table cell and the table cell has vertical-align: bottom etc. the table and the div surrounding that left hand table have height:100% - I presumed that would stretch the table/div to the height of the main area but so what is the trick here? I can not put the link right above the form b/c that wouldn't work with how tables are used to structure the page. or a negative margin perhaps? Safari does not even do the right thing on a redraw I have no idea what it's like in IE but most of me just doesn't really care I bet this is something simple... I left this problem months ago and had to deal with other stuff thanks 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/
[css-d] forcing an element to the bottom of a cell?
Hi, On http://www.microcinemadvd.com/documentary/, I want to get the BROWSE ENTIRE STORE link (on the left side) to always end up just above the newsletter signup form. But on FF, the link always seems to end up in the middle of the page - on the first display of the page. If the page gets redrawn, the link goes to the bottom. this link is within a table cell and the table cell has vertical-align: bottom etc. the table and the div surrounding that left hand table have height:100% - I presumed that would stretch the table/div to the height of the main area but so what is the trick here? I can not put the link right above the form b/c that wouldn't work with how tables are used to structure the page. or a negative margin perhaps? Safari does not even do the right thing on a redraw I have no idea what it's like in IE but most of me just doesn't really care I bet this is something simple... I left this problem months ago and had to deal with other stuff thanks 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/
[css-d] expert system for CSS?
Everyone, Ever since I joined this list, I have been impressed with the wealth of knowledge here and people's willingness to help. I've been programming for 12 years and the front end CSS / JS / DHTML stuff has been giving me a headache every since I really got into it a year ago or so - it doesn't seem amenable to the more organized way of programming other stuff - there are so many exceptions and corner cases due to browser behaviors etc so I am wrestling with trying to develop that body of experience / internal database of knowledge about how to solve problems So, given my perspective as a sort of novice here, I was wondering: 1) does anyone have an idea of how to approach learning CSS other than just learning the tags and learning case by case how browsers react in different ways? yes, the box model etc... I guess I'm struggling with how to make my understanding more intuitive (so I don't have to spend hours searching the net for relevant info on a issue) which leads me to 2) what do people think of trying to encode all this data / case studies on this list into some sort of expert system - i am thinking something where you could type in keywords or a description of your problem and the system serves of possible useful info and examples of problems solved? If there is something out there already, please let me know. As for the task of programming something like this, it (to me) is more tractable than figuring the behavior of IE5/Win, IE5/Mac, IE6, and IE7 :) 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/
Re: [css-d] Border help - Browser compatibility issues
At 23:18 -0500 4/2/07, hiptojive @hotmail.com wrote: Hi, I'm having a rought time here getting the borders to match up in all the browsers. Ideally I want the page to look like what it does in IE for the PC. It's all wonky looking in Firefox (and i presume it's looking like this on the Mac. I have yet to test). I'v tried fudging borders in the image banner, but to no avail I can't get this to work. I've also tried adjusting the widths of my containers, but nothing seems to get this to be consistent. I read that borders in Firefox display on the inside, and in IE on the outside, so I presume this is part of the problem, but I'm sure there's something else happening here in my code. http://www.thestudioformovement.com/ Any insight on how to solve this problem, or how to approach boarders would be very helpful. You have an extra /div in there - I see 3 divs and 4 /divs That'll do something, but will it fix the problem? i don't know... it's a really simple layout though... so I'm surprised there's a problem (and I have a mac, w/ FF - FF is messed up and safari is fine) 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/
[css-d] preventing table cells from expanding
Hi everyone, this is certainly a basic design question, but I haven't found too many web pages with possible solutions (I don't think there is one...) but I thought you all might know some obscure clever trick 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? so it seems it's either javascript or convince the client they really don't need this bold effect any ideas? TIA ! 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/
Re: [css-d] preventing table cells from expanding
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? Hi Doug, We can't suggest a good solution without seeing what you are trying to do as well as what you've already tried. Please post a URL to a live page. You can strip out identifying information if necessary. 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 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 thanks 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/
Re: [css-d] preventing table cells from expanding
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/
