Re: [css-d] IE Clearing Bug
James Alvies wrote:
Hi Folks,
I've been working on an IE clearing bug for the past 3 days and have
exhausted all my patience and knowledge of CSS. I've tried the following
fixes along with my own experimentation:
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
http://www.positioniseverything.net/easyclearing.html
Is there any chance I could get some assistance with this bugger?
The best example (for IE) is located at: http://techsoup-global.org/node/1132
Thank you,
James
You may want to clear the floated column in IE6. Currently you have this.
.clear-block:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear-block {
display: inline-block;
}
The first style rule is the easy clearing method for non IE browsers.
The second style rule causes hasLayout in IE7 thus auto containing of
floats. There's nothing for IE6. Why not just apply a clear to the
footer and move that within the #container or #wrapper in the source.
#footer {clear:left;}
BTW, how do you keep track of all those style sheets, containers and
excess code? You are just making coding a lot more troublesome.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
http://www.wearechange.org/
__
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] IE Clearing Bug
Hi Folks, I've been working on an IE clearing bug for the past 3 days and have exhausted all my patience and knowledge of CSS. I've tried the following fixes along with my own experimentation: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ http://www.positioniseverything.net/easyclearing.html Is there any chance I could get some assistance with this bugger? The best example (for IE) is located at: http://techsoup-global.org/node/1132 Thank you, James __ 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] IE Clearing Bug
James Alvies wrote:
http://techsoup-global.org/node/1132
Looks like a tough one, and a bit too much style to comb through.
If nothing else works out, IE still has respect for the old
clearing-method...
HTML:
br class=clear /
/div !-- /container --
CSS:
br.clear {clear: both;}
regards
Georg
--
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] IE Clearing Bug
James Alvies wrote:
Is there any chance I could get some assistance with this bugger?
http://techsoup-global.org/node/1132
Hi James,
You need a hasLayout fix on your #container element.
#container {zoom:1} should do the trick.
You can test this by visiting your page and entering this into the URL:
javascript:(document.getElementById('container').style.cssText=null)();
Make sure it's all on one line obviously, but that fixed it in my tests.
It's also only a local fix, meaning you can test that to set hasLayout
on an element on the local version you're viewing during development,
but visitors to the page won't benefit unless you include a hard-coded
hasLayout fix in the CSS.
Hope it helps.
--Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
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] IE Clearing Bug
Bill Brown wrote:
http://techsoup-global.org/node/1132
You need a hasLayout fix on your #container element. #container
{zoom:1} should do the trick.
You can test this by visiting your page and entering this into the
URL:
javascript:(document.getElementById('container').style.cssText=null)();
The thing is that IE(6) ignores a '#container {zoom:1}' or any other
'hasLayout' trigger - even when styled inline, and won't react properly
until shaken. A simple attempt to resize fonts (the page uses fixed
fonts, btw) will do the shaking trick, but that's of no use for
anything but testing.
The huge number of stylesheets made me stop debugging and and instead
apply the old clearing-trick, as IE is known to threat a br with
clearing-styles as a special case.
Years have passed since I last had to use it for such cases, so apart
from that one br is enough to make IE react when 'hasLayout' is
triggered on the container, and two subsequent br was needed when
'hasLayout' was not triggered on the container. I've forgotten all the
buggy details that made such a special clearing-trick necessary, so
y'all free to go bug-hunting.
Nowadays I only use the br to cure certain unstable space after
float bugs in IE, since nothing else seems to work on those. IMO the
page in question suffers from a similar instability, but I can't track
down the exact cause.
regards
Georg
--
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] IE Clearing Bug
discuss.org] On Behalf Of Gunlaug Sørtun
Sent: Friday, September 19, 2008 6:11 PM
To: Bill Brown
Cc: James Alvies; css-d@lists.css-discuss.org
Subject: Re: [css-d] IE Clearing Bug
Bill Brown wrote:
http://techsoup-global.org/node/1132
You need a hasLayout fix on your #container element. #container
{zoom:1} should do the trick.
You can test this by visiting your page and entering this into the
URL:
javascript:(document.getElementById('container').style.cssText=null)();
The thing is that IE(6) ignores a '#container {zoom:1}' or any other
'hasLayout' trigger - even when styled inline, and won't react properly
until shaken. A simple attempt to resize fonts (the page uses fixed
fonts, btw) will do the shaking trick, but that's of no use for
anything but testing.
Shaking is sometimes necessary when IE does not draw/redraw some elements
properly (for example with a show/hide script).
In such case I use the following:
document.getElementsByTagName(body)[0].style.zoom=normal;
document.getElementsByTagName(body)[0].style.zoom=1;
--
Regards,
Thierry | http://www.TJKDesign.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/
