Stan Winchester wrote: > I have two different methods of trying to layout a page that has a header, > footer, left column for navigation buttons (client insists on the image > based buttons), and a main content column as seen on: > http://www.asian-herbs.com/index.cfm > > The problem with the above is the left column is floated over the left > border of the main content column. In FF/NS I can set the border to > transparent and everyone is happy. In IE the border shows black, so I had to > change the color of the left border to match the background color of the > background image (also as per client requirements). The problem with this is > it covers the left most portions of the background images. I would prefer to > be able to fix this page if possible. > Here is the css: http://www.asian-herbs.com/assets/styles.css > > ==================================================== > Another Option (as modified from > http://www.fu2k.org/alex/css/onetruelayout/example/interactive) > > HTML: http://www.aftershockweb.net/bd/css/onetruelayout/index2.cfm > CSS: http://www.aftershockweb.net/bd/css/onetruelayout/styles2.css > The problems I am having with this example are: > > 1.) Forcing the left nav buttons to stay against the left margin > 2.) Forcing the main content to not disappear under the nav buttons with > smaller window sizes like 800X600; at 1024X768 this layout's display is > acceptable in all three browsers. > > I am willing to use either method or scrap it and start over if there is a > better way. >
Hi Stan, I'd say scrap it and start over. Your border method doesn't work, and I don't think One True Layout works with a mix of liquid and fixed, as you have (someone correct me if I'm wrong). The reason that the content disappears under the nav buttons is that you have that column set to a width of 20%, with a corresponding left margin of 20% on the content column. But at smaller window sizes, 20% is not big enough to hold the fixed pixel sizes of those buttons. So they spill out of their div and overlap adjacent content. You need a layout with one fixed column and one liquid column. This is not difficult to achieve. Here's the barebones structure: <div style="float: left; width 200px;">Nav goes here...</div> <div style="margin-left: 220px;">main content goes here. Further divs can be nested to create further columns.</div> That's really it. But I'm guessing you want your content column to come first in the source, so that's why you were trying these more complicated methods? If you must have your content column first, I recommend a negative margin layout method. Two demos: http://www.pixelsurge.com/experiment/negative_margins_1.html http://www.pixelsurge.com/experiment/negative_margins_2.html Hopefully that will give you something useful to work with... 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 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/
