[css-d] liquid 3col - header questions
Hi all, I'm developing a site based on the 'holy grail' 3col liquid layout [1]. Site: http://devel.legionpost130.org/ sub-page url: http://devel.legionpost130.org/index.php?history (for long content) CSS: http://devel.legionpost130.org/styles/legionpost130.css I've added a min-height and min-width setting to #header to accommodate the header graphic. Herein lies my issue. Header graphic is 535px wide, 102px high. On screen resolutions of 800x600 and 1024x768 I see strange results and would like to avoid them if possible: Screenshots: http://captures.swhi.net/WinXPFF2.1024x768.jpg shows 'clipping' of the left and right edges of the graphic http://captures.swhi.net/WinXPIE7.800x600.jpg shows loss of right column (which isn't an issue for this site, but i'm curious as to why. Any suggestions will be greatly appreciated. The css is still a bit messy, containing directives which are not used by the markup - all to be cleaned up before we go live. TIA, ~Ray [1]http://www.alistapart.com/articles/holygrail __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] liquid 3col - header questions
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Ray Leventhal Sent: 11 September 2007 15:02 To: css-d Subject: [css-d] liquid 3col - header questions Hi all, I'm developing a site based on the 'holy grail' 3col liquid layout [1]. Site: http://devel.legionpost130.org/ sub-page url: http://devel.legionpost130.org/index.php?history (for long content) CSS: http://devel.legionpost130.org/styles/legionpost130.css I've added a min-height and min-width setting to #header to accommodate the header graphic. Herein lies my issue. Header graphic is 535px wide, 102px high. On screen resolutions of 800x600 and 1024x768 I see strange results and would like to avoid them if possible: Screenshots: http://captures.swhi.net/WinXPFF2.1024x768.jpg shows 'clipping' of the left and right edges of the graphic http://captures.swhi.net/WinXPIE7.800x600.jpg shows loss of right column (which isn't an issue for this site, but i'm curious as to why. Any suggestions will be greatly appreciated. The css is still a bit messy, containing directives which are not used by the markup - all to be cleaned up before we go live. Because you have used min-height and min-width, the log doesn't appear in IE6 at all. (IE6 doesn't recognise min-width or min-height). In fact the whole site looks, well, odd. In the header div there is an extraeneous */ at line 131 which may be affecting things thereafter. Ian IY e-Solutions http://www.iyesolutions.co.uk No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.485 / Virus Database: 269.13.14/999 - Release Date: 10/09/2007 17:43 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] liquid 3col - header questions
snip Because you have used min-height and min-width, the log doesn't appear in IE6 at all. (IE6 doesn't recognise min-width or min-height). In fact the whole site looks, well, odd. In the header div there is an extraeneous */ at line 131 which may be affecting things thereafter. Ian IY e-Solutions http://www.iyesolutions.co.uk Hi Ian, Thanks for your reply...especially for the */ which I clearly missed. Is there a better way to work with this layout and still have my header? I guess that's the question - or I'll find a less imposing way to do this. I had considered putting each of the 'emblem' graphics to the right and left of the graphic text in their own rfloat/lfloat divs, but that made a bit more of a mess than I'd wanted :) (pebcak, i'm sure). ~R __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] liquid 3col - header questions
Ray Leventhal wrote: I'm developing a site based on the 'holy grail' 3col liquid layout [1]. http://devel.legionpost130.org/ I don't often speak up against a solution, but I'd advice you to stay as far away from the mentioned 'holy grail' as you possibly can. It is one of the least tested, prepared and cross-browser reliable solutions released onto the web in later years. It provokes too many bugs and differences between browsers, and few of them are cared for. This hits all versions of IE/win hard. You can hack and tweak your way around most weaknesses in that 'holy grail' layout, but you'll end up with a completely different layout-solution before you've made it anywhere near cross-browser reliable anyway, so I don't think it is worth it. The 'negative margins' solution... http://www.alistapart.com/articles/negativemargins ...will work in your case, as will just about any... - header first. - followed by 3 columns float and/or non-floats. - maybe with a footer at the bottom. ...except the mentioned 'holy grail'. regards Georg [1]http://www.alistapart.com/articles/holygrail -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] liquid 3col - header questions
I don't often speak up against a solution, but I'd advice you to stay as far away from the mentioned 'holy grail' as you possibly can. It is one of the least tested, prepared and cross-browser reliable solutions released onto the web in later years. It provokes too many bugs and differences between browsers, and few of them are cared for. This hits all versions of IE/win hard. You can hack and tweak your way around most weaknesses in that 'holy grail' layout, but you'll end up with a completely different layout-solution before you've made it anywhere near cross-browser reliable anyway, so I don't think it is worth it. The 'negative margins' solution... http://www.alistapart.com/articles/negativemargins ...will work in your case, as will just about any... - header first. - followed by 3 columns float and/or non-floats. - maybe with a footer at the bottom. ...except the mentioned 'holy grail'. HI Georg, It's not often that one person's opinion is enough to influence me to change my mind, but when we're talking about web layout and you have strong feelings, I'd be a fool not to heed. Thank you for that insight and your opinions which I always find valuable. I'll post again regarding this site when I've reworked the css and markup a bit. Again, my thanks, ~Ray __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
