Re: [css-d] Resend: margin-left 200px fails in IE7 for a 2 column float fluid layout
Philippe Wittenbergh wrote:
On Jul 24, 2009, at 10:51 PM, Don Spark wrote:
I probably have a basic IE browser bug affecting floats and or
margins. It would be great to get a fix for this (#1.) margin-left
200px not working in MSIE7(5.5 and 6 too) and identify the bug so I
understand it going forward. The CSS in question is at the bottom of
this email. There are two other bugs (#2 and #3) I am trying fix at
the moment if anyone knows.
Here is a screenshot showing bug
http://modernia.net/oh/7-22msie7-xp.png
The address of this 'Ohlone' layout template is
http://www.modernia.net/oh/5/
The parent of #content is a 'hasLayout' container (because of
overflow:hidden). This kinda swallows the margin of the first inflow
kid. That is the left-margin vanishes into thin air.
Hello Phillip,
Not in this case. hasLayout usually swallows the default margins of
descendant elements. In Don's case the margin-left is still present.
The overflow:hidden is apparently used to contain floats. Maybe choose
another technique ? Inserting an hr that clears the whole block as
last element in #container ? That would even be semantic...
http://www.satzansatz.de/cssd/onhavinglayout.html#prop
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
In Don's case overflow:hidden does not seem to be disturbing IE7-. What
is happening is that the float (triggering hasLayout) is being
positioned by it *nearest ancestor with hasLayout* [1]. Microsoft states
this about hasLayout.
In general, elements in Internet Explorer's Dynamic HTML engine are not
responsible for arranging themselves. A div or a p element may have a
position within the source-order and flow of the document, but their
contents are arranged by their nearest ancestor with a layout
(frequently body). These elements rely on the ancestor layout to do all
the heavy lifting of determining size and measurement information for
them.
In Don's case the float div.content is being positioned by its nearest
ancestor with hasLayout which is div#container. Here is a basic test case.
http://css-class.com/test/bugs/ie/ie-float-right-expansion-bug1a.htm
Please note that this in this case, the nearest ancestor with hasLayout
is the body element. When div#content gains hasLayout the layout seems
to work as intended.
http://css-class.com/test/bugs/ie/ie-float-right-expansion-bug1b.htm
When an overflow:hidden container is added the positioning is the same
as the first test case (1a) and the same bug is noticed.
http://css-class.com/test/bugs/ie/ie-float-right-expansion-bug1c.htm
Again when div#content gains hasLayout (the child of element with
overflow:hidden) the layout seems to work as intended. The positioning
is the same as the first second test case (1c)
http://css-class.com/test/bugs/ie/ie-float-right-expansion-bug1d.htm
As a test I tried the same in reversed, testing float:left.
http://css-class.com/test/bugs/ie/ie-float-left-expansion-bug1a.htm
Now in this instance the margin-right:200px extends outside the
viewport. This is interesting since a float filled with inline content
in normal flow mixed with this bug causes a hasLayout container, the
body element to expand outside the viewport since the
margin-right:200px is still coming into play. The veiwport itself acts
as a quasi element with some layout function which the float:left is
contained by.
Don, I think this may fix your layout but be warned, adding hasLayout
may cause other issues.
*+html #content {height:1%;} /* fix for IE7 */
* html #content {height:1%;} /* fix for IE6- */
1. http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
http://www.uoguelph.ca/mcb/test/index.shtml http://www.uoguelph.ca/mcb/test/css/mcb2009.css http://www.uoguelph.ca/mcb/test/css/ie6-hacks.css http://www.uoguelph.ca/mcb/test/css/ie7-hacks.css One problem remains, as far as I can see - that's the white border on the #globalnav. I think that is due to the border: transparent ... on the 'a' selector. IE 6 does not understand this. I suggest using the color code instead. David, thank you for checking back in. I was sort of getting set to stop worrying about this thing in ie6 - it pretty much is there in that browser, and, well, you know - but if I can fix that issue that would be great. I didn't realize that there is a colour code for transparent! Do you happen to know the hex? P.S. Your #footer is 100% wide plus 20px of padding, throwing a horizontal scrollbar. I don't think you need that width, unless older IE needs 'hasLayout' ack. It was a vestigial width, like an appendix, left over from earlier messing around with the look. I took it out. I appreciate you finding that. Thanks for your help, and for being another set of eyes on this, Sandy __ css-discuss [cs...@lists.css-discuss.org] 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] css-d Digest, Vol 80, Issue 15 (Is there such a thing as a sub class (in css not society))
css-d-requ...@lists.css-discuss.org wrote:
16. Re: Is there such a thing as a sub class (in css not society)
(David Dorward)
You can combine multiple classes selectors too:
.comment.wide { }
But support is lacking in IE6
Thanks David. That was just what I was looking for.
I'll deal with IE6 in some way. I've resigned myself to getting the
layout near perfect in IE7 and near enough in IE6 anyway.
--
Kind Regards
Chris Price
Choctaw
chris.pr...@choctaw.co.uk mailto:chris.pr...@choctaw.co.uk
www.choctaw.co.uk http://www.choctaw.co.uk
Tel. 01524 825 245
Mob. 0777 629 0227
Choctaw Media
Fertile Ground for Websites
Follow me on Twitter http://twitter.com/choctaw
Catch up with me on LinkedIn http://www.linkedin.com/in/spoonfulofdreams
Its a Living Thing~~
Sent on behalf of Choctaw Media Ltd
~~
Choctaw Media Limited is a company registered in
England and Wales with company number 04627649
Registered Office: Priory Close, St Mary's Gate,
Lancaster LA1 1XB, United Kingdom.
__
css-discuss [cs...@lists.css-discuss.org]
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] Icky image edges: resolution, sizing
Hello [quote=Tim] IE6 doesn't support PNG transparency... [/quote] Whenever I've needed full PNG support for a project I've used the fix available at http://www.twinhelix.com/css/iepngfix/. Applied via targeted conditional CSS I've found it very effective. Hope that helps Barry __ css-discuss [cs...@lists.css-discuss.org] 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] stand-down :: peekaboo?
Repeatedly clicking the digit navigation /or/ the images will eventually throw a blank page. Reload will bring back the page and its content. Reproducible always in: Browser: IE/6.0 OS: Mac 10.4 Parallels XP (standalone and ieTester) PC XP (standalone and ieTester) uri http://chelseacreekstudio.com/dl/ css http://chelseacreekstudio.com/dl/css/style.css Now what I'll do? As ever, Westmoreland __ css-discuss [cs...@lists.css-discuss.org] 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] stand-down :: peekaboo?
Repeatedly clicking the digit navigation /or/ the images will eventually throw a blank page. Reload will bring back the page and its content. Reproducible always in: Browser: IE/6.0 OS: Mac 10.4 Parallels XP (standalone and ieTester) PC XP (standalone and ieTester) uri http://chelseacreekstudio.com/dl/ css http://chelseacreekstudio.com/dl/css/style.css I have read and re-read the post title, just to see if, with David Laakso, there were no RE: before the subject. I have tried to reproduce it, but all seems all right here on the following scenario: ieTester - IE6 - XP Also ok in ieTester - IE6 - Vista I have clicked like a fool. Never seen a blank page. Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] 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] question on fix for IE6 min-width issue
I recently added an javascript expression to an IE6-specific style sheet
to fix the min-width issue (www.acrightsize.com). Of the many solutions
I found, I used this one:
http://www.visibilityinherit.com/code/ie6-min-max-height-width.php
The author describes a special version for the body element:
body {
width:expression(d=document.compatMode==CSS1Compat?documentElement:document)(d.clientWidth501?500px:auto);
}
What does the first part of this expression accomplish?
Note: there's a thread in css-discuss that suggests dynamic properties
don't work well on the body element, which I'm guessing is why a special
expression is required. I'd just like to understand a little more about
what I've added to my site.
http://archivist.incutio.com/viewlist/css-discuss/42288
Thanks,
David
__
css-discuss [cs...@lists.css-discuss.org]
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] stand-down :: peekaboo?
MEM wrote: Repeatedly clicking the digit navigation /or/ the images will eventually throw a blank page. Reload will bring back the page and its content. Reproducible always in: Browser: IE/6.0 OS: Mac 10.4 Parallels XP (standalone and ieTester) PC XP (standalone and ieTester) uri http://chelseacreekstudio.com/dl/ css http://chelseacreekstudio.com/dl/css/style.css I have read and re-read the post title, just to see if, with David Laakso, there were no RE: before the subject. I have tried to reproduce it, but all seems all right here on the following scenario: ieTester - IE6 - XP Also ok in ieTester - IE6 - Vista I have clicked like a fool. Never seen a blank page. Regards, Márcio The issue explained above is still a problem on this end in XP IE/6.0. Thank you for your reply. __ css-discuss [cs...@lists.css-discuss.org] 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] Resend: margin-left 200px fails in IE7 for a 2 column float fluid layout
Thanks all,
Alan Gresleya...@css-class.com wrote:
Don, I think this may fix your layout but be warned, adding hasLayout may
cause other issues.
*+html #content {height:1%;} /* fix for IE7 */
* html #content {height:1%;} /* fix for IE6- */
This fix did not change solved the positioning problem between the
sidebar area and the content area in IE7 (or IE5-6 but those not my
high priority).
This fix solve one problem putting #content where it belongs in IE5-6.
Previously, it was stretched to the viewport.
(using browsershots.org because I am on a MAC)
Wow Alan. Sounds like you are writing a good CSS book. Any suggestions
to modifying my approach here that will have fewer issues? In it's
present state, I am just working to establish an optimum CSS layout
for a blog/cms with a static sidebar and a fluid body, header, footer
Philippe Wittenberghe...@l-c-n.com wrote:
The parent of #content is a 'hasLayout' container (because of
overflow:hidden)
Maybe choose another technique? Inserting an hr that clears the whole block
as last element in #container? That would even be semantic...
I am all for trying out a different technique here. I am looking for
the best approach possible for this blog/cms. This CSS will be a
workhorse for a schools website. I am surprised how challenging a
basic css layout still is cross-browser. But, it's what we have.
David Laaksoda...@chelseacreekstudio.com wrote:
2/ Can the markup be changed? 3/ Does it really need to be that complex (bad
case of too many ids/classes)?
My 'Ohlone' CSS layout template is a child-theme of a wordpress theme
framework from themehybrid.com. That may explain some of the Markup
complexity which can be changed/over-ridden in the child theme. So, I
can simplify markup that way.
__
css-discuss [cs...@lists.css-discuss.org]
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] question on fix for IE6 min-width issue
David Butler wrote:
body { width:expression(d=document.compatMode==CSS1Compat?
documentElement:document) (d.clientWidth501?500px:auto);}
What does the first part of this expression accomplish?
You mean the part of the expression that checks if IE6 is in standard
mode (CSS1 compatibility mode) or not ?
In that particular case the check is necessary because IE6 won't handle
the rest of the expression as intended when in Quirks mode.
I use such a 'compat-check' in most IE-expressions, to make IE6 switch
between arguments tailored for Standards or Quirks mode - making the
expression either mode-dependent or mode-independent, depending on the
actual case.
Getting the arguments wrong for the mode may otherwise make IE6 freeze
up or go into endless loops.
See...
http://www.gunlaug.no/contents/wd_additions_14.html
...for examples and some more info.
regards
Georg
__
css-discuss [cs...@lists.css-discuss.org]
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] background-color : transparent; showing up as white in ie6 7 and AOL 9.1
On Jul 26, 2009, at 3:09 AM, Sandy wrote: I didn't realize that there is a colour code for transparent! Do you happen to know the hex? http://www.w3.org/TR/css3-color/#transparent It cannot be translated to hex (hex cannot express transparency). As the spec mentions, it is functionally equivalent to (and has a computed value of) rgba(0,0,0,0). Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] 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] serious site issues-cont'd
Lisa Wilcox wrote: Group, http://www.webgirlwebdesigns.com/testing/StPaulsv1/index.html In IE 8 also on some of the three column pages, everything shifts to the left and doesn't center. Thanks Lisa On this specific page: http://www.webgirlwebdesigns.com/testing/StPaulsv1/christianformation.html A Byte-order mark [1] precedes the doctype; consequently, IE is in quirksmode and throws your stuff left. [1] http://en.wikipedia.org/wiki/Byte-order_mark Dreamweaver, or whatever editor you are using, may be inserting it. Dreamweaver can be be stooped from doing this by changing something (I do not know what) in the preferences. Or, you can delete the BOM, and save the document in Notepad +++ . __ css-discuss [cs...@lists.css-discuss.org] 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/
