Re: [css-d] Falstaff weds Frutiger.
Love it. (Chrome/Android Nexus 4) Ingo Chao Am 06.06.2014 22:08 schrieb David Laakso laakso.davi...@gmail.com: Constructive comments and suggestions on this site are always appreciated. html http://ccstudi.com css http://ccstudi.com/site/css/sisu.css Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ css-discuss [css-d@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-discuss [css-d@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] a media rule without a target media type
According to the CSS3 spec http://www.w3.org/TR/css3-mediaqueries/
@media all { … }
@media { … }
should be equivalent.
Current Firefox and Opera agree, and at least Webkit nightly too.
But current Safari, IE9 and IE 10 disagree, only the first one applies.
http://satzansatz.de/w3/media.html
My questions:
- The second rule, a media rule without a target media type, should be
invalid according to CSS 2.1, right?
- According to CSS3 mediaqueries example 7, an empty media query list
evaluates to true.
So @media { … } became valid in CSS3, correct?
Fun: IE 6,7,8 render both rules.
Thanks,
Ingo
__
css-discuss [css-d@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] IE8, :hover, underline, and generated content
On Wed, May 30, 2012 at 3:27 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
On May 30, 2012, at 2:51 AM, Paceaux wrote:
Did anyone have any thoughts on removing underline from generated content in
the hover state for IE?
I did some checking and it appears that the behavior occurs in all versions
of IE? I'm guessing that this is default behavior for IE, then, to allow
generated content to always inherit the hover state.
It is not a hover problem; in IE, the underline is always propagated to the
generated content - even when the generated element is set to e.g.
display:inline-block. Older Gecko (at least Firefox 3.6) also did that.
That is contrary to what the spec says:
http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Unfortunately, I didn't find a workaround for IE (for older Gecko, you
specify a background-color on the generated content and it would cover the
underline, but that doesn't work in IE.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
Painting the underline with a background does not work in IE8, but
what about a white outline that covers the underline?
a{
text-decoration:none;
}
a:hover, a:focus, a:active{
text-decoration:underline;
}
a[href*=pdf]:after{
display: inline-block;
margin-left: 1ex;
color: #333;
content: (PDF) ;
text-decoration: none;
outline: 2px solid white; /* paint it white, I'd hide that from
none-IE-browsers */
line-height:0.9; /* to be adjusted */
}
a[href*=pdf]:hover:after{
text-decoration:none;
}
__
css-discuss [css-d@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] Dear Theo,
On Sunday, January 1, 2012, David Laakso da...@chelseacreekstudio.com wrote: Send colors your earliest convenience... particularly desperate for Cobalt Blue and Cadmium Yellow Deep. Vincent PS Happy New Year! Happy New Year! :) @Ghodmode: a painter's secret. Ingo __ css-discuss [css-d@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] STILL NEED HELP: @Font-Face Font Chopped OFF by Padding
Assuming you mean the Name/Email inputs, I see the bottom, not the top, is chopped in Chrome/Mac with the font Little Days. With the font-family disabled (falling back to Candara I think) and with padding disabled, the text is somewhat centered. Is this what you mean in your description? Canot compare it to IE9, but in Chrome, the text in the inputs is pushed to the bottom. On Tue, Dec 20, 2011 at 7:00 PM, Elli Vizcaino elli...@yahoo.com wrote: Hi Everyone, I still need help w this issue (please see previous post copied/pasted below). One suggestion given, didn't exactly work and no further explanation was provided. Any one know why this is happening and how I can resolve it? Once again TIA! Elli Subject: [css-d] @Font-Face Font Chopped OFF by Padding Hello Gang, I'm using a custom font for the input values of a newsletter sign-up form (found in the sidebar) and the top of the font gets cut off, despite the fact that I've declared the box-sizing to border-box. If I use the default content-box value and adjust the height to accommodate the padding it still gets cut off, though less in FF3.6. The other thing I notice, is that I get different results in different browsers. it doesn't push the text down to where I want it (in Chrome and FF), I'd like the text to sit somewhat in the middle of the input field's vertical space. But in IE9 it pushes it down to the bottom border of the background image. I've never encounter this issue before with padding but I'm guessing it's due to the input element itself? I did declare the element to display: block. http://www.e7flux.com/clients/sof/ Suggestions on how I can rectify this more than welcome! TIA! Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com __ css-discuss [css-d@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-discuss [css-d@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] Webkit Bug...?
On Thu, Oct 27, 2011 at 9:03 PM, Kevin A. Cameron kevinacame...@gmail.com wrote: Is this a bug in Webkit? Opera shows the same. Check the 3rd item in the 2nd ordered list (or search for Use the W, A, S, and D): http://na.cityofheroes.com/en/freedom/user-guide/index.php In other browsers the list-item bullet - 3. - is to the left of the image, in Webkit browsers the floated image is to the left of the bullet. ... I think the exact position of the marker next to a float is undefined. Ingo __ css-discuss [css-d@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] Fit to width
Jukka already presented a solution without the float, but with a css table.
In your setting, you wanted the floating div to have a shrink-to-fit
width (CSS2.1: 10.3.5) that equals to the width of the image, so the
width of the text without breaks must not become the preferred width
of the float.
I can't think of a good solution. You may position the p absolutely in
its static position (without top, left, ...) to take it out of the
float and reserve some vertical space for this block. By doing so, the
p cannot interfere with the shrink-to-fit calculation (but it would
overflow the float if a word becomes very long).
But that is of course just experimental and not possible in a complex layout.
Ingo
!DOCTYPE htmlhtmlheadtitle/titlestyle div { float: left;
background: blue; position: relative; padding: 5px 0 3em 0; } img {
width: 100px; height: 25px; background: yellow; display: block; } p {
position: absolute; background: fuchsia; margin: 0;
}/style/headbody div img
src=http://satzansatz.de/img/semi404040.gif; pto the aid of the
party/p /div/body/html
__
css-discuss [css-d@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] Showing and hiding table columns
On Wednesday, September 28, 2011, Tom Livingston tom...@gmail.com wrote: List, What would be the best way to show and hide table columns based on media queries. On this page: http://proof.mlinc.com/tl/cssd2/ i'd like to hide a couple columns in the table when the width gets narrow. Hiding isn't the problem - display:none; - but showing them seems troublesome. display:table-cell came to mind, but everyone's favorite older browsers won't play. Aside from having 2 separate tables, is there a solid way to do this? I tried some hacks to try to make display:table-cell; work, but was unsuccessful. ... I think IE 8 uses display: block for those table structures. Ingo __ css-discuss [css-d@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] Query on P:First-letter
On Wednesday, September 28, 2011, Philip TAYLOR (Webmaster, Ret'd)
p.tay...@rhul.ac.uk wrote:
Could anyone explain why the leading M of the following paragraph :
p style=margin-top: 2.3em!-- #BeginLibraryItem
/Library/Ugandan infant in a laundry basket.lbi --img
id=Infant-Uganda-001
src=Resources/Images/Photographs/Web/Scaled/240/Infant-Uganda.001.jpg
longdesc=../Resources/Images/Photographs/Web/Longdesc/Infant-Uganda-001.html
alt=Ugandan infant in a laundry basket width=320 height=240!--
#EndLibraryItem --Mspan class=Keyphraseany of us/span are lucky
enough to take anaesthesia for granted. Surely a world without safe
anaesthesia has long been confined to the history booksnbsp;?nbsp; Not in
the developing world, where hospitals lack suitable equipment, medicines and
trained staff./p
is not matched by this CSS rule :
DIV.Content P:first-letter {color: red; letter-spacing: 0.075em}
...
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#first-letter
The ::first-letter pseudo-element represents the first letter of an
element, if it is not preceded by any other content (such as images or
inline tables) on its line.
The first-letter CSS3 spec is a quite interesting read. I did not know this:
The first letter must occur on the first formatted line. For example, in
this HTML fragment: pbrFirst... the first line doesn't contain any
letters and ::first-letter doesn't match anything (assuming the default
style for br in HTML 4). In particular, it does not match the F of
First.
Ingo
__
css-discuss [css-d@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] Query on P:First-letter
On Wednesday, September 28, 2011, Philippe Wittenbergh e...@l-c-n.com wrote: On Sep 28, 2011, at 9:10 AM, Ingo Chao wrote: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#first-letter The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line. Yes, but... what with a floated image ? http://dev.l-c-n.com/_temp/first-letter-img.html IE 9, WebKit and Opera style the first-letter in the 3rd and 4th paragraph. Gecko does not Philippe Ah. Did not had a look into that page, sorry. A floated image does not sit on the linebox where the first letter lives in. The presence of the float just shortens the linebox. However, the phrase on its line is a bit difficult, since the float spec uses a similar phrase on the same line for a different thing: http://www.w3.org/TR/CSS2/visuren.html#floats The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. Ingo Ingo __ css-discuss [css-d@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] IE 9, media queries
2011/5/22 Philippe Wittenbergh e...@l-c-n.com: The other day, I received an IE 9 screenshot from one of my sites taken with the Netrenderer service. The screenshot showed missing images. http://ipinfo.info/netrenderer/index.php Investigating a little with a simple test case shows the failure occurring due to media queries. http://l-c-n.com/test1.html http://l-c-n.com/test2.html The two pages load a nearly identical stylesheet. test2 wraps the whole thing in a media query. IE 9 at the Netrenderer service fails to load the images for the second test case. Verifying this with Browsercam shows both pages correctly. I haven't tested BrowserShots. Question: has anyone seen IE 9 failing this kind of things or would that be some buggy set-up on the Netrenderer service's side ? (I don't have direct access to IE 9 to test extensively myself) Native IE9/Win7 shows test2 correctly. http://satzansatz.de/phw/mediaie9.png My server sends a IE=Edge HTTP header, IE 9 should be in strict mode anyway. Yes, IE9 standards mode. Ingo __ css-discuss [css-d@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] Can a DIV be made invisible to mouse clicks?
Am Sonntag, 24. April 2011 schrieb Martin G ebisumar...@gmail.com: ... So, in the end, my question is, can I lay one DIV on top of another without having the top div trapping mouse events that I want the DIV underneath to catch? you could play with https://developer.mozilla.org/en/css/pointer-events and report back if and in what browser it worked for you. hth, Ingo __ css-discuss [css-d@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] Reflection effect
Am Samstag, 16. April 2011 schrieb Philippe Wittenbergh e...@l-c-n.com: On Apr 16, 2011, at 4:13 AM, Kevin A. Cameron wrote: This raises an interesting question: the reflected text in HTML or CSS? I'd argue that the reflection is decoration and only decoration, and thus part of the stylesheet. Some hate the effect [1], therefore, it is decoration. Ingo [1] Would someone please mop the floor? http://csscreator.com/node/21265 __ css-discuss [css-d@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] br { content: '\A'; white-space: pre; } in Webkit
HTML5:Rendering:Punctuation and decorations
says
br { content: '\A'; white-space: pre; }
But this doesn't seem to work in Safari and Chrome:
http://www.satzansatz.de/w3/break.html
Who is wrong?
Ingo
__
css-discuss [css-d@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] br { content: '\A'; white-space: pre; } in Webkit
2011/1/19 Jukka K. Korpela jkorp...@cs.tut.fi: Barney Carroll wrote: Without getting into the murky, esoteric waters of the nature of br/ and text node layout handling, from my mucking about, non-pseudo elements don't seem to accept any content value in webkit. According to the CSS 2.1 draft, the current de facto almost-standard for CSS, the content property only applies to :before and :after pseudoelements. The HTML5 draft makes free references to other drafts, such as CSS 3 drafts. It should not surprise the least that things there just don't work in browsers at present. If the content property does not apply on br in Webkit, why does it cause a bug in Webkit then? Removing the content property in Webkit inspector gives a line break. Sorry, I didn't try that before. I think its a Webkit issue, of course a rather academic one. Thanks to all for having a look. Best Ingo __ css-discuss [css-d@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] br { content: '\A'; white-space: pre; } in Webkit
2011/1/19, Alan Gresley a...@css-class.com: So it does makes me wonder why you would even use content: \A to begin with when that's the UA CSS default behavior for br anyway, excluding Safari and it's bug. Just playing with the HTML5 UA default style sheet. HTML5:Rendering says: The CSS rules given in these subsections are, except where otherwise specified, expected to be used as part of the user-agent level style sheet defaults for all documents that contain HTML elements. Standardizing an UA's stylesheet and sharing a CSS-reset aim for the same, to even discrepancies out between browser defaults. But CSS resets seem to be more of practical use. Ingo __ css-discuss [css-d@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] adding a shadow
IE5.5 and up support a proprietary DropShadow filter, technically, this is more complex, but not an image. Does that fit your requirements? Anyhow, I'd vote for css3 and a degradation in IE. (Or, no shadow for the base and progressively enhance it with CSS3) Ingo 2011/1/2, Lisa Frost birdiefr...@gmail.com: Hi Philippe, I need it to be supported by all browsers and old ones too, so my question really is do i need to use images to accomplish this? Lisa CSS3 box-shadow http://www.w3.org/TR/css3-background/#the-box-shadow (not supported by IE 8 and older) __ 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-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] is style=float: left identical to align=left
for images, in standards mode, for ie6 and newer, is style=float: left identical to align=left , even in complex layouts? background is, someone required to support legacy HTML content fragments -- or to migrate it, as long as the rendered result is identical, to a new technology named CSS. best would be to have a link to a doc that says yes, all implementations use float for that, internally. Thanks Ingo __ 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] is style=float: left identical to align=left
for images, in standards mode, for ie6 and newer, is style=float: left identical to align=left , even in complex layouts? background is, someone required to support legacy HTML content fragments -- or to migrate it, as long as the rendered result is identical, to a new technology named CSS. best would be to have a link to a doc that says yes, all implementations use float for that, internally. Thanks Ingo __ 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] is style=float: left identical to align=left
Am Freitag, 17. Dezember 2010 schrieb Philippe Wittenbergh e...@l-c-n.com: On Dec 17, 2010, at 7:14 AM, Ingo Chao wrote: for images, in standards mode, for ie6 and newer, is style=float: left identical to align=left , even in complex layouts? ... Yes, that is the case in all browsers. I don't have an all encompassing doc, except for the html5 spec http://dev.w3.org/html5/spec/Overview.html#alignment http://dev.w3.org/html5/spec/Overview.html#attributes-for-embedded-content-and-images For Gecko it is coded in the UA stylesheet; WebKit has it hardcoded somewhere, I forgot where though http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css Philippe Perfect. Thank you, Philippe! Ingo __ 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] Safari 5 / Win XP crashing ?
2010/7/13 Philippe Wittenbergh e...@l-c-n.com: On Jul 13, 2010, at 12:59 PM, Al Sparber wrote: It crashes both browsers (Win Vista 64-bit). I assume on Windows 7, as well. Thanks for checking, Al. I filed bug 42136. https://bugs.webkit.org/show_bug.cgi?id=42136 (funny thing - while I can't repro this crash on OS X 10.6 with a browser (Safari 5 / WebKit nightly / G.Chrome 6 dev), I managed to crash Quicklook while previewing the test file in the Finder) crashes Safari 5.0 (6533.16) on Mac OS X 10.6.3 Google Chrome (5.0.375.99) on Mac OS X 10.6.3 (oh no!) does not crash Safari Nightly (6533.16, r63063) on Mac OS X 10.6.3 Ingo __ 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] Elements that create new block formatting contexts
2010/5/4 Philippe Wittenbergh e...@l-c-n.com: On May 4, 2010, at 12:20 PM, Philippe Wittenbergh wrote: HTML5 4.10 gives a complete description of form controls (but, as expected, not really about their display). http://www.w3.org/TR/html5/forms.html#forms uhu, I should've re-read html5:10 http://www.w3.org/TR/html5/the-xhtml-syntax.html#the-fieldset-element-0 'The fieldset element is expected to establish a new block formatting context.' ah, HTML5, spec of the specs, comes to the aid. Does this obsolete the CSS3 term 'flow root' then? http://www.w3.org/TR/css3-box/#block-level0 Ingo __ 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] Elements that create new block formatting contexts
2010/5/3 Thierry Koblentz n...@tjkdesign.com: I've been trying to find mention in the specs of fieldsets creating new block formatting contexts, but I can't find the reference anywhere. It is not specified, but fieldsets create block formatting contexts. https://bugs.webkit.org/show_bug.cgi?id=3898#c9 HTH Ingo __ 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] parenting issues
The specificity was already discussed. This aside, I think that #page was chosen as too specific. You may introduce a second class body class=about corporate id=p003 would be the third page of the about section in the coporate pages part of your site. I'd use the id just for one unique page. Otherwise, it is a class. HTH Ingo __ 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] Nested floats in IE6/7
2010/3/28 Bob Bob superjunkymon...@live.com: ... Is it bad practice to nest floats with the width:auto float:left on the container + float:right on the child? I've read that every browser handles this differently but, on a test case, IE8 + FF3.6 + Opera 10.51 have the same results. It is outdated information? :) If it's ok to nest floats, how can I fix the problem elegantly in older browsers? ( http://css-class.com/test/bugs/ie/float-auto-width-expansion-bug.htm ) It is ok to nest floats. For IE7 and IE6, a widthless container float with layout descendants might not shrink to fit. http://dev.l-c-n.com/IEW2-bugs/shrinkwrap.php There is no elegant solution, so you'd have to post an URL of your page in question. Thanks, Ingo __ 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] vertical-align on inline-block
2010/3/28 Yang Zhang yanghates...@gmail.com: ... div class=wrapper style=vertical-align: bottom; height: 100px div class=inner style=vertical-align: bottom; display: inline-block Hello /div div class=inner style=vertical-align: bottom; display: inline-block world /div /div Why doesn't this bottom-align the inner divs? ... It does. vertical-align affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The line box made by your inner div's is not as tall as the fixed-height container. Something that stretches the line box to the container is needed: div class=opener style=height:100%; width: 0; display: inline-block/div __ 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] overflow boxes next to floats
2010/3/22 Bruno Fassino fass...@gmail.com: ... The spec deliberately not very precise about these cases. At http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float there is CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower So the UA are allowed to make those bfc narrower as they like :-) The other day, Tab Atkins Jr. explained what that means Often, does not define in CSS 2.1 means browsers did all sorts of crazy things, and we decided not to try and stabilize the behavior at this time. http://www-style.markmail.org/thread/f54zkhvd2jvrtzd6 Ingo __ 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] Transcendant web design and CSS3
2010/3/8 Jeff Zeitlin edi...@freelancetraveller.com: On Mon, 8 Mar 2010 09:11:25 +0900, Philippe Wittenbergh e...@l-c-n.com wrote: ... He also advocates NOT trying to make the presentation of a website look the same in all browsers, but to write to the limit of the CSS capabilities of each individual browser, and use things like conditional includes, media rules, and @import to control what CSS gets seen/used by which browser(s). Which is a philosophy I fully support. It is called progressive enhancement. No. He specifically denigrates Progressive Enhancement, describing it as ...begins with less capable browsers such as Internet Explorer 6 and then uses CSS selectors to add functionality. His Transcendent CSS abandons the notion that a less-capable browser is the benchmark, and sets that benchmark squarely where it belongs today, with the CSS2.1 specification and those browsers that support it. It uses all the available CSS2.1 features, not to add visual enhancement, but to accomplish the best design for the most, standards-capable browsers. Progressive Enhancement minus IE6. Phasing out IE6 is a matter of time, not of the right wording. Name this Transcending if you like to, but normally Progressive Enhancement and Graceful Degradation already are confusing enough. Ingo __ 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] Gap in IE8
2010/3/8 N Duckworth nduckwo...@gmail.com: Hi, In IE8 I'm getting a gap somewhere between an image (a JS slide show in #slider) and the containing div #pma: http://onenetwork.com The extra blue space above the main image should not be there, and the bottom of the image is getting clipped. This is only happening in IE8. ... The IMG is already display:block, and so the containing A should probably get display:block, too. Ingo __ 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] understading ul li as menus - A 5 question quest.
2010/2/28 MEM tal...@gmail.com ... http://www.nuvemk.com/formacao_lx/outros/ul_li_tests.html - the css styles are inside. ... 1) If we apply overflow property here, will this property be inherited to descendants even without being declared on them as inherit ? see http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow see Inherited: no 2) How do we call the properties that have this inheritance capacities? Having inheritance is something that some properties may have by default, or the user agents are the responsible for giving that to some properties? 2. http://www.w3.org/TR/CSS21/cascade.html#inheritance Each property defines whether it is inherited or not. see the Inherited? column here http://www.w3.org/TR/CSS21/propidx.html 3) The - display:inline; - declaration on - .navegacao ul li - selector, will place our list items inline. However, if we have no float declaration as well, we will have some left and/or(?) right space between inline elements. What space is that? Web developer toolbar show us no margin, neither padding. 3. the space between inline elements is the whitespace between them, it's in the HMTL It's no margin and no padding. ... Ingo __ 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] Opera 10 and percentage min-height
2010/1/3 Bruno Fassino fass...@gmail.com On Sun, Jan 3, 2010 at 1:09 AM, Alan Gresley a...@css-class.com wrote: [...] http://satzansatz.de/op/minheightrootoverflow.html What you see is the whole viewport covered by the min-height div. If you drag the bottom of the window upwards in IE8 and Opera 9~10 you will see a vertical scrollbar appear. Now refresh the page and the scrollbar disappears. Now drag the bottom of the window downwards in IE8 and Opera 9~10 you will see the background of the HTML appear under min-height div. This is re-flowed by these methods. a. Refreshing the page. b. Dragging the left or right edge of the window in either direction. c. Providing a hover transition effect to either the div, body or html. The only way that I can fix (hack) Opera 9~10 is to insert another div. This I presume breaks the 100% critical crisis point. IE8 still has the bug. http://css-class.com/test/css/box/min-height-resizing-opera-hack.htm FWIW, the IE8 vertical resize problem seems fixed by the presence of some specific content inside the min-height container, for example a display:table box, which can be empty and added with :after http://brunildo.org/test/minheightIE8_2.html As you said, Opera can be fixed by the addition of some box, so playing a bit more, the following seems to satisfy both Opera10 and IE8, using :after for both (I needed to add a position:relative on html for Opera) http://brunildo.org/test/minheightIE8OP10.html (Well, it's surely better to avoid these hacks altogether :-) and just live with the resize problem...) Thanks so much, Bruno! I just tried your pseudo-element solution in Opera 10 for a footerStickAlt-related problem and it worked well. Don't understand why position:relative on html changed the game, though. Best, Ingo __ 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] -moz-box-shadow
2010/1/24 Tim Climis tcli...@indiana.edu: ... If you have a shadow on an element with 100% width (an unfloated div, say), and give it a box-shadow, in firefox (with -moz-box-shadow) you get horizontal scroll, while in Safari/Chrome (with - webkit-box-shadow) you do not. Has anyone discovered a way to make Mozilla act like Webkit? ... yes, don't use -vendor-prefixes. :) Ingo __ 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] strict vs. transitional doctype and rendering differences
2010/1/5 Philippe Wittenbergh e...@l-c-n.com: On Jan 5, 2010, at 3:06 PM, Ingo Chao wrote: So it is an almost standards mode problem, triggered by the transitional doctype [2]? The inner inline-block is sitting on a baseline in strict, and in transitional, it doesn't [3]. With both modes, the baseline for an inline-block is the baseline from the parent line-box. http://dev.l-c-n.com/_temp/ib-strict.html http://dev.l-c-n.com/_temp/ib-trans.html Once you add your over-constrained construction, the behaviour differs. Bruno is correct in identifying the presence of a line-box on the outer span as the reason, I think. In transitional mode, that one line-box is not generated and explains the different rendering. http://dev.l-c-n.com/_temp/ib-strict2.html http://dev.l-c-n.com/_temp/ib-trans2.html Thanks for the better reduction. In your first testcases, http://dev.l-c-n.com/_temp/ib-strict.html http://dev.l-c-n.com/_temp/ib-trans.html the behavior differs when I add height:1em to the inner EM. best, Ingo __ 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] strict vs. transitional doctype and rendering differences
Thanks a lot, David, for this clarification, and for linking to the discussion in #24186 (10 years ago!) Thanks again to all who helped. Ingo __ 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 for keyboard link focus
2010/1/5 David Laakso da...@chelseacreekstudio.com: I am not very adept at all the ins and outs of cross-browser keyboard use. Any suggestions for improvement of the CSS for keyboard users on this site is appreciated. Thanks. markup http://chelseacreekstudio.com/ css: lines 39-70 http://chelseacreekstudio.com/ca/site/css/sisu.css I'm not an expert here, I had to enable keyboard navigation first http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/ but once the Fx was able to tab through your links, all worked well on your site. Ingo __ 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] strict vs. transitional doctype and rendering differences
Hi
can someone point me to a reference about rendering differences
between strict and transitional doctype?
or: what would you expect?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
meta http-equiv=Content-Type content=text/html;
charset=utf-8;charset=utf-8 /
titlestrict vs. transitional/title
style type=text/css
span {
background: red;
border: 1px solid black;
display: inline-block;
font-size: 12px;
padding: 0 2px;
}
em {
background: yellow;
display: inline-block;
font-style:normal;
height: 24px;
line-height:48px;
}
/style
/head
body
divspanemText/em/span/div
/body
/html
In Strict mode, the red span encloses the text - in transitional mode,
it dosn't.
Why?
thanks,
Ingo
__
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] strict vs. transitional doctype and rendering differences
2010/1/4 Bruno Fassino fass...@gmail.com: ... I believe the difference in the rendering is related to the fact that in strict mode an element (in this case the red span) always generates an inline box (using its current font properties), like it always contained at least a character, even if it does not directly contain text. Indeed adding a character divspana emText/em/span/div the difference in the rendering disappear. This Mozilla page [1], rather old, does not mention other differences caused by the almost standard mode. And I assume that the one that it mentions is the same I tried to describe (probably in a rather imprecise way...) Bruno [1] https://developer.mozilla.org/index.php?title=en/Gecko%27s_%22Almost_Standards%22_Mode 2010/1/4 Jukka K. Korpela jkorp...@cs.tut.fi: ... a) whether the differences in rendering really matter (and it's not just a matter of an obsession of having the same rendering in all browsers) Thanks to all! I was asking because of the transition from transitional to strict (html5) doctype for an (iframed) site. These nested inline elements are used as hooks for background-images/sprites, so exact matching heights are critical. No big surprise that these fragile constructions break sooner or later. transitional http://satzansatz.de/cssd/doctype/inlinetransitional.html strict http://satzansatz.de/cssd/doctype/inlinestrict.html So it is an almost standards mode problem, triggered by the transitional doctype [2]? The inner inline-block is sitting on a baseline in strict, and in transitional, it doesn't [3]. Great, thanks! Ingo [2] http://hsivonen.iki.fi/doctype/ [3] https://developer.mozilla.org/en/Images%2c_Tables%2c_and_Mysterious_Gaps __ 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] Opera 10 and percentage min-height
Getting out of practice.
Does Opera/Mac up to 10.10 has a bug with percentage min-height?
(not in 10.5 pre-alpha anymore)
http://satzansatz.de/op/minheight.html
And display:inline-block (or float) seems to fix it for a moment, just
to break again with a width?
!DOCTYPE html
html
head
titlemin-height/title
style type=text/css
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
background: red;
min-height: 100%;
/* display: inline-block; */
/* width: 100%; */
}
/style
/head
body
divThis red area should fill the screen/div
/body
/html
__
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] Opera 10 and percentage min-height
Thanks! here is the testcase with the :root:overflow fix http://satzansatz.de/op/minheightrootoverflow.html without: http://satzansatz.de/op/minheight.html best Ingo __ 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] :: xp ie/8 :: p:first-letter {...}
Works here for me in IE8/XP. Wrong color in IE7 (and IE8 in IE7CompatView). regards, Ingo __ 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] Text Kerning and Other Oddities on MAC but not Windows
2009/12/9 Maslowski, Eric emasl...@umich.edu:
Hello all,
I've mostly been silently following the list here and the advice given has
helped me in a few instances. So, thanks! What I've run into has completely
stumped me and I'm hoping someone here may have seen the problem before or
knows a quick workaround/fix. The site I've been working on (at link below)
works as expected on FF, IE, and Safari on a Windows system. (Vista XP)
However, when the same pages are viewed on a Mac (FF Safari) the
alignments are off, there seems to be additional kerning on the text, etc. In
short, it's a mess. Everything is fully updated.
Trying everything from using absolute positioning of my DIVs to specifying
every relevant component for my CSS classes I am unable to track this down.
Using Firebug everything seems to check out which just adds to the
frustration. Validating the HTML and CSS checks out as well. Has anyone else
encountered this or could offer some advice? I'm really at a loss here.
simple page that exhibits problem (clipping at bottom, images are not where
they are supposed to be, etc.)
http://um3d.dc.umich.edu/Temp/newsite/services/visualization/viz_intro_process.html
The projects section has other offset and alignment issues...again, fine on
Windows but not on Mac.
CSS (but it's a bit messy from my haste)
http://um3d.dc.umich.edu/Temp/newsite/shared/styles/main.css
Thanks
Eric
.tab_content_bg {
...
height:460px;
...
overflow:hidden;
...
}
This cannot work with text. You cannot control the text settings of
the user, you don't know how tall the container has to be. It's a
framed-sort of design you have here.
Ingo
__
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] are there changes in the css validator?
2009/12/4 David Hucklesby huckle...@gmail.com:
...
It looks to me as if the validator complains about a single value for
the background-position property. From my reading of the specs, though,
I think that a single value is valid. (???)
I am as confused as the OP...
I think the validator is confused.
Example from the spec:
P { background: url(chess.png) gray 50% repeat fixed }
is valid
but a small change
P { background: url(chess.png) gray repeat fixed 50% }
is not valid -- according to the validator.
hmm...
Ingo
__
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] are there changes in the css validator?
ah, its a known bug. http://www.w3.org/Bugs/Public/show_bug.cgi?id=8237 Ingo __ 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] Changing the layout of a DL - Doable in CSS? How?
2009/11/19 Jeff Zeitlin jzeit...@cloud9.net: ... SECTION NAME (DT) IN BOLD Section description (DD), which may run to multiple lines of text, or have DLs in the DD (and those DLs should be formatted the same way) two ideas: this looks like a run-in box to me http://www.w3.org/TR/CSS21/visuren.html#run-in browser support is ... to be tested. Safari and Opera? Since you need some nesting of a DL inside of the DD, making DD and DT display:inline and DL inline-block to simulate a run-in would maybe end in some browser issues, too. Ingo __ 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] conditional css for Opera?
2009/11/17 Marc Hall m...@hallmarcwebsites.com: ... One caveat - The new version of Opera 10 for Windows (haven't tested Mac or Mini yet) shows a new addition to the userAgent string - Version. So if you print out the navigator.userAgent you will see both Opera/9.8 and Version/10.01. Not sure why they have done this and this helps drive home the point of NOT using browser detection. Isn't it ironic -- the detectors itself have caused it. It appears that a considerable amount of browser sniffing scripts are not quite ready for this change to double digits, as they detect only the first digit of the user agent string: in such a scenario, Opera 10 is interpreted as Opera 1. http://dev.opera.com/articles/view/opera-ua-string-changes/ :) Ingo __ 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] Stacking Order IE7 issue
2009/10/14 corey deep coreyd...@gmail.com: Hello All, I have a problem with ie7, I believe it is incorrectly setting the z-index of site content (a thumbnail row) and the result is that the navigation is overlapping the content row on hover. see example http://www.thevenusflytrap.org/ietests/ie7-stack-issue.html To reproduce mouse over either the first or last thumbnail images should notice the thumbnail image is cut off... I have read about the ie z-index / stack order bug and a solution where z-index property is set for the element via javascript, but i do not think that will work in this case. I have tried via inline styles what have you, setting the z-index for the thumbnail image on up and on hover with no success. Its the position:relative on li. Set it on demand, that means, on :hover only. Ingo __ 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] Fixed Positioning Relative to Parent Container?
2009/8/8 Elli Vizcaino elli...@yahoo.com: Hello, Was just wondering if there was a way to position an element fixed relative to its parent container? At present it seems fixed positioning is only relative to the viewport. Is there a work around to make it relative to its parent container? position:absolute Or be a little more specific in your problem description. Ingo __ 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] IE8 conditional styles bug ??
If I am not wrong, my IE8 Vista (Browser mode: IE8; Document mode: IE8 Standards) applies the rules in question. I can see a square div aquamarine, with text on it. test example --- http://mtroadwines.com/ie8test.htm __ 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] IE8 conditional styles bug ??
2009/8/6 Al Sparber aspar...@roadrunner.com: I disagree, but just follow the steps in my previous email. For the second step, I apologize for a typo... Instead of removing the ID, remove the Title. Yes, there are two preferred stylesheets (- HTML 4) visible for IE8 (A title=all and B title=ie8), so the first one may win. This is not a bug. Ingo __ 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] Interesting IE 6 and 7 bug: absolute bottom position and floated sibling
2009/7/15 Darren Brierton darren.brier...@gmail.com: ... There are four child elements of body, the first (blue) is absolutely positioned at the bottom of the viewport, the last (green) is absolutely positioned at the top of the viewport, the second (yellow) is a hack (a floated element with a negative margin-bottom) to vertically center the third (red). In IE 6 the first element which should be blue and at the bottom of the viewport does not seem to be rendered at all. ... IE 7 is even stranger. On first loading the page the element in question is drawn, but then isn't if you refresh the page. I think this is related to http://www.brunildo.org/test/IE_raf3.html Ingo __ 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] @media tv
Thank you for your answers. How would a generic media types string look like for the visual media group in CSS2.1? @media screen, projection, handheld assuming that - 'tty'-capable-devices would need a very special style sheet, if there are such devices at all (?) - 'tv' is not needed because MSN TV should be comfortable with 'screen' (?) (I don't know about the XBOX) - 'handheld'-capable-decices should normally get a special page via backend logic, but if they really want to see the page design as-is, be it. (?) - Opera uses (or used?) 'projection' in kiosk mode - printer need an own 'print'-stylesheet is this correct? Ingo __ 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] @media tv
Are there devices out there that actually use this media type? Thanks, Ingo __ 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] Same Height Columns - the terror scenario!
2009/7/3 talofo talofo tal...@gmail.com: ... I need to have the same height columns and allow the borders of those columns, to stay at the same heigh too. Yes, familiar, I know... I realise that there are techniques that use a container to contain the columns, and then, define overflow:hidden; to the container, among other options. But, the issue on this terror scenario, is that, if we give overflow:hidden; to the container, named: box_no_bottom, the left border of the Visual Boxes (the ones with shadow borders) disappears. this is because the box that generates the left shadow is moved out of box_no_bottom. And since it overflows its container, and overflow:hidden is set on the container, the result is ... hidden. No overflow required here. http://www.cantinho.org/pt/cantinho-site/layout9_ups.html For the effect of three columns separated by a boder, I think faux columns should do. Didn't read the other thread, and don't understand why you are opening a new thread for the same problem. Ingo __ 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] Speed Report sees 2 images loading instead of one?
2009/6/17 Theophan Dort theop...@bellsouth.net:
...
#twoCol #header {background-image:url(../img/header2col.jpg);}
#threeCol #header {background-image:url(../img/header3col.jpg);}
...
It seems to work fine! However, I just discovered that a Speed
Report seems to be seeing BOTH header background images loading
whereas my CSS is supposed to be only loading one.
...
http://www.holycrossoca.org
Can anyone tell me whether I've misunderstood my CSS somehow, and it's
actually telling the browser to load both header images? ...
The Net Panel in Firebug says there is just one image loaded on the
startpage, header3col.jpg
Ingo
__
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] vertical centering of multi-line text
2009/6/8 Debbie Campbell d...@redkitecreative.com http://www.redkitecreative.com/projects/fink/expertise.php I'm using display: table-cell and vertical-align for the paragraph text to the right of each thumbnail image, but this isn't working in Safari/Win; the p/p is floated all the way left and the thumbnail is displayed below the div. Debbie, I don't have Safari Win, but what if the p gets a width? Ingo __ 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] ie/6.0 text-decoation
2009/6/7 David Laakso da...@chelseacreekstudio.com
Not able to kill border-bottom (text-decoration) under clickable h1
image -- all inside pages -- ie/6.0.
Now what l'll do?
html
http://chelseacreekstudio.com/yl/yar/projects/k2.html
css
http://chelseacreekstudio.com/yl/yar/css/style.css
ie/6.0 specific styles
http://chelseacreekstudio.com/yl/yar/css/url(style_.css)%20screenhttp://chelseacreekstudio.com/yl/yar/css/url%28style_.css%29%20screen
Hi David,
IE6 applies these rules to the H1 A:
( from IE Developer Toolbar, View, Source, Dom:Element+Styles)
/* Rule 6 of ../../yar/css/style.css */
H1 A {
BORDER-BOTTOM: medium none
}
/* Rule 27 of ../../yar/css/style.css */
.c A {
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 1px;
BORDER-LEFT: medium none;
COLOR: #777;
BORDER-BOTTOM: #eee 1px solid;
TEXT-DECORATION: none;
outline-width: 0
}
So the BORDER-BOTTOM: #eee 1px solid; wins.
best
Ingo
__
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] Vertical Align Theory
2009/4/23 Jack Blankenships learningcssindet...@gmail.com: If I am vertically aligning an element it seems that the only way to consistently do so with standard css is to implement a display: table-cell; vertical-align: middle; style on the container. Is there any benefit this affords me over just creating a table? I seems odd to me that the new hero for layout and positioning (CSS) has to revert back to table-styled position to center elements vertically. You could vertically center boxes with display:inline-block and variants for IE and Fx2, however, the display:table route is probably easier. And yes, vertical control is pretty weak in CSS. You may use html tables then if you think this is appropriate for your situation. Hope this helps. Ingo __ 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] Equal heights solutions
2009/3/16 Nancy Johnson njohnso...@gmail.com: ... but I'm still looking for an ideal solution to equal heights problem ... There is no ideal solution. Maybe this is a helpful read: http://www.satzansatz.de/cssd/companions.html Ideally, your layout idea would adapt to suit the constraints of CSS implementations. That means, it would be probably better to design without the need for equal height columns. Ingo __ 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] inline-block ignored by IE6
2009/3/16 Geoffrey Hoffman geo...@globalmediaminds.com: ... I've already had a look at trying to force hasLayout, using zoom: 1 [1], and other IE6/7 inline-block posts[2] but none seem to work in my case. [1] http://www.satzansatz.de/cssd/onhavinglayout.html [2] http://www.brunildo.org/test/InlineBlockLayout.html see [2], Conclusions, Elements having both hasLayout and display:inline work similarly to the standard inline-blocks ... Ingo __ 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] Button width in IE6
I guess you mean that a element does not shrink-wrap its content. The A has haslayout, and its parent LI is a float. The float should shrink-wrap, but this fails in IE6. http://www.satzansatz.de/cssd/onhavinglayout.html#shrinkwrap I think floating the A may help. Unfortunately I can't point you to a real page because this is an internal system. For your own debugging efforts, you should start building test cases anyway. Ingo __ 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] Hunting a peek-a-boo bug in IE8rc1
I can reproduce the issue in a fresh IE8rc1 install on XP. After a few refreshes, the footer disappeared. regards, Ingo __ 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] Div will not dislplay in proper location in FF
2009/2/23 Del Wegener d...@delweg.com: ... http://www.edi-cp.com/newweb/index.php In IE7 div id=video_wrapper with the yellow border displays where I want it. In FF3.0.6 it seems to get stuck beneath div id=horizontal_specials with the green border. This is a bug that is fixed in IE8CR. Firefox, Safari, Opera are correct. The float cannot pass. Ingo __ 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] Before after
http://www.w3.org/TR/css3-selectors/#pseudo-elements This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. Ingo __ 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] :: Absolute Positioning Disappears in IE6 7 :
2009/2/2 Amrinder amrinder.san...@hotmail.com Hi, I have done HTML/CSS of a design here: http://demo.awayback.com/ashton . Everything is fine in firefox, safari, opera but IE 6,7 are not letting things my way. The top sub navigation and search div are not displayed in IEs. Please help asap. Regards, Amrinder asap: http://www.brunildo.org/test/IE_raf3.html Ingo __ 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] a png not displaying!
2009/1/30 Ian Young i...@iyesolutions.co.uk ... http://www.dbadvertising.co.uk/dev/index-test.php All the pngs display in IE6 fine with exception of the address logo Style sheet is at /dev/includes/ie-fix.css and /style-new.css. for the filter, you have src='../images/Adress-top-3.png' but the correct path should be src='/dev/images/Adress-top-3.png' Ingo __ 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] problem with IE7, suckerfish and flash video
2009/1/29 Chris Kavinsky ckavin...@gmail.com ... when I hover over a nav item to activate a dropdown, IE7 hides the video and all content below (everything within the same div from the video to the end). http://associationdatabase.com/aws/ORAEF/pt/sp/prostart_cafe I think this is an IE7 guillotine (a triggering hovered element, followed by 2 uncleared floats, and one of the floats is cut to the length of the other) like described here http://css-class.com/articles/explorer/guillotine/index.htm try one of the fixes like containing the floats by an additional wrapper with haslayout or insert a solid clearing element after the floats. Or start with unfloating the second float, subcontainer. Check in IE6, too. Ingo __ 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] IE6 and !important
No, IE6 recognizes the !important declaration.
The bug in IE6 is, the property with this declaration can be overridden
within the same rule set.
Some use this bug to send specific values to IE6.
h1 {
color: green !important;
color: red;
}
This is just another example why undocumented hacking is a bad idea. In the
end, some think !important does not work in IE. But it is ok as long as it
is not used within the same ruleset.
Ingo
__
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] Pragmatic look at our CSS future - ripped from: The CSSOverlords
The old paradigm: we can make a page look equal. This is correct for the most part. But should we still do this? When talking with co-workers, they tell me that a page has to look the same (they usually omit qualifiers like to the degree possible). With respect to maintenance costs, performance costs, and with regard to the overall browser and specification development process, I think it matters more if we start discussing the reasonable degree. There are good reasons for functional hacking, that is, to keep a page usable for IE6 users. More and more, I tend to think there are lesser reasons for presentational hacking, cosmetic things like a transparency here, an equal height column just to show a gradient there, how great we are. Currently, with the old paradigm, I have to fix an irrelevant 3px bug but I am not allowed to make full use of CSS 2.1 or to try some CSS3 modules? Ingo __ 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] Pragmatic look at our CSS future - ripped from: TheCSSOverlords
But I did not say let us drop support for IE6. And the page should of course stay viewable and usable. The market share of IE6 will not sink under 1% soon, and even if, 1% paying users are still a lot, so statistics about marketshare are currently pointless: you simply cannot ignore IE. When clients are comparing the similarity of user experience, they DO look at performance issues in IE too, I assume. So what does it costs to make the page look really equal? Ingo __ 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] Pragmatic look at our CSS future - ripped from: The CSSOverlords
Even if we can make a site look nearly the same in every browser, we should not attempt this anymore. Big sites are getting bigger, and the performance is affected a lot if we use expressions/scripts and filters for IE. If the site absolutely must look the same, the site is inevitably getting slower and won't feel the same in the end. Users who still have to use IE6 for various reasons do already know that they use an inferior browser, they just cannot change it. If a growing site gets so slow that the usability is affected, then we have to change our paradigm. It doesn't have to look the same as long as the usability is preserved. I think IE6 needs degraded, but functional pages. Functional hacking for IE is a must, but pure presentational hacking is becoming obsolete. The first one to be convinced is not the client. I believe we have to convince our co-workers, since the old paradigm was promoted by us. Ingo __ 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] The CSS Overlords
The interests and motivations are different. If I am asked to do a pretty newsletter for Word's rendering engine behind Outlook, I would like to tell them to ask an HTML table guy. It took me a few years to learn CSS, but I won't spend time with learning tables. Some don't like CSS because of the workarounds to be found and new methods to be invented every day, but that's the fun part of CSS, at least to me. Frankly, I find tables boring, the last new idea how to use them was born a decade ago, a solved and glued puzzle. Maybe the fun part of tables is the control you gain over them, I just don't know. However, the day the CSS-framework-guys win and produce something endlessly boring that does not require an understanding of CSS anymore approaches, so maybe it's time to move on. How about a discussion like: how do we use CSS 3 with an IE6-userbase of greater than x% in years to come? Can we re-think degradation, this time without grace, and convince clients and co-workers that a page does not have to look the same across browsers, as long as a basic functionality is preserved? But how to design with and without border-radius, with and without multi-columns, with and without multiple backgrounds? I don't know how to find a pragmatic balance between CSS 2 and 3. Ingo __ 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] IE and background colour
Opera does not crash because of the proprietary (and of course, invalid) zoom property; Opera ignores it. Ingo __ 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] IE and background colour
2009/1/12 Elle Meredith li...@designbyelle.com.au ... probably display: inline-block for li helps. This did not work. The thumbnails do not float anymore. Any suggestion? The site is at: http://farmpeacelove.com/italiano/alloggio Actually decreasing margin-right fixed the problem in IE6 but not IE7. Do you think it has anything to do with using outline? outline? It is still dropping in IE6. Let us try zoom: 1 instead of display:inline-block for li. Ingo __ 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] IE and background colour
2009/1/11 Elle Meredith li...@designbyelle.com.au Hello again, I've got quick 2 more questions -- and again problems with IE. 1. Background colour is not appearing on #quote and #bookings it does what ie.css says: #f2f3e6 2. .mini-gallery last floated li falls below. I tried to specify a smaller margin for IE but it still does not help. probably display: inline-block for li helps. The site is at: http://farmpeacelove.com/italiano/alloggio Ingo __ 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] How to expend inner Div???
2009/1/5 shrimpy imx...@gmail.com This one is complicate...why the padding and margin so large. ... In the OneTrueLayout method [Robinson], floating columns of unknown height are wrapped by a container element. All columns get more length by an excessive padding. This would let the containing element expand in height. But the same length is subtracted from the columns by a negative margin. The excessive padding area now hangs out of the container that did not change its height. Finally, overflow: hidden cuts the overhang on the bottom edge of the container. [http://www.satzansatz.de/cssd/companions.html] Maybe a faux columns technique plus Footer Stick Alt would be easier to implement. I know this is not what you were asking for, but frame-like pages with a fixed footer at the bottom of the window are not that simple. Ingo __ 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] footer not always sticking to bottom of window
2009/1/5 Debbie Campbell d...@redkitecreative.com I've tried footerstickalt and a few other sticky footer methods... http://www.redkitecreative.com/projects/endorphin/index_footer.php The footer stays at the bottom of the window until you decrease the size of the window, then a gap appears below the footer. I just need to have the footer stay at the bottom without riding up over the content in #main and #sidebar. Thanks for your help. This is not Footer Stick Alt. In the article by Cameron Adams, see the padding-bottom in the content area to make room for the footer that is offset upwards. You are offsetting #content downwards by positioning it relatively. Note CSS 2.1: 9.9.1: Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap. Apply a red test background to #content. See the #content is sliding under your footer. Again, this is not footer stick alt. Don't offset #content, offset footer instead by its own height. Ingo __ 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] site breaks in IE6 (I'm sure it's just one little thing)
2008/12/18 Scott Thigpen scott.thig...@gmail.com My site www.sthig.com/unisource breaks in IE6 http://www.sthig.com/unisource/1.jpg http://www.pubcon.com/redirect.cgi?f=83d=3810456url=http://www.sthig.com/unisource/1.jpg http://www.sthig.com/unisource/2.jpg http://www.pubcon.com/redirect.cgi?f=83d=3810456url=http://www.sthig.com/unisource/2.jpg There is a float drop on the right because the left margin of the left float is duplicated. Ingo __ 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] about inline, replaced element
I'm not sure I understand the specification here, so maybe someone else helps me with answering your questions. ray wrote:... 1. I think the container box of the img element is the parent block-level element of a right? both the inline-box of a and the inline-box of its descendant img live in the same containing block, a rectangle that is established by the nearest block level element (in this case probably body). The line box build by the inline boxes starts at the top of this containing block. 2. Because the inline box generated by a is the only inline box of its line box, so the baseline of the line box is also the baseline of the a inline box, so the img inline box is aligned with baseline of the a element, right? I think yes. 3. Because the img resides in the a element, so the img inline box is contained within the a inline box and the width of the img inline box becomes the width of the a inline box? The width? The width of the construct is determined by the width of the image. The inline box of a stretches to fit this width. If the width is wider than the width of the containing block, the line box may overflow the containing block. On Thu, Nov 20, 2008 at 4:36 AM, Ingo Chao [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: a style=font-size:150px; href=#img style=height:20px; src=foo.jpg //a The initial value for vertical-align, baseline, applies. It affects the inline level elements in a line box. Therefore, the image, being inline by default, should align with the baseline of the parent a-element. CSS 2.1: 9.4.2 Inline formatting context; CSS 2.1: 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties. The absolute vertical position of the baseline depends on the font metrics. regards, Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] inconsistent rendering among compliant browsers
David Laakso wrote: On this page [1] on Mac OS X 10.4.11 there is wild variation of the distance between the top border of the image and the top border of the container. Latest versions of: Opera-- approx 31px Safari/WebKit-- approx 21px (get it right) Camino-- approx 7px FF-- 14px Who gets it right? Or, what's more probable, where have I gone wrong? [1] http://www.chelseacreekstudio.com/ca/cssd/test-66.html I think it depends on the font metrics. The preceeding p class=c container has a computed height of 144px in Safari, but 136px in Firefox when Helvetica is chosen. Different fonts may give other results. The image in the second container would get a different starting point in y-achsis. regards, Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] CSS tables
Blake wrote: On Wed, Nov 5, 2008 at 8:54 AM, Ingo Chao [EMAIL PROTECTED] wrote: This will slow down new inventions a bit - which is good Actually, I said: ... which is good since the conforming browsers are not as free of bugs as some may believe. What? Restricting innovation is never ever good. Ever. You have to use table-layout:fixed in CSS-tables used for layout to get predictable widths. Safari has a bug#13339 with paddings on the cells in the fixed layout, so you'll have to set up inner divs for padding purposes. Firefox has a bug#363326 which basically requires putting a div in a div in a div (for cell, row, table). Both bugs add up, you'll need 4 divs until you can actually work with one cell for layout purposes. Looks ugly, but code is for machines. The inline-block workaround we described for the missing display:table-support does need a few lines of css for IE6+7 in addition (ok, alternatively, you could place a sign Designed with IE Version 8 or newer in mind, hoping for progress to come). This is why the development community has been bashing IE on the head with a frying pan for as long as I can remember. IMO it's the environment slowing us down, not the tools. What I'm asking is not a What?, but a how to...?, since I was testing css-tables in a real-world example and lots of test cases. Current implementations seem to be not that ready for this type of layout, as you need workarounds for /all/ browsers. Not too difficult to do, but somewhat restricting, at least for me. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] List background in IE 6 and earlier and condition comments
adamq wrote:
...
Because IE 6 and earlier does not support the first-child element,
the books recommends to apply a class to the list item to remove the
background image in these browsers. Using conditional comments to
apply this workaround seems best, but I cannot figure out why the
background still appears in IE6 and earlier. T he rule in my
conditional comments style sheet is:
#breadcrumbs #list-first { background: none; }
I think I also tried just #list-first, as well as a class,
.list-first. The conditional comments is linked AFTER my main style
sheet.
URL:
http://home.comcast.net/~adamq/chapter5/breadcrumb-navigation/breadcrumbs.html
There is no bg image visible on the first LI in a native IE6 install,
and tracing the stile shows that IE6 applies the above fix. I
think the problem is how you test in IE6.
Ingo
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.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] hovering over hyperlink makes div move in IE6 (like its parents padding gets cut in half suddenly)
Arian Hojat wrote: Here is a theme I am messing with... http://www.arianhojat.com/temp/css_test/test.html You can see when you hover over Home breadcrumb, that it expands the div ( the parent container has 5% padding, and it seems to get cut in half when hovering over hyperlink). i set a zoom:1 on the .breadcrumb to stop the h2 above it from moving too, but setting zoom:1 on hyperlink doesn't do the same for that. Anyone know what IE bug I have? Percentage on paddings triggers one of these absurd IE bugs where the fix leads to the next bug. See The Janus-faced padding http://www.positioniseverything.net/explorer/percentages.html better don't use percentage paddings at all. At least, don't change backgrounds (or similar) on hover. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] CSS tables
Kenoli Oleari wrote: ... The Sitepoint book proposes beginning to move away from IE 67, offering several strategies for doing this, all with the goal of pushing people to upgrade to IE8. It suggests that this is the beginning of a new cycle that will push CSS and site design to a new level eventually and sooner if there is a new press toward conforming to an improving CSS standards. Sometimes designers and developers believe they could push users to do this or that, but I don't believe that this imagination of power will significantly change a lot. To me, it is more likely to get workarounds for old browsers than installations of new ones. This will slow down new inventions a bit - which is good, since the conforming browsers are not as free of bugs as some may believe. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] CSS Browser Hacks
The debate about hacking is mostly about hacking IE lte 7. We have sufficient methods to hack IE, though. Because of its market share, we have the knowledge about the bugs, the filtering methods and the workarounds for IE. I don't think we need filtering techniques for current compliant engines like Gecko, WebKit, Opera, and probably IE8. I know they have their bugs too, but for most everyday coding problems, there are interoperable methods available. The differences that these browsers show are the difficulties in interpreting a specification that is still fine-tuning on edge-cases. Any static filtering method for these browsers under active development would fail sooner or later, so any hack could suddenly become the problem it should initially solve. And other filtering methods, on the engine's version level or the spec's version level, would quickly surpass the abilities of web authors in following the latest discussions on the specification, to decide whether a browser is right or wrong. A layout should tolerate imprecision by the browser, as it should tolerate user settings and needs that differ from the author's settings and needs. The latter is the bigger problem. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] Overflow and no
Jack Blankenships wrote: Any ideas on how to have an element's overflow property apply to some children but not to others? For example, I have a div that contains a table/grid that I want to have set to overflow: auto on a specific height. This way the results stay within a specific set of dimensions and do not push the rest of the layout into undesirable locations. The problem is that I also want to include some css tooltips for specific cells in this table/grid, some of which are large enough that I would like to expand them out of this standard boundary because they would be displayed above the layout content and disappear when :hover is not activated. Thanks, Jack Don't know out of my head. If the tooltip is absolutely positioned and the containing block (for example, another div with position:relative) for this absolute positioning is outside of the overflow-div ... but I fear the table limits that, since positioning inside a table is difficult ... we need an example page. It depends. Scrollbars on a block inside a browser window with scrollbars could be worse than pushing the layout a bit. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] div won't center in IE6
Scott Thigpen wrote: My site http://sthig.thigpendesigns.com/index.php/ has a problem with the div id=content not centering in IE6. I don't know what gives, can someone help me out (it just shifts to the left) ... nevermind, I fixed it. it was the text align=center trick The ?xml version=1.0? - IE6=quirks mode - text-align:center = centering of blocks-trick? :) Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] IE6 displaying some text twice
Tim Dawson wrote: ... See IE/6 duplicate char bug-- http://www.positioniseverything.net/explorer/dup-characters.html Thank you. That looks promising; I've had a quick look, but need to go back. I habitually use a comment when I close a division, as: /div!-- close divname -- So that's going to get me into lots of trouble. Not necessarily, because the problem shows up on - 2 html-comments (mostly) - near hidden-inputs - near display:none-elements - in tight float settings with or without html-comments I note the article says the problem is fixed in IE7, so if I'm seeing it there too it must be something else. I thought I'd fixed it, by updating a file, but it's still there on some pages, so I'm working on it. what page? Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] animated gif workaround for MS Outlook 2007
Aubrey Benasa wrote: Hi there, Has anyone found a workaround for incorporating animated gifs in html email rendered in Outlook 2007? or displaying a static image in the worst case scenario? Thanks, Aubrey http://msdn.microsoft.com/en-us/library/aa338201.aspx and Campaignmonitor http://tinyurl.com/3dn2qz MS Outlook 2007 uses the rendering engine of Word, and Word 2007 does not support animated gifs. It should show the first frame of your gif, but I would not name this the worst case. This would be if people would not like animated gifs for some reasons. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] clearing a CSS float
Bill Brown wrote:
...
Try this:
ul, li {
list-style: none;
margin: 0;
padding:0;
}
ul {
display:inline-block; /* IE Float Clear, Part 1 */
overflow: hidden; /* Float Clear */
}
ul {
display:block;/* IE Float Clear, Part II */
}
li {
display:inline; /* IE Double Margins Bug Fix */
float: left;
padding:0 10px 0 0;
}
That should put anything after the UL below the UL. The only time this
fix won't work obviously is if you're using a fly-out menu. In that
case, you can leave the IE fix in place, but would need to adjust the
fix for other browsers using the :after pseudo element on the UL.
I would not recommend this inline-block/block trip-switch combination.
It is complicated, and someone who does not know about this peculiar
hasLayout-sidenote (that is, display:inline-block sets haslayout in a
silent way that cannot be reset later on) won't understand it no matter
what or how much you are commenting at its side.
For the 17 lines of code, 5 are just because of IE 6. From an conformant
browser's point of view, the code is hermetic and makes not much sense.
To makes things worse, the overflow-clearing is far from
self-explaining. So maintaining this code will lead to further questions
or further bugs. It should not be that difficult to clear something in CSS.
I'm not saying the code would be bad or would not work. I am using the
word hermetic here as Those who could understand this code would not
have to ask for it.
Ingo
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.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] Script disabling inline property in FF?
Gunlaug Sørtun wrote:
Daniel Hammond wrote:
URL: http://www.studentremix.org/ms/blog.htm
The column on the right is supposed to say Log in, but in FF3, the
div for that column is moved down below the left column.
Can not tell you exactly what's bugging FF3, but it looks like another
strange thing surrounding Gecko's handling of CSS table - not quite like
the other browsers that support that property.
Anyway, replacing...
#content {display: table;}
...with...
#content {overflow: hidden;}
...or some other expand to contain floats method, will fix it.
regards
Georg
I guess the second float is put into a second anonymous table-row. We
should not use display:table for containing floats.
Ingo
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.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] Getting round missing Child Selectors in IE67
Aaron Gray wrote: ... IE, even IE 7 does not support CSS Child Selectors ! As Philippe said, IE7 does in Standardsmode. I was wondering whether there is a work around at all Does this help, including the comments section? http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ But I think this is what David meant. You may have to upload a simplified reduction of the problem. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] google Chrome browser
Brian Cummiskey wrote: ... Any scary things we should be aware of? css3.info collects some problems in the comments here: http://www.css3.info/google-chrome-is-available/ I was not able to produce a list-style-type:square without a curve at left top (don't know if this is the common behavior on windows), looks like a clipped disc. http://reference.sitepoint.com/css/list-style-type Starting WebKit WebInspector with a rightclick (inspect element) produces a 100% CPU load. Did they have missed to publish a link to their public bug tracking system? Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] google Chrome browser
2008/9/3 Ingo Chao [EMAIL PROTECTED] ... Did they have missed to publish a link to their public bug tracking system? Ingo Here: http://dev.chromium.org/for-testers/bug-reporting-guidelines Ingo __ 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] Can't make table cell behave
Alan K Baker wrote:
...
The page is at: http://www.webbwize.co.uk/Test_Area/OwenJones/stoplist.html
and the stylesheet is at:
http://www.webbwize.co.uk/Test_Area/OwenJones/stylesheet.css
I want the first line of text in every td to be top aligned rather than as
it is now, with a lot of white space where the content is less than the td
with the most content.
I've tried various CSS 'solutions' with no success. Perhaps I'm missing
something fundamental. :-)
#stopbox table td { vertical-align:top; }
at least in Fx3
Ingo
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.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] positioning problems (IE and Opera)
Elle Meredith wrote:
...
the round corners in the main navigation -- one
corner does not align.
The site is at: http://designbyelle.com.au/poinciana/
#main-nav ul li a { /*screen.css (Line 68)*/
background: white url(../img/rounded-left.gif) no-repeat left bottom;
...
I think the white will paint over the preceeding gif.
Ingo
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.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] positioning problems (IE and Opera)
Elle Meredith wrote:
...
In Opera 9 the main problem is that the logo is positioned too much to
the left. Also my stage on the gallery page is again positioned to the
left instead of right
The site is at: http://designbyelle.com.au/poinciana/
It is absolutely positioned, but it looks like as if Opera requires the
relatively positioned container,
#branding a {}
, to be at block level. Add display:block.
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.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] I must be fundementally misunderstanding something.
Alan Chandler wrote: ... YET. When I place a link to this file ahead of the main style sheet, the page stops being styled completely - its almost as if the second style sheet is ignored. If I move the link to this stylesheet until after the main one the page display works fine. I am aware of the rules regarding which style sheet wins out normally - but using firebug in firefox to examine the styles supposidely applying to any given element - is as though the main stylesheet just does not exist. ... http://test.melindasbackups.com/test/admin.html http://test.melindasbackups.com/test/admin2.html Can someone tell me why the first one doesn't display properly In the first one, you have two external style sheets linked: link rel=stylesheet type=text/css href=/static/scripts/calendar/calendar.css title=calendar/ link rel=stylesheet type=text/css href=ball.css title=mbstyle/ both have a title-attribute set, so the links refer to a /preferred/ stylesheet. You are declaring two stylesheets as preferred (so the first one wins ?) The user has to switch from one to another, from 'calendar' to 'mbstyle' (in Firefox view menu), to have the page styled with the main rules. http://www.w3.org/TR/html401/present/styles.html#style-external Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] Pass full css file to IE6 but not IE7 - with CSS only
Manuel Razzari wrote: So, using conditional comments, I produced a CSS file which targets IE6 only. Then, due to an extremely bizarre client situation, it turns out I can't use conditional comments ... Any ideas? Or must I fall back to prepending * html to all my IE6 rules? Why not? This attempt would match the conditions perfectly. - How bizarre, the client says. - Sure, the answer would be. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] Odd ?bug? in IE7
Alan K Baker wrote: I was using IE7 today, with in excess of 10 tabs open. The last one happened to be where I was viewing the output from my edited code, on a dual screen. The css definition contains a reference to a 1 pixel png file that is repeated within a div in both x and y directions, to make a solid box. The png is literally 1px single colour solid with no transparency set. What I saw in IE7 was not what was expected. Instead of a solid box, it was rendering a graded box from dark to light. Very pretty, but wrong. :-) ... IE7 has performance problems with small repeated images. But hey, it has less bugs than IE6. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] Absolute Positioned Div Disappears in IE6
Elli Vizcaino wrote: Hi Folks, I have an absolutely positioned div in a relatively positioned div which is also floated left (see #sn_hdr_wrap and #sn_login-info). I am working with HTML that I CAN NOT touch but have to be able to reposition. It's fine in Windows FF, haven't tested IE7 nor Mac Safari/FF yet. Now I have a similar situation further down in the HTML (see #topnav_right and #topnav_right_bottom) but this one is no problem and works just fine in both browsers and I'm assuming will be fine in the rest of the other browsers as well. ...: HTML Snippet: ... CSS Snippet:... I don't have time to combine these snippets into something meanigful to test with, but have a look at Bruno's page. http://www.brunildo.org/test/IE_raf3.html Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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/
