[css-d] problems with 2-column layout positioning and borders
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. Thank you, Aftershock Web Design, Inc. by: Stan Winchester President/Developer/Janitor http://www.aftershockweb.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] transparent background issue with IE
Stan Winchester wrote:
Using FF 1.5 NS 8 the div tag id outer I've set the
background-color to transparent it renders as I wanted, but in IE 6
shows the background black (look under the FAQ button - My client
insist on using the graphic button menu). It seemed the black is coming
from the color selector in the body tag; if I change the body color to
red it shows red, but if I change it to transparent it shows black. I'm not
sure what to do.
Here is html:
http://www.aftershockweb.net/bd/asian-herbs/test/
[...]
Here is css:
http://www.aftershockweb.net/bd/asian-herbs/test/assets/styles.css
Hi Stan,
Perhaps first validate the html? The are some errors, like a double charset
and starting an ID with a number.
In FF I don't see a difference when I cancel the whole #outer {
background-color: transparent; }. Can it be omitted without consequences? If
neded, did you try { background-color: inherit; }?
Greetings,
francky
Thanks to All who have helped on this issue,
I validated the page, and tried various ideas, but it remained black. I took
a new look at the code (originally from Rachel Andrew's book The CSS
Anthology) and noticed the left column is really laid over top of a very
wide border. If I set the border-left-style to anything but solid, hidden,
or none it seems to work in FF, NS and IE, though I don't think it is a very
good fix. I have only tested Windows so far.
So here is the fix:
border-left: 200px dotted transparent;
If there is a better fix I would love to hear it.
Thank you,
Aftershock Web Design, Inc.
by: Stan Winchester
President/Developer
http://www.aftershockweb.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] transparent background issue with IE
Here is html: http://www.aftershockweb.net/bd/asian-herbs/test/ [...] Here is css: http://www.aftershockweb.net/bd/asian-herbs/test/assets/styles.css Thanks to All who have helped on this issue, I validated the page, and tried various ideas, but it remained black. I took a new look at the code (originally from Rachel Andrew's book The CSS Anthology) and noticed the left column is really laid over top of a very wide border. If I set the border-left-style to anything but solid, hidden, or none it seems to work in FF, NS and IE, though I don't think it is a very good fix. I have only tested Windows so far. So here is the fix: border-left: 200px dotted transparent; If there is a better fix I would love to hear it. I found a problem in IE: if I maximize or minimize the page (http://www.aftershockweb.net/bd/asian-herbs/test/) the left menu overlays the 2nd column. If I refresh the page the menu goes back to where it belongs. This only happens in IE. Any ideas? Thank you, Aftershock Web Design, Inc. by: Stan Winchester President/Developer http://www.aftershockweb.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] transparent background issue with IE
Stan Winchester wrote:
http://www.aftershockweb.net/bd/asian-herbs/test/
The simplest fix is to rewrite #outer and forget about that transparent
border. Also, add a stabilizer for IE/win.
Style it like this:
#outer {
background-color: transparent;
margin-left: 200px; /* replaces border */
position: relative; /* fixes jumps and overlapping of 2.column */
}
...and the problems should be gone since margins are always transparent
anyway, even in IE/win.
Adding 'position: relative' to #outer gives IE something to hold on to
when 'position: relative' is applied to the floating #column1 - all
relatively speaking in the very special MS-only language, of course :-)
No hacks needed, since other browsers are undisturbed by all this.
I think that's all...
regards
Georg
--
http://www.gunlaug.no
Georg,
Thanks for the idea. It works fine in NS FF, but in IE the left column is
now gone.
Thank you,
Aftershock Web Design, Inc.
by: Stan Winchester
President/Developer
http://www.aftershockweb.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] transparent background issue with IE
Holly Bergevin wrote:
From: Stan Winchester [EMAIL PROTECTED]
http://www.aftershockweb.net/bd/asian-herbs/test/
It works fine in NS FF, but in IE the left column is now gone.
I think that #inner needs {position: relative;} now. You can probably
remove that property from #outer.
Holly is correct.
#inner {position: relative;} does work properly - with or without
'position: relative' on #outer.
I had inadvertently double-fixed the positioning-bug and responded
with an incomplete solution to the overlap-problem - sorry about that.
Thanks! That did it!
Thank you,
Aftershock Web Design, Inc.
by: Stan Winchester
President/Developer
http://www.aftershockweb.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] transparent background issue with IE
Using FF 1.5 NS 8 the div tag id outer I've set the background-color to transparent it renders as I wanted, but in IE 6 shows the background black (look under the FAQ button - My client insist on using the graphic button menu). It seemed the black is coming from the color selector in the body tag; if I change the body color to red it shows red, but if I change it to transparent it shows black. I'm not sure what to do. Here is html: http://www.aftershockweb.net/bd/asian-herbs/test/ Here is the style sheet: http://www.aftershockweb.net/bd/asian-herbs/test/assets/styles.css Thank you, Aftershock Web Design, Inc. by: Stan Winchester President/Developer http://www.aftershockweb.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Great Book/Tutorial to learn CSS Layout
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Zoe M. Gillenwater Sent: Friday, January 20, 2006 1:17 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Great Book/Tutorial to learn CSS Layout - Was: position: relative causing positioning and display problems in class Christian Montoya wrote: A nitpick: CSS doesn't have attributes (HTML does). CSS has rules, selectors, declarations, properties, values, units, etc, but no attributes. Our wiki has a good list of CSS books. Please update this page with your recommendations: http://css-discuss.incutio.com/?page=GoodBooks -- Christian, Thank you for the clarification. After reading suggested references earlier in this thread I realized my terminology was in error. Thank you for the added link to other good books! Thank you, Aftershock Web Design, Inc. by: Stan Winchester President/Developer http://www.aftershockweb.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Great Book/Tutorial to learn CSS Layout - Was:position: relative causing positioning and display problems in class
I want to thank everyone for all the leads for good CSS learning materials. Thank you, Aftershock Web Design, Inc. by: Stan Winchester President/Developer http://www.aftershockweb.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Great Book/Tutorial to learn CSS Layout - Was: position: relative causing positioning and display problems in class
Ricky, Thanks for the link to the CSS dropdown menu! http://www.alistapart.com/articles/horizdropdowns I also found this one: http://www.howtocreate.co.uk/tutorials/testMenu.html which allows nested menus beyond 1 nested level. I think the most important thing I can do is learn css from the ground up which is why I would like a GREAT book/tutorial on learning the basics on css layout. I also need a great reference source to understand all attributes. I would appreciate any input as to which books/tutorials can get a beginner up to speed quickly, and also need a great reference book or web site. I want to understand the mechanics of how css works, IE bugs, so I am able to retain as many of the precious remaining hairs on my head. Thank you, Aftershock Web Design, Inc. by: Stan Winchester President/Developer http://www.aftershockweb.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
