Re: [css-d] vertical stretch .. just can't get it - ALMOST GOT IT
the php code does a browser check and if IE it loads a very small additional CSS bit to fix IE This isn't a reliable way of doing things. Anybody can spoof the user agent HTTP header, and many people do. Opera, whose CSS standards compliance is much better than IE6, pretends to be IE by default, so your browser check is going to have to test for the presence of Opera in the string to exclude it. Using Safari, I can enable a menu which lets me pretend to be one of a variety of browsers, including IE6, in such a way that the server cannot detect that I am using a browser that works properly. Result: if I go to (say) my bank, which demands IE6 but works fine with Safari, and I then visit your site without switching my user agent header back, I will see your design as totally broken. If you want to send some CSS to IE only, then use conditional comments [Ref. 1 (and numerous posts to this group)]. This is exactly the job they were designed for, and they are supported (indeed, encouraged) by Microsoft, so you can use them and relax. A server-side solution is broken by definition, and will haunt you from a maintenance perspective in years to come. Believe me, I've seen the consequences of that mistake, and you don't want to make it. [Ref. 1] http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
On the note of learning PHP/JS that quickly, I've been working in and with PHP now for a long time and for many different uses. I've learned many things along to way and completely agree with what Christian said. Its one thing knowing the syntax of a language, and what functions, classes and the rest of the language does but actually using it is a different case. You can liken this to living in a large city. Knowing the direction to get to a place, is easy enough to find - but knowing the right way the get there is a different matter. With experience comes this know how, and in the big city, the person who has lived there a long while, will know the quickest, safest way to get to their destination. With PHP, there are generally many ways to accomplish something, but I'd say that over half of the methods available to you to solve a problem, are not safe. Experience teaches us which are safe, and which are not. You can liken the whole experience thing again, with CSS. Most of the people here on this list (I've only been here a matter of days) are well informed, and knowledgeable people who have the experience of dealing with issues that CSS gives, and how to solve them. My largest stumbling block when I moved to CSS was expectations that at the time could not be realised. With a little change to my thinking and my design, I have since formed a nice relationship with CSS and enjoy using and promoting it. It short, we all have to sacrifice something to get the design we want implemented if it is a design that is not well planned out. You have to pre-design for yourself, with knowledge of what is do-able, and what's not. Scott. PS: Sorry for the ramble :P Christian Heilmann wrote: well YES.. certainly some frustration in my post - took me a weekend to learn PHP and another one to learn JS.. but 2 years and still table or css layouts drive me nuts. If you learnt PHP and JS in one weekend each then you are either a certified genius or you learnt some syntax and think you mastered the language and all that comes with it. Don't believe the hype of Teach yourself quantum physics and changing the time continuum in 24 hours books. That superficial knowledge will bite you where it hurts the first time someone with malicious intent checks the safety of PHP scripts developed on syntax alone. It is the same problem here: half of CSS is realising what it is - describing what the presentation should be like, not fixing it to make it impossible to change. but my frustration aside; you must admit that the idea of using CSS for layout is a pretty cludgey art with present standards or lack thereof. Everything I have seen to try to make layouts such as faux columns or massively large paddings are simply tricks to get around the inherent lack of layout capability in CSS - and, as tricks come issues. Maybe it is time to rethink layout for the web? We tried forcing print design best practices onto the web and failed. Both with tables and CSS as your example shows. Maybe it is time to open up a bit and let the browser deal with display and layout instead of enforcing it. What is the height you want to fill up? A web document is either a fixed height or it is as high as its content. If you want to fill an arbitary height like the browser window then you need to hack and expect odd behaviour. CSS is not to blame there, the design expecting this behaviour is. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
Peter, On Feb 7, 2006, at 1:37 AM, Peter Lindstrom wrote: why can't I just have: ... and define my width, background colors, images etc per div as I see fit. pretty sure it doesn't really need to be this difficult. If it weren't for old browsers (like ie6/win) you could. And, you are right, it shouldn't have to be this difficult. Unfortunately we have a somewhat non-standards-compliant browser with major market share that we must code around. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
even with a single browser I don't think it is a very clear task to get a simple layout such as the one I was trying to put together. Even just using FF. I see many pieces of my layout discussed on various web sites: - how to do 3 cols with one expanding in width as needed - how to make a footer stick to bottom - how to make internal col section stretch vertically while other columns follow but any time I try to put more than one of these techniques together to get a real layout: - that has header, body, footer - all split into 3 sections - each of which has different portions to expand vert/horiz - and page fill vert/horiz one of the techniques ends up breaking the others - I don't REALLY care about browser compatibility - I can have server load different CSS based on client's browser - but even with more std compliant browser like FF 1.5 I see a slew of tricks like: - set min-heights on certain sections, fixed height or percentage on others - have various images to fill space and give borders since borders will only follow real content and not vertically stretched cols - set margins that are off the page - and other things that seem even less intuitive and even then.. I can't get what I want. I have come across a couple web sites where people (with far more CSS knowledge than myself) have attempted to put together a real layout.. but have given up. when is someone going to develop the tool (like dreamweaver; but that actually works) that is CSS based rather than table based - where I can simply draw what I want; and say which regions I want to be fixed or expanded; and what backgrounds, borders, layers, etc I want - and have it spit out CSS that I can just add content to. a.. someday Peter Lindstrom All Analog - Technical Design Consulting Ottawa, ON Voice: 613-612-1419 Email: [EMAIL PROTECTED] Web:www.allanalog.com ::-Original Message- ::From: Roger Roelofs [mailto:[EMAIL PROTECTED] ::Sent: Tuesday, February 07, 2006 7:23 AM ::To: css-d css-d ::Cc: [EMAIL PROTECTED] ::Subject: Re: [css-d] vertical stretch .. just can't get it :: ::Peter, :: ::On Feb 7, 2006, at 1:37 AM, Peter Lindstrom wrote: :: :: why can't I just have: :: ... :: and define my width, background colors, images etc per div as I see :: fit. :: pretty sure it doesn't really need to be this difficult. :: ::If it weren't for old browsers (like ie6/win) you could. And, you are ::right, it shouldn't have to be this difficult. Unfortunately we have a ::somewhat non-standards-compliant browser with major market share that ::we must code around. ::-- ::Roger Roelofs ::Remember, if youre headed in the wrong direction, :: God allows U-turns! ::~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it - ALMOST GOT IT
ok.. after many hours of banging my head on the keyboard and apparently annoying more than a couple people here with my simple comment css should be easier I have a nearly working solution for my layout. first, I would like to thank the people at http://www.tanfa.co.uk/ for providing a layout that got me the closest I had seen so far as well as the many people who responded here with pieces to my overall puzzle. I think one of the biggest tips I got from tanfa was really a very simply one that had somehow eluded me so far. forget trying to make a CSS that works with IE and FF.. why bother.. have the server check the client and load appropriate CSS.. I think a lot of my frustration had always been the fact that I was trying to piece together bits of solutions - vertical columns that neatly extend; then add a fixed footer, then something else. and (as one of my complaints about CSS) once I would add one portion it would break the other. this was only compounded when I would try to make things universally browser happy. so.. where did I get to? you can see page at: http://www.allanalog.com/aaw/5.php the php code does a browser check and if IE it loads a very small additional CSS bit to fix IE what the layout does: - floating width col 3 in body - fixed height header and footer - width expanding footer and header - footer fixed to bottom of browser (actually haven't tested yet if short content that page extends to fill browser??? - I'll go out on a limb and guess that doesn't work) - body section expands vertically based on either col 1,2 or 3 cludges I added: (and I still think CSS layout is all about the cludges!!) - besides the obvious ones that tanfa already had (faux colum imgs , using display property, using server to add IE CSS code) - I can't seem to get mid section of footer img (which has upper/lower border) to extend the width of expanding section - I threw a really messy cludge to add an img in html with a fixed large width; but this width would need to be different size in IE and gets messy depending on browser width - I don't see why CSS background won't repeat!! yet another one of those non-intuitive CSS things - originally (although never mentioned) because of what I am trying to do here with the CMS system I am fitting into this - the 2nd and 3rd columns of the body section would have been nice to been able to drop into the header - because of wrappers and less than modular structure of CSS I couldn't get this to work - as a result there is a different hdrcell section to format the data in the header than what is used in the body - not sure how I will sort this out with CMS system ; but PHP code is always easier than CSS :) STILL MISSING: - need to clean up the mid section of footer so border extends (without using my cludge). - I haven't figured out the right border for the body section (as you can see); with tanfa's solution I don't think borders can be added - I see another CSS cludge in the making.. I assume I can always add a 4th column just to clean this up??? comments, fixes to my remaining problems, sarcastic remarks on my sarcasm.. all are appreciated.. :) cheers, Peter Lindstrom All Analog - Technical Design Consulting Ottawa, ON Voice: 613-612-1419 Email: [EMAIL PROTECTED] Web:www.allanalog.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it - ALMOST GOT IT
Peter Lindstrom wrote: http://www.allanalog.com/aaw/5.php the php code does a browser check and if IE it loads a very small additional CSS bit to fix IE ... comments, fixes to my remaining problems, sarcastic remarks on my sarcasm.. all are appreciated.. :) Peter, I think there was already enough wordy expressed frustration and sarcasm in this thread. If you don't like CSS, than keep on using tables. Otherwise, you may want to start learning CSS and HTML by taking more care over what you are actually serving to the browsers. Validate your 70 html errors, beginning with -- IE quirks rendering mode trigger -- This is not a comment. This is just a string. Only IE seems to get the idea what you've meant and shows a page. Therefore, something is wrong with your browser sniffing. All other browsers I've tested with this page are showing a non-styled, plain html text page. http://www.allanalog.com/aaw/5.php Embedded Styles from http://www.allanalog.com/aaw/5.php @import misc/drupal.css; @import themes/box_grey/style5.css; http://localhost/aaw/misc/drupal.css http://localhost/aaw/themes/box_grey/style5.css This is owing to this line you should think over: base href=http://localhost/aaw/; / If you have to serve different styles to IE, a Conditional Comment will do. Next to less sarcasm, I'd prefer to see more new members on this list accepting the /convention/ of bottom posting and the /requirement/ of trimming the quoted material. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
yes, I have tried both the faux columns approach that you use and the large padding solution.. can't get either to work very well. maybe you can correct me if I am wrong but the faux column approach sets a body background because the body tag will cover the whole page and therefore extend the height of the column. in my particular case (http://www.allanalog.com/aaw/) the column I am trying to stretch is the center column in middle section of my page (with About Us at the top) - so ideally I would like to have a wrapper only around column 2 and 3 (first column is generated by a CMS system and it is complex to wrap that one as well) where I thought I could (as you do with body) put repeating background image in the wrapper DIV... but, as I am guessing.. it is not like adding it to body; as it does not repeat the same anywhere else. I think bottom line is that CSS is not really at the stage where it can be used for page layout for complex layouts (not that mine is that complex - but still haven't seen a solution that can work here). seemed like a nice idea though.. maybe in a few years. Peter Lindstrom All Analog - Technical Design Consulting Ottawa, ON Voice: 613-612-1419 Email: [EMAIL PROTECTED] Web:www.allanalog.com ::-Original Message- ::From: Ricky Zhou [mailto:[EMAIL PROTECTED] ::Sent: Monday, February 06, 2006 9:14 PM ::To: [EMAIL PROTECTED] ::Subject: Re: [css-d] vertical stretch .. just can't get it :: ::On 2/5/06, Peter Lindstrom [EMAIL PROTECTED] wrote: :: I have managed to use this method to get what I was looking for.. but I ::had :: sort of been hoping there was a real way of stretching columns without :: that technique since there are limitations when doing this.. for example ::- :: the side column must be fixed width (which isn't really that big a deal ::in :: most cases).. ::The method described is used to get the container to stretch fully ::(the border is a completely different issue, which I solve with faux ::columns). If you want to avoid this, I think some people use a huge ::paddings/negative margins to stretch the columns to theh container ::(padding-bottom: 32767px; margin-bottom: -32767px;). Personally, I ::think that the image is a more flexible/clean solution, though. :: ::Hope this helps, ::Ricky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
On 07/02/06, Peter Lindstrom [EMAIL PROTECTED] wrote:
in my particular case (http://www.allanalog.com/aaw/) the column I am
trying
to stretch is the center column in middle section of my page (with About
Us
at the top) - so ideally I would like to have a wrapper only around column
2
and 3 (first column is generated by a CMS system and it is complex to wrap
that one as well) where I thought I could (as you do with body) put
repeating background image in the wrapper DIV... but, as I am guessing..
it
is not like adding it to body; as it does not repeat the same anywhere
else.
There is a way to make a wrapper extend to the height of the body element. I
believe the trick is to set both the html and body elements to have a height
of 100%, and give your wrapper a height of 100% as well (although I've often
used min-height, which I find makes 'good' browsers play nicer and gets
treated as height by IE).
So you end up with something along the lines of:
html, body { min-height: 100% }
#wrapper { min-height: 100% }
Then it should just be a matter of what you put into the wrapper and what
you exclude.
Hope it helps,
Seona.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] vertical stretch .. just can't get it
Peter: Peter Lindstrom wrote: yes, I have tried both the faux columns approach that you use and the large padding solution.. can't get either to work very well. maybe you can correct me if I am wrong but the faux column approach sets a body background because the body tag will cover the whole page and therefore extend the height of the column. in my particular case (http://www.allanalog.com/aaw/) the column I am trying to stretch is the center column in middle section of my page (with About Us at the top) - so ideally I would like to have a wrapper only around column 2 and 3 (first column is generated by a CMS system and it is complex to wrap that one as well) where I thought I could (as you do with body) put repeating background image in the wrapper DIV... but, as I am guessing.. it is not like adding it to body; as it does not repeat the same anywhere else. ?? - It does repeat the same everywhere. Simply enclose the middle portion of your page in a wrapper division and then add the faux-column to that. This is exactly what I am trying to do on this page, and have managed to do as well. http://cfl.in/ Note the sidebar, and the main body - two column solution, with a faux-column. You might have to do a google for a Sticky footer if you want a footer that stays at the bottom of the browser viewport if the content doesn't fill it. These two solutions are *not* exclusive to one another. I think bottom line is that CSS is not really at the stage where it can be used for page layout for complex layouts (not that mine is that complex - but still haven't seen a solution that can work here). Well - I don't know - CSS does have it's quirks. However, to say that it is not at a stage where it can be used for complex layouts...that is a different story, IMHO. This article might be of interest to you: http://alistapart.com/articles/outsidethegrid Oh - and if you really get stuck, why don't you post a mockup of what you're trying to achieve; one of the gurus on this site will *definitely* be able to help you. seemed like a nice idea though.. maybe in a few years. Well - I'm going to start using it right now, if it's all the same to you. ;-). Cheers, Rahul. -- . . . . . . . . . . . . . . . . . . . . . . . . Rahul Gonsalves Make PNG, not War. . . . . . . . . . . . . . . . . . . . . . . . . __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
I think bottom line is that CSS is not really at the stage where it can be used for page layout for complex layouts (not that mine is that complex - but still haven't seen a solution that can work here). You might be right, and I must say that by standing your ground and using a hybrid CSS/Table layout with properly named IDs and classes (my favourite is div class=block block-block id=block-block-1, I like Ian Dury) you have created a layout that is sure to give me hours of fun exploring the site: http://onlinetools.org/tests/shot.png That whole CSS Malarkey seems to be the same swindlle as being a superstar. The other day I spent hours making my hair cool with a lot of spray, taking some drugs and wearing my leather jacket and shades. I still had to pay entrance to the club and was neither approached by sponsors or jumped by love crazed groupies. Clearly it is not worth the effort to learn an instrument, take singing lessons or write some lyrics. As all users are idiots who don't know what is good for them the only good web design is creating GIFs of all the pages and covering them with image maps. Good authoring tools do that automatically for you. True, there is the search engine problem but I heard adding lots of keywords in meta tags, titles and the file name works around that little problem. * may contain sarcasm to avoid expletives. No animals of were hurt in the making of this email __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
On 2/6/06, Peter Lindstrom [EMAIL PROTECTED] wrote: I think bottom line is that CSS is not really at the stage where it can be used for page layout for complex layouts (not that mine is that complex - but still haven't seen a solution that can work here). seemed like a nice idea though.. maybe in a few years. Let's not go making broad statements just because we can't get a bug ironed out. Bottom line is you need to get your background to extend the height of the page. You can keep trying or give up, but at the end of the day thousands of developers have already implemented complex layouts in CSS, so I can assure you that it can be done. I'm pretty sure someone already solved your problem, but definitely let us know if you are still stuck. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
well YES.. certainly some frustration in my post - took me a weekend to learn PHP and another one to learn JS.. but 2 years and still table or css layouts drive me nuts. but my frustration aside; you must admit that the idea of using CSS for layout is a pretty cludgey art with present standards or lack thereof. Everything I have seen to try to make layouts such as faux columns or massively large paddings are simply tricks to get around the inherent lack of layout capability in CSS - and, as tricks come issues. why can't I just have: div header - height fixed div col1 - fixed width/div div col2 - fixed width/div div col3 - width to fill page/div /div div body - height to fill page or content div col1 - fixed width/div div col2 - width to fill page/div /div div footer - height fixed div col1 - fixed width/div div col2 - spacer width to fill page/div div col3 - fixed width/div /div and define my width, background colors, images etc per div as I see fit. pretty sure it doesn't really need to be this difficult. And my point about a few years off was in reference to improvements in the use of CSS for layouts that are coming to stds in the next year or so.. but likely not to browsers for a couple yrs after that. Peter... ::-Original Message- ::From: Christian Montoya [mailto:[EMAIL PROTECTED] ::Sent: Tuesday, February 07, 2006 1:18 AM ::To: [EMAIL PROTECTED] ::Cc: css-d@lists.css-discuss.org ::Subject: Re: [css-d] vertical stretch .. just can't get it :: ::On 2/6/06, Peter Lindstrom [EMAIL PROTECTED] wrote: :: I think bottom line is that CSS is not really at the stage where it can ::be :: used for page layout for complex layouts (not that mine is that complex ::- :: but still haven't seen a solution that can work here). :: :: seemed like a nice idea though.. maybe in a few years. :: ::Let's not go making broad statements just because we can't get a bug ::ironed out. Bottom line is you need to get your background to extend ::the height of the page. You can keep trying or give up, but at the end ::of the day thousands of developers have already implemented complex ::layouts in CSS, so I can assure you that it can be done. I'm pretty ::sure someone already solved your problem, but definitely let us know ::if you are still stuck. :: ::-- ::-- ::Christian Montoya ::christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
On Feb 6, 2006, at 10:37 PM, Peter Lindstrom wrote: why can't I just have: div header - height fixed div col1 - fixed width/div div col2 - fixed width/div div col3 - width to fill page/div /div That would be nice, but then again, everyone and their dog would be web designers... no thanks. Have you surfed these sites: http://www.cssbeauty.com/ http://cssdrive.com/ http://www.nv30.com/mt/blogomania/index.php http://cssvault.com/ http://www.stylegala.com/ http://www.unmatchedstyle.com/ http://www.weeklystandards.com/ http://www.webstandardsawards.com/ http://www.cssreboot.com/ http://txpmagazine.kbbu.de/all_sites/ http://cssdesign.se/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
well YES.. certainly some frustration in my post - took me a weekend to learn PHP and another one to learn JS.. but 2 years and still table or css layouts drive me nuts. If you learnt PHP and JS in one weekend each then you are either a certified genius or you learnt some syntax and think you mastered the language and all that comes with it. Don't believe the hype of Teach yourself quantum physics and changing the time continuum in 24 hours books. That superficial knowledge will bite you where it hurts the first time someone with malicious intent checks the safety of PHP scripts developed on syntax alone. It is the same problem here: half of CSS is realising what it is - describing what the presentation should be like, not fixing it to make it impossible to change. but my frustration aside; you must admit that the idea of using CSS for layout is a pretty cludgey art with present standards or lack thereof. Everything I have seen to try to make layouts such as faux columns or massively large paddings are simply tricks to get around the inherent lack of layout capability in CSS - and, as tricks come issues. Maybe it is time to rethink layout for the web? We tried forcing print design best practices onto the web and failed. Both with tables and CSS as your example shows. Maybe it is time to open up a bit and let the browser deal with display and layout instead of enforcing it. What is the height you want to fill up? A web document is either a fixed height or it is as high as its content. If you want to fill an arbitary height like the browser window then you need to hack and expect odd behaviour. CSS is not to blame there, the design expecting this behaviour is. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
well I have read about 10 different site postings about how to do a CSS
based vertical column stretch.. I would have to say.. I think time to give
up and go back to table layouts.
is this not possible??? :
- 2 columns
- they both stretch vertically to fill page and/or content
Seems like it should be pretty simple but all the posts I have seen either
dont work in both FF and IE or have silly constraints like column 2 has to
have more content than column 1.
Not as neat with tables.. BUT IT DOES WORK!!
I managed to stumble upon this almost solution:
CSS:
body {
color: #000;
background: #f0f;
font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
font-size: 84%;
padding: 0;
margin: 0;
}
#wrapper
{
overflow: hidden; position:absolute;
height:100%; width:100%;
min-height: 100%;
}
#block_1
{
float: left;
width: 159px;
margin-left: 0;
background-color:white;
border-right: 3px solid #aaa;
height:100%
}
* html #wrapper
{
display: inline;
height:100%;
}
#block_2
{
position:absolute;
width:100%;
margin-left: 159px;
background-color:green;
}
#block_1, #block_2
{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
HTML:
div id='wrapper'
div id='block_1'
img src=sites/default/picture.jpg width='159' alt=''
img src=sites/default/tag.jpg alt=''
img src=sites/default/news_archive.jpg width='159' alt=''
img src=sites/default/contact.jpg alt=''
blah
/div
div id='block_2'Some body text here./div
BUT.. this seems to work in FF 1.5, Opera, Mozilla.. but of course not IE6.
Anyone see something obvious in my solution that would make it work in IE or
can they point me to a post that has a solution?
cheers,
Peter Lindstrom
Email: [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] vertical stretch .. just can't get it
is this not possible??? : - 2 columns - they both stretch vertically to fill page and/or content Threatening to use tables won't get you much advice here...I'd be surprised if anyone else replied to a message that starts out that way.[/noise] [signal] There are plenty of suggestions here: http://css-discuss.incutio.com/?page=AnyColumnLongest One True Layout: http://www.positioniseverything.net/articles/onetruelayout/ Faux Columns: http://www.alistapart.com/articles/fauxcolumns/ [/signal] -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
is this not possible??? : - 2 columns - they both stretch vertically to fill page and/or content Jono gave solutions for any column longest, as for the filling the page, there are footer solutions in CSS, too. This is not a technical problem but a misunderstanding in thinking. A web page is not a canvas that is as big as your browser window is, it is as high as the content is, and that is it. If you don't have content, your page will not fill the browser window. Which might be a good thing - as you will realise the more you surf with Opera on a smartphone. CSS is not there to make tables better, as long as there is no multi column model in HTML everything will be a hack. If you embrace diversity of displays then CSS is fun, if you want it to be as strict as spacer gif and width=1 layouts, then it can be annoying. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] vertical stretch .. just can't get it
On 2/5/06, Peter Lindstrom [EMAIL PROTECTED] wrote: - 2 columns - they both stretch vertically to fill page and/or content This is my test for a full height layout: http://riczho.dyndns.org:1123/fullheight/ Unfortunately, it doesn't work in IE7.. But I've tested this in IE 6, Firefox, Opera, Konqueror (and I've heard that it should work in Safari-- Mac IE 5 may be another issue though). Ricky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
