Re: [css-d] site check -- IE6 problems
Bill and Chris, Thanks for your help. I was able to implement the expression value in the CSS as suggested, with a conditional comment targeting IE6. (I realize that using a conditional style sheet, probably was not necessary, but I felt strongly about keeping the *patch* focused on the one problem browser.) I now understand both of your comments regarding the AP divs, especially nested AP divs, and the pitfalls that can come with using them. As time permits, I am going to use that site as a reference point for simplifying the layout DIVs and trying to eliminate -- or at least minimize -- the use of the AP divs. Thanks again for helping me get my bearings on that. ...Rob Emenecker Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com __ 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/
[css-d] site check -- IE6 problems
Hi all, The following site is working fine in IE7 and Firefox 2, but breaks down in IE6. Specifically the page sections containing the navigation bar and the content, are not filling down the page and stopping at the footer, along with scroll bars not appearing per the overflow: auto property on a containing content div. Can anyone shed light as to what I'm doing, or not doing, that is causing this to breakdown!? Thanks, Rob __ 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] site check -- IE6 problems
Okay... it's definitely one of those days... here is the URL that was missing from my previous missive... www.areteam.com ...Rob -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rob Emenecker Sent: Thursday, May 15, 2008 10:18 AM To: css-d@lists.css-discuss.org Subject: [css-d] site check -- IE6 problems Hi all, The following site is working fine in IE7 and Firefox 2, but breaks down in IE6. Specifically the page sections containing the navigation bar and the content, are not filling down the page and stopping at the footer, along with scroll bars not appearing per the overflow: auto property on a containing content div. Can anyone shed light as to what I'm doing, or not doing, that is causing this to breakdown!? Thanks, Rob __ 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] site check -- IE6 problems
Hi Rob,
You're using a lot of absolute positioning, which can be tricky. It
looks like you're trying to tile an image on #page-bg-body a la faux
columns. But check out what happens when you add a border to it:
style
#page-bg-body {border:1px solid red;}
/style
In IE, it has no height because it has no children still in document
flow. Since it has no height, it won't tile down the length of the page
as you expected.
I would try to simplify your CSS a bit by losing the absolute
positioning and using floats instead. The design you have should require
simple enough CSS. I would tile your image down on the body element.
Center the #page-bg-body element on the page and then float #body-navbar
left and #body-contents right.
Since you want the content to extend down the length of the page, try
applying a height of 100% to #page-bg-body and position it so that it
runs the length of the page, top to bottom. Then apply enough padding to
the top and bottom to accommodate the masthead and footer areas,
respectively. Position the masthead and footer areas absolutely, and you
should have a design that will be more resilient.
You could always use a template that has already been developed and
adapt it to your own use, I think the following is pretty much what you
need:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
Apply Cederholm's Faux Column technique, adjust the height of the main
content and nav panes to extend to the bottom and you should be good.
Hope that helps,
Chris
http://www.nextdesigns.ca
Rob Emenecker wrote:
Okay... it's definitely one of those days... here is the URL that was
missing from my previous missive...
www.areteam.com
...Rob
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Rob
Emenecker
Sent: Thursday, May 15, 2008 10:18 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] site check -- IE6 problems
Hi all,
The following site is working fine in IE7 and Firefox 2, but
breaks down in IE6. Specifically the page sections containing
the navigation bar and the content, are not filling down the
page and stopping at the footer, along with scroll bars not
appearing per the overflow: auto property on a containing
content div. Can anyone shed light as to what I'm doing, or
not doing, that is causing this to breakdown!?
Thanks,
Rob
__
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/
__
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] site check -- IE6 problems
Hi Chris,
Thanks for the info.
The general layout of the site, and the use of the AP divs, is to accomplish
two very simple -- or what is simple with IE7 and FF2 -- things.
First, the header and the footer regions get glued to the top and bottom
of the viewport. This is working in IE6 okay as well.
Second, that the center navigation bar and content regions, *fill* the
remaining vertical space in the viewport, and that any overflow is clipped
at the start of the footer with a scrollbar to handle viewing of the
overflow.
I create two temporary pages for acid testing:
www.areteam.com/ie6-short.html and www.areteam.com/ie6-long.html. These are
copies of the existing HOME and PHILOSOPHY pages, however they are devoid of
any PHP and include an ancillary ie6.css style sheet for shits-and-giggles
to figure this problem out.
I'm not sure I *completely* understand your comment of...
style
#page-bg-body {border:1px solid red;} /style
In IE, it has no height because it has no children still in
document flow. Since it has no height, it won't tile down the
length of the page as you expected.
I realize that a DIV will collapse down based on it's content, however why
then does the HEIGHT:100% properly address the situation -- at least
visually with respect to the background image -- on IE7 and FF2, whereas IE6
does not? Does IE6 treat that property differently.
Holding aside the issue of the descendant DIVs' contents not filling the
viewpoint, there are some issues, that are also coming into play...
A) The background image of DIV#PAGE-BG-BODY is not appearing at all. This
background includes the white area on the left and right sides of vertical
divider bar, with a drop shadow off of the right edge. You can see this in
the masthead -- note the drop shadow off of the right-hand side -- but not
in the BODY area. (This is the most puzzling aspect of this.) In addition,
when I add indicate borders to the three problematic DIVs, I can see that
the space they occupy should not cause any clipping of the background
graphic.
B) On long pages (see: www.areteam.com/ie6-long.htm) the content spills out
of the containing DIV. This seems to go back to the HEIGHT property issue.
IE6 seems to ignore the containing DIV's HEIGHT and OVERFLOW properties. It
also seems to ingore the BOTTOM property -- when I did try it, and simply
let's anything spill out. The only exception I have found is if I include a
specific measurement in the HEIGHT property.
Now that last bit would work just fine if I could dynamically calculate the
height based on (viewport available height LESS height of header and footer
regions). This is specifically why the AP DIVs came into play, because I did
not want to have to dynamically manipulate the DIV heights via JavaScript or
PHP.
My goal is to get this working the same on IE6 as it does in IE7 and FF2.
This seems like something that should be fairly straight forward, but it's
not. (I can understand having it degrade gracefully, but I'm not necessarily
accepting that path for IE6. IE5? Sure. NN4? Sure. IE6...... no.)
As far as I can see, this comes down to addressing the styles on three
elements: DIV#PAGE-BG-BODY, DIV#BODY-NAVBAR, and DIV#BODY-CONTENTS. Right?
Last, I do know that the BOTTOM property is being honored, where I'm not
trying to stretch something to fill the viewport, because the footer is
fixed to the bottom of the viewport as it should be.
Now I'm just beating about on blind garden paths. So what is suggested as a
next step to addressing this to achieve the desired effect?
...Rob
__
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] site check -- IE6 problems
Last, I do know that the BOTTOM property is being honored, where I'm not trying to stretch something to fill the viewport, because the footer is fixed to the bottom of the viewport as it should be. Hi Rob, Nice site. I like the overall look and feel, now...onto your troubles. Your problem with this design begins with #page-bg-body which does not have an explicit height setting. IE6 will honor top OR bottom settings with absolute positioned boxes, but as you're finding out, it does not calculate height when both properties are set. This breaks your layout because the #body-contents box which DOES have a height set explicitly in your style sheet cannot calculate 100% of NULL, which is the value of the #page-bg-body box. Thus in IE6, it defaults to visible overflow. In this case, you might want to try using CSS expressions to feed IE6 a line of style that it could evaluate, thus calculating the height it should be, minus your header and footer (I didn't analyze these components very closely so forgive me if the IDs are wrong). If you have trouble finding info on CSS expressions in IE or with creating the expression code, let me know -- I should be able to whip something up for you. Hope it helps! Bill Brown TheHolierGrail.com __ 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] site check -- IE6 problems
Cool Bill, Thanks! That gives me a possible sense of direction, which is what I was looking for. I'll let you know how it works out. (Worst case scenario -- as I mentioned to Chris in an off-list message -- is that I could dynamically rewrite the HEIGHT property value in IE6 using Javascript nested in a conditional IE comment. Not what I want to do, but it would be a solution -- of sorts. ...Rob -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bill Brown Sent: Thursday, May 15, 2008 5:44 PM To: Rob Emenecker Cc: css-d@lists.css-discuss.org; 'Chris Hardie' Subject: Re: [css-d] site check -- IE6 problems Last, I do know that the BOTTOM property is being honored, where I'm not trying to stretch something to fill the viewport, because the footer is fixed to the bottom of the viewport as it should be. Hi Rob, Nice site. I like the overall look and feel, now...onto your troubles. Your problem with this design begins with #page-bg-body which does not have an explicit height setting. IE6 will honor top OR bottom settings with absolute positioned boxes, but as you're finding out, it does not calculate height when both properties are set. This breaks your layout because the #body-contents box which DOES have a height set explicitly in your style sheet cannot calculate 100% of NULL, which is the value of the #page-bg-body box. Thus in IE6, it defaults to visible overflow. In this case, you might want to try using CSS expressions to feed IE6 a line of style that it could evaluate, thus calculating the height it should be, minus your header and footer (I didn't analyze these components very closely so forgive me if the IDs are wrong). If you have trouble finding info on CSS expressions in IE or with creating the expression code, let me know -- I should be able to whip something up for you. Hope it helps! Bill Brown TheHolierGrail.com __ 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] Site check ie6 problems
http://ellascreations.com/cat2.html IE7 has problem too..The pictures are overflowing on the texts... Thanks Hakan http://dominor.com On Nov 8, 2007 8:47 AM, 21nasui [EMAIL PROTECTED] wrote: Hello this is my first post... and as everyone else... Im working my way through the css. I am having problems in ie6 displaying one of my product catalog pages I made. Any tips on the ie6 problems or overall css guidance is appreciated. http://ellascreations.com/cat2.html Thank you, Sui __ 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/ __ 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/
[css-d] Site check ie6 problems
Hello this is my first post... and as everyone else... Im working my way through the css. I am having problems in ie6 displaying one of my product catalog pages I made. Any tips on the ie6 problems or overall css guidance is appreciated. http://ellascreations.com/cat2.html Thank you, Sui __ 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] Site check ie6 problems
21nasui wrote:
Any tips on the ie6 problems or overall css guidance is appreciated.
http://ellascreations.com/cat2.html
Not enough space in there, and IE6 doesn't respect any declared dimensions.
Adding / changing to...
.prod_1, .prod_2, .prod_3, .prod_4, .prod_5, .prod_6, .prod_7, .prod_8,
.prod_9, .prod_10 {
height : 240px; overflow: hidden;}
#cproduct br {font-size: 1px; line-height: 0;}
#cproduct {width: auto;}
...will make it hold in both IE6 and IE7.
Doesn't cause problems in other browsers unless resized to above 200% or
so. Provide more height if that's a problem.
Quick description:
Providing a little more height in there, and cutting down and locking
the line-height on the br / , take care of most. Hiding the overflow
will force IE6 to respect dimensions and fix the rest.
#cproduct must not have dimensions or anything IE6 sees as
'hasLayout'[1] triggers, or else it will lose temper and calculations
and blow out the side of the container. That's another example of IE6'
lack of respect for dimensions.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
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/
