Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
I was able to achieve the border on my right column with adding a border to by bgimage, thanks Mani. One problem I am having though. I have a header image that is exactly 800px, so I want my whole page to be no more than 800px wide. I have set my #wrapper to 800px. In IE my right column overlaps the header to the right a little bit. It doesn't do this in moz, ff, netscape. Is there way to compensate for this IE irregularity? (no padding or margin on wrapper) Bruce Gilbert webmaster DPS -Original Message- From: Mani Sheriar <[EMAIL PROTECTED]> Sent: Dec 17, 2004 9:22 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout >what if you want one of the columns to have a border around it, say the right column. How can this be done? If you want one of the columns to have a border, then you just apply the border property to the column and your 200x1 pixel gif can have that border on it as well. Should work fine. One of the main reasons that I struggled to create this layout is so that you could have different colors for the background, header, footer, and all three columns (none of the colors are "shining through" from underlying elements). This can be extended to different backgrounds as well ... which is the REAL reason that I worked on this design. If you wanted some sort of fancy background for the side columns (or any element) then you would just apply that background to the column and the wrapper div. >IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns >Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif >(could be a known CSS bug related to IE implementation of box model-padding and border added to width) >See: http://tantek.com/CSS/Examples/boxmodelhack.html Call for help: Does anyone have any ideas about this problem in IE 5.2 OS X (screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif). I have already implemented the box model hack, so I'm not sure what the issue could be. > Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? >I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its "x-axis" start position as a percentage. I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its "x-axis" start position as a percentage. I actually started working on an all-liquid layout at first. I ended up going to a single-column liquid layout just because this would work better for a project I'm about to embark on. What you suggest is exactly how I planned to try to implement the backgrounds (I didn't get that far yet, though). However, I might try to follow up on the all-liquid layout just to see if it can be done. If I get to it and get it to work, I'll post it here. Quick Note: Dejan - Wow ... THANK YOU for your help. I'm sure those screen shots will be very helpful and I really appreciate your time. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
>what if you want one of the columns to have a border around it, say the right column. How can this be done? If you want one of the columns to have a border, then you just apply the border property to the column and your 200x1 pixel gif can have that border on it as well. Should work fine. One of the main reasons that I struggled to create this layout is so that you could have different colors for the background, header, footer, and all three columns (none of the colors are "shining through" from underlying elements). This can be extended to different backgrounds as well ... which is the REAL reason that I worked on this design. If you wanted some sort of fancy background for the side columns (or any element) then you would just apply that background to the column and the wrapper div. >IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns >Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif >(could be a known CSS bug related to IE implementation of box model-padding and border added to width) >See: http://tantek.com/CSS/Examples/boxmodelhack.html Call for help: Does anyone have any ideas about this problem in IE 5.2 OS X (screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif). I have already implemented the box model hack, so I'm not sure what the issue could be. > Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? >I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its "x-axis" start position as a percentage. I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its "x-axis" start position as a percentage. I actually started working on an all-liquid layout at first. I ended up going to a single-column liquid layout just because this would work better for a project I'm about to embark on. What you suggest is exactly how I planned to try to implement the backgrounds (I didn't get that far yet, though). However, I might try to follow up on the all-liquid layout just to see if it can be done. If I get to it and get it to work, I'll post it here. Quick Note: Dejan - Wow ... THANK YOU for your help. I'm sure those screen shots will be very helpful and I really appreciate your time. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
what if you want one of the columns to have a border around it, say the right column. How can this be done? Bruce Gilbert webmaster DPS-Original Message- From: Mani Sheriar <[EMAIL PROTECTED]>Sent: Dec 16, 2004 6:06 PM To: [EMAIL PROTECTED] Subject: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout Clean Clean DocumentEmail MicrosoftInternetExplorer4 Hi Everyone! This is my first post to this group after reading it for a while. I must say, Im kinda scared to post to you guys! However, I really need your help. I think I may have found the Holy Grail that 3-column css liquid layout that allows for different colors and/or backgrounds for the body, the header, the footer, and the three columns NO MATTER WHICH COLUMN IS LONGEST. What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms? Also, I read the usual css blogs as much as I have time for, but Im not sure if someone else (or even several people) have already beaten me to the punch here. If not, I would take the time to write something up about it. Heres the link: http://www.ManiSheriar.com/holygrail By the way, I know that the code for the content comes after the code for the sidebars, but for accessibility concerns I could just put a skip to content link at the top, no? Anyway thanks for any feedback, and please be gentle with me. ;~) Mani (like Bonnie) Mani Sheriar Sheriar Designs | www.ManiSheriar.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
I've been playing with http://www.saila.com/usage/layouts/ and so far the results have been good. Christie Mason ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
Well done. Tested with Win98 SE at 800x600: works perfectly with Mozilla 1.7.3, Firefox 1.0, IE 6 SP1, Netscape 7.01, Netscape 6.2; there is something amiss with Opera - the layout is OK with 7.54, 7.29, 6.05 and 5.12, but it doesn't recognize the links at the bottom of the side columns, treating them as normal text; the padding is not appled to the side columns in IE 5.5 SP2; the layout breaks in IE 5.01 SP2, Amaya 8.5, MSN TV 2.8, WebTV Viewer 2.6; degrades cleanly to an unstyled page in IE 3, Netscape 4.74, OffByOne 3.4a, WebTV Viewer 2.0 tested with Linux (Mandrake 10.1) with KDE 3.2.3 at 1024x768: works as expected with Mozilla 1.7.2 and Konqueror 3.2.3 same link problem as in Windows with Opera 7.54 final tested with MacOS 7.5.5 under Basilisk II emulator at 800x600: layout breaks with IE 4.0 and iCab 2.95; degrades well with Netscape 4.05. I'm sendig you some screenshot off-list. Mani Sheriar wrote:  What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms? Hereâs the link: http://www.ManiSheriar.com/holygrail -- Dejan Kozina Web Design Studio Dolina 346 (TS) I-34018 Trst/Trieste - Italy tel./fax: +39 040 228 436 cell.: +39 348 7355 225 http://www.kozina.com/ e-mail: [EMAIL PROTECTED] begin:vcard fn:Dejan Kozina n:Kozina;Dejan org:Dejan Kozina Web Design Studio adr:;;Dolina 346;Dolina;TS;I-34018;Italy email;internet:[EMAIL PROTECTED] tel;work:+39 348 7355 225 tel;fax:+39 040 228 436 tel;home:+39 040 228 436 tel;cell:+39 348 7355 225 x-mozilla-html:TRUE url:http://www.kozina.com/ version:2.1 end:vcard
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
On 17 Dec 2004, at 03:29, Hugh Todd wrote: Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? I refer you to Zoe Gillenwater (http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58). I am surprised that she hasn't made comment. -- Paul Connolley SQL/Systems Programmer Egocentric - http://egocentric.co.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
Hugh Todd wrote: Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? I saved the page to disk (via Firefox's Save Page command), and when I open it locally, the columns don't stretch (and appear as if they were just floats) This is because Firefox doesn't save files linked to in CSS files. This "wrapping" technique looks useful, but because the backgrounds to the columns have to be defined by images (as the wrapper is actually a container, and thus... giving it a background color (or repeat-xy image) fills the whole screen I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its "x-axis" start position as a percentage. (I hope that made some sense) HTH -David R ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? -Hugh Todd I think I may have found the Holy Grail … that 3-column css liquid layout that allows for different colors and/or backgrounds for the body, the header, the footer, and the three columns NO MATTER WHICH COLUMN IS LONGEST. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
I love the implementation of the HTML and CSS. But um, could you please turn off HTML in your email? THE AMAZINGLY LARGE TYPE IS SENDING ME BLIND. Thanks :) On Thu, 16 Dec 2004 18:33:58 -0600, Mani Sheriar <[EMAIL PROTECTED]> wrote: > > > > >Checked (OK) > > >Safari 1.2.4 OS X (Mac) > > >Opera 6.0.3 (Mac) > > >Netscape 7.1 OS X (Mac) > > > > >Minor bugs > > >IE 5.2 OS X (Mac): extra padding added to the width of the left and right > columns > > >Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif > > >(could be a known CSS bug related to IE implementation of box model-padding > and border added to width) > > >See: http://tantek.com/CSS/Examples/boxmodelhack.html > > > > Thanks very much for the screenshot, Andy! > > > > I thought that I had already allowed for the box-model inconsistencies in my > css code. I'm wondering if 1E/MAC 5.2 doesn't like the negative margins on > the side columns? Any ideas anyone? > > > > > > Mani Sheriar > > Sheriar Designs | www.ManiSheriar.com > > 925|914.0741 > > > > > > -- Website Designer/Developer www.nataliebuxton.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
>Checked (OK) >Safari 1.2.4 OS X (Mac) >Opera 6.0.3 (Mac) >Netscape 7.1 OS X (Mac) >Minor bugs >IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns >Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif >(could be a known CSS bug related to IE implementation of box model-padding and border added to width) >See: http://tantek.com/CSS/Examples/boxmodelhack.html Thanks very much for the screenshot, Andy! I thought that I had already allowed for the box-model inconsistencies in my css code. I’m wondering if 1E/MAC 5.2 doesn’t like the negative margins on the side columns? Any ideas anyone? Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
Title: Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layou I think I may have found the Holy Grail that 3-column css liquid layout What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms? Here's the link: http://www.ManiSheriar.com/holygrail Checked (OK) Safari 1.2.4 OS X (Mac) Opera 6.0.3 (Mac) Netscape 7.1 OS X (Mac) Minor bugs IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif (could be a known CSS bug related to IE implementation of box model-padding and border added to width) See: http://tantek.com/CSS/Examples/boxmodelhack.html Cheers, -- Andy Kirkwood | Creative Director MOTIVE | web.design.integrity http://www.motive.co.nz/ ph: +64 4 3 800 800 fx: +64 4 970 9693 mob: 021 369 693 93 Rintoul St, Newtown PO Box 7150, Wellington South, New Zealand
[WSG] The Holy Grail ... CSS Liquid Three-Column Layout
Hi Everyone! This is my first post to this group after reading it for a while. I must say, I’m kinda scared to post to you guys! However, I really need your help. I think I may have found the Holy Grail … that 3-column css liquid layout that allows for different colors and/or backgrounds for the body, the header, the footer, and the three columns NO MATTER WHICH COLUMN IS LONGEST. What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms? Also, I read the usual css blogs as much as I have time for, but I’m not sure if someone else (or even several people) have already beaten me to the punch here. If not, I would take the time to write something up about it. Here’s the link: http://www.ManiSheriar.com/holygrail By the way, I know that the code for the content comes after the code for the sidebars, but for accessibility concerns I could just put a “skip to content” link at the top, no? Anyway – thanks for any feedback, and please be gentle with me. ;~) Mani (like Bonnie) Mani Sheriar Sheriar Designs | www.ManiSheriar.com
