Re: [css-d] Falstaff weds Frutiger.
Love it. (Chrome/Android Nexus 4) Ingo Chao Am 06.06.2014 22:08 schrieb "David Laakso" : > 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/
Re: [css-d] mac vs pc
S Baily-Gould schrieb am 04.07.2012 00:32 I’m a bit of a CSS newbie when it comes to Mac vs. PC issues. A client is using Hubspot for their site and I just added deleted content and they wanted to know why their pages look different in Mac Safari and Firefox vs my PC Safari and Firefox. Font rendering/availability is OS dependent. You could revise your font stack (make them more similar over all platforms). Or use web fonts (same font everywhere, needs to be loaded by the browser). Revised home page is at http://www.vernassoc.com/home-copy-0/ Needs login? 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/
[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 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/
Re: [css-d] should i use css3
meera kibe schrieb am 11.04.2012 04:42 > keen to use it css3 for a website but i also want to cater to IE > people. http://caniuse.com/ 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] An embarrassingly trivial question
bruce.som...@web.de schrieb am 30.01.2012 11:40
#left_third {
Firebug FTW.
Gruss, 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] Dear Theo,
On Sunday, January 1, 2012, David Laakso 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 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 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
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;
} http://satzansatz.de/img/semi404040.gif";> to the aid of the
party
__
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 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/
[css-d] Query on P:First-letter
On Wednesday, September 28, 2011, Philippe Wittenbergh 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] 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 :
>
>Many of us are lucky
enough to take anaesthesia for granted. Surely a world without safe
anaesthesia has long been confined to the history books ? Not in
the developing world, where hospitals lack suitable equipment, medicines and
trained staff.
>
> 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: First... 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/
Re: [css-d] CSS Organization
mem schrieb am 30.08.2011 19:31 I must develop the CSS for those 100 pages and I'm really afraid about the fact that, I will have, almost surely, rules that will overwrite each other and it will be a mess, sooner or later. Here is an interesting discussion: http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ 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] IE 9, media queries
2011/5/22 Philippe Wittenbergh : > 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 : > ... 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 : > > 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/
Re: [css-d] Internet Explorer 9 Release
2011/3/15 Chetan Crasta : > ... > Of course the release of IE9 doesn't magically erase IE6's market > share, but it removes an important psychological barrier to abandoning > IE6 support. There is a technological barrier for IE6 on XP users; IE9 does run on Windows Vista and Windows 7 only. Ending support for IE6 does not help reducing engineering costs if the market share of IE7 is still high. Therefore, support should be graded, and user education is advisable. http://devblog.xing.com/qa/do-web-applications-need-to-provide-the-same-features-in-every-browser/ The other day, I reviewed an app that used Maybe this should be considered as obsolete now. regards, Ingo Chao __ 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] font-face syntax revisited
2011/3/3 Philippe Wittenbergh : > > On Feb 12, 2011, at 5:53 PM, Philippe Wittenbergh wrote: > >>>> http://dev.l-c-n.com/_temp/font_eot_woff.html >>> >>> Looks identical in IE9RC, Safari 5.0.3 and Opera 11.01 - on Vista. >> >> Thanks for testing - that means we really can use a cleaner, leaner syntax >> to load fonts. That makes it a great trick (and –bonus– it shaves a few >> bytes out of stylesheets). > > Turns out, it is not so bulletproof as it should. The compatibility mode(s) > in IE 9 throw a bit of a fit :-(. That is, MS 'fixed' the parser bug in those > modes, but of course IE 9 in compat mode doesn't support WOFF fonts. > See Ethan's follow-up post, which include one workaround / revised syntax: > http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax > > - and in the comments, Paul Irish suggest another workaround: >> > (or the equivalent header in your htaccess file, which is my preferred method) > > Philippe @Philippe IE9 RC1 on Win7, loads the woff file in IE9 standards document mode (it doesn't when in IE8 document mode) takes 2 seconds to load, though @Georg non-updated JS libraries that didn't work with IE9 might have lead to a nostalgic mood for IE8-mode. Finally switching to IE=edge these days here because of a delayed Prototype update. Regards Ingo Chao __ 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] Quirks mode detection
JWN schrieb am 02.03.2011 23:11 Hi Jim, http://bytes.com/topic/html-css/answers/627726-check-whether-browser-quirks-standards-mode thanks a lot (could not find anything useful that day)! I like the bookmarklet, since IE6 seems the only browser without "View page info". Although "It cannot be stressed enough that the exact behavior of the modes varies from browser to browser", it seems the trigger for standards/almost standards/quirks mode is the same for every browser? And it's always nice to provide a link (or a test page) to the page(s) in question so the list can better assist you. I know, but I had no control over it's robots.txt - should not be indexed in this state and domain. I am still puzzled by the IE6 box model bug in standards mode, and some weird effects. Will try to provide a link. Regards, 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] Quirks mode detection
Ingo schrieb am 01.03.2011 21:59
I have problems to detect if my DTD (and whatnot) are correct.
Since I run into the box model bug in IE6, header data must be wrong -
the bug supposedly only applies to quirksmode. I found this JS snippet
http://www.snippetstash.com/public/126
if(document.compatMode == 'CSS1Compat'){
alert("Standards mode");
}else{
alert("Quirks mode");
}
But it seems to not work: output is "Standards mode" although I have the
box model problem.
I tried the IE developer toolbar too, but it doesn't seem to display if
in Quirksmode or not.
How to detect the mode reliably?
What, there is no way to check for quirksmode? Or did I ask wrongly, or
indecently?
Regards, 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] Quirks mode detection
Hi,
I have problems to detect if my DTD (and whatnot) are correct.
Since I run into the box model bug in IE6, header data must be wrong -
the bug supposedly only applies to quirksmode. I found this JS snippet
http://www.snippetstash.com/public/126
if(document.compatMode == 'CSS1Compat'){
alert("Standards mode");
}else{
alert("Quirks mode");
}
But it seems to not work: output is "Standards mode" although I have the
box model problem.
I tried the IE developer toolbar too, but it doesn't seem to display if
in Quirksmode or not.
How to detect the mode reliably?
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] Has anyone ever seen rendering differences between Mac OS10.4, 10.5, and 10.6?
Goldsmith, Marissa schrieb am 27.01.2011 19:33 I was looking at OS10.4 and 10.5, while the other end-user had OS10.6. Any thoughts/insights would be great. There is not much depending on the OS. Font rendering and form elements come to mind. Gruss, 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] Drop-down navigation without javascript
Jess Hardy schrieb am 27.01.2011 23:16 > I am currently looking for a solution for creating a single level > drop-down that can be activated by the keyboard but does not use the > standard "suckerfish" approach. http://thinkhtml.blogspot.com/2009/09/timos-float-drop-css-only-dropdown-menu.html The new holy grail, fixed width, tho. Gruss, Ingo PS: The lists reply settings suck. Every time. __ 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 : > 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 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] br { content: '\A'; white-space: pre; } in Webkit
2011/1/19 Jukka K. Korpela : > Barney Carroll wrote: > >> Without getting into the murky, esoteric waters of the nature of >> 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/
[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] 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 : > 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/
Re: [css-d] is style="float: left" identical to align="left"
Am Freitag, 17. Dezember 2010 schrieb Philippe Wittenbergh : > > 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/
[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] Safari 5 / Win XP crashing ?
2010/7/13 Philippe Wittenbergh :
>
> 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 : > > 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 : > 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 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] CSS selector narrowing
Tim Snadden schrieb am 03.04.2010 23:23
> You could use a child selector for this... e.g.
>
> .container> ul li { background: url(bullet.png) left 5px no-repeat; }
> .container div ul li { background-image: none }
>
> Note that this won't work in IE6 due to lack of support for this
> selector. Or, how about this?
>
> .container div li {background-image: none; }
> .container div.want_this li, .container li { background:
> url(bullet.png) left 5px no-repeat; }
Thanks, both work.
Unfortunately I had to go back to my non-ideal solution, since this got
to same complexity (handling ol etc). There is nothing worse than
bad/incomplete markup, will try to fix it there.
Is there a good tutorial on selectors around, that is ONE document to
print (and read in spring sun)? I found either pretty basic tutorials,
or ones scattered over many small pages.
> The fact that you are using 'li li' in your selectors suggests nested
> lists but that's not what you indicated above.
Sorry, the posting got a little inconsistent while it developed :)
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/
[css-d] CSS selector narrowing
Hi all,
I have several unordered list types coming out of a CMS. For some lists,
I want to define a new bullet. Most lists are wrapped with a div,
unfortunately the most common (RTE output) is not. I hope there is a
white list scenario, where I can select only those lists I wanna give
bullets, but I lack some selector-fu.
foo
bar
foo
bar
foo
bar
Right now I do:
# generic white list
.container ul li {background: url(bullet.png) left 5px no-repeat;}
# black list
.container .unwanted1 li,
.container .unwanted1 li li,
.container .unwanted2 li,
.container .unwanted2 li li {background-image: none;}
Not nice, unexpected list types can pop up from any new extension to the
CMS, and need to be blacklisted. Is there a way to select "first-level"
ul li only? I ask for the first selector here:
# specific whitlist
.container ul li, # make it first level only (don't select if wrapped)
.wanted1,
.wanted2 {background: url(bullet.png) left 5px no-repeat;}
Happy easter + all the 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] Nested floats in IE6/7
2010/3/28 Bob Bob : >... > 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 : > ... > > > Hello > > > world > > > > 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: __ 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 : ... > 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] Gap in IE8
2010/3/8 N Duckworth : > 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] "Transcendant" web design and CSS3
2010/3/8 Jeff Zeitlin : > On Mon, 8 Mar 2010 09:11:25 +0900, Philippe Wittenbergh > 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] understading ul li as menus - A 5 question quest.
2010/2/28 MEM > > ... > 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 > On Sun, Jan 3, 2010 at 1:09 AM, Alan Gresley 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 : > ... 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] css for keyboard link focus
2010/1/5 David Laakso : > 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/
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] strict vs. transitional doctype and rendering differences
2010/1/5 Philippe Wittenbergh : > > 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
2010/1/4 Bruno Fassino : ... > 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 > a Text > 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 : ... > 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] 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?
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
strict vs. transitional
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;
}
Text
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] 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/
[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?
min-height
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
background: red;
min-height: 100%;
/* display: inline-block; */
/* width: 100%; */
}
This red area should fill the screen
__
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 :
> 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?
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] are there changes in the css validator?
2009/12/4 David Hucklesby :
> ...
> 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] conditional css for Opera?
2009/11/17 Marc Hall : > ... > 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] Changing the layout of a DL - Doable in CSS? How?
2009/11/19 Jeff Zeitlin : > ... > > 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] Stacking Order IE7 issue
2009/10/14 corey deep : > 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 . 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 : > 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 ??
2009/8/6 Al Sparber : > > 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] 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] Interesting IE 6 and 7 bug: absolute bottom position and floated sibling
2009/7/15 Darren Brierton : > ... 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 : > ... > > 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 :
> ...
> #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 > > 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 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
> 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)%20screen<http://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 : > 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 : >... 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 : ... > 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] 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] Div will not dislplay in proper location in FF
2009/2/23 Del Wegener : ... > http://www.edi-cp.com/newweb/index.php > In IE7 with the yellow border displays where I want > it. > In FF3.0.6 it seems to get stuck beneath 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] :: Absolute Positioning Disappears in IE6 & 7 :
2009/2/2 Amrinder > 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 > ... > > 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 > ... 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: 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
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: 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 > > ... > >> 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 > 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] footer not always sticking to bottom of window
2009/1/5 Debbie Campbell > 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] How to expend inner Div???
2009/1/5 shrimpy > > 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] site breaks in IE6 (I'm sure it's just one little thing)
2008/12/18 Scott Thigpen > My site www.sthig.com/unisource breaks in IE6 > http://www.sthig.com/unisource/1.jpg< > http://www.pubcon.com/redirect.cgi?f=83&d=3810456&url=http://www.sthig.com/unisource/1.jpg > > > http://www.sthig.com/unisource/2.jpg< > http://www.pubcon.com/redirect.cgi?f=83&d=3810456&url=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] Table displays strangely in IE
2008/11/20 Doug Jolley <[EMAIL PROTECTED]> > The code shown below sets up a 2-row table 300 px high. The top row > should be 80 px high and the remaining 220 px of height should be > allocated to the bottom row.. It works exactly as expected in > Firefox. However, in IE, the top row is much taller than the bottom > row. It almost looks like the 80 and 220 are reversed. Can anyone > tell me why? > I guess this is meant by CSS2.1:17.5.3: "CSS 2.1 does not define how extra space is distributed when the 'height' property causes the table to be taller than it otherwise would be." 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] 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 element is the parent > block-level element of right? both the inline-box of and the inline-box of its descendant live in the same containing block, a rectangle that is established by the nearest block level element (in this case probably ). The line box build by the inline boxes starts at the top of this containing block. > 2. Because the inline box generated by is the only inline box of its > line box, so the baseline of the line box is also the baseline of the > inline box, so the inline box is aligned with baseline of the > element, right? I think yes. > 3. Because the resides in the element, so the inline box > is contained within the inline box and the width of the inline > box becomes the width of the inline box? The width? The width of the construct is determined by the width of the image. The inline box of 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: > src="foo.jpg" > /> > 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 > -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] about inline, replaced element
ray wrote: ... > /> > where the img would be positioned? and why? 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 -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. 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 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] 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] 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] CSS tables
Kenoli Oleari wrote: > ... > The Sitepoint book proposes beginning to move away from IE 6&7, > 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] 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 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/
