Re: [css-d] Hack to target IE9 beta
Thierry Koblentz wrote: How does IE9 beta show these test? http://css-class.com/test/css-testsuite/css2.1/declaration-string- character-exscapes.htm http://css-class.com/test/css-testsuite/css2.1/declaration-string- character-exscapes-000.htm These are the ones that work: 9, a, b, c, d Ie9 version: 9.0.7930.16406 -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz Mmm, ok, these are the same results that I see when IE9 preview is in IE7 document mode or when IE8 is in IE7 compatibility mode. For IE7, /9, /a, /b, /c and /d works. For IE8, /0, /9, /a, /b, /c and /d works. For IE9 preview, /0 works. Are you sure that you have IE9 beta in true IE9 mode and not IE7 compatibility mode? -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Seeking browser compatibility
On 9/15/10 8:24 PM, Keith Purtell wrote:
A typical example of a problem I'm trying to deal with is IE ignoring
max-width.- Keith Purtell
IE 7/8 support min/max.
IE/6 does not support min/max.
IE/6 is on death row.
Feed IE/6 width only [not min/max width].
#page {min-width: whatever; max-width: whatever; }
/* for IE 7 and compliant browsers*/
* html #page {width: whatever; }
/* for IE/6 -- only IE/6 will see the star hack */
Best,
~d
--
:: desktop and mobile ::
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Seeking browser compatibility
On Thu, 16 Sep 2010 01:24:40 +0100, Keith Purtell keithpurt...@keithpurtell.com wrote: In my search for information about accommodating different browsers, I've come across four recommended approaches: 1-Write a JavaScript to load separate style sheets. 2-Use JavaScript to write local css in the page header. 3-Use conditional comments to insert JavaScript or css into the header. 4-Write a single css style sheet that is cross-browser. A typical example of a problem I'm trying to deal with is IE ignoring max-width. I've found the least info about option 4; not sure it's possible? PS I'm trying to accomplish this without server-side functions. My cheap-o agreement with my hosting service limits me to plain html and css documents. Sites advocating these different approaches seem credible, so I'm left with the problem of figuring out which is best. I'd rather ask you folks than run tests that someone else has already performed. - Keith Purtell #1 + #2 will fail in a JavaScript disabled or non-capable browser. JavaScript should sensibly be used to 'enhance' the user experience, not to provide basic page functionality. #3 is a common practice for providing modified stylesheet/s only to versions of IE, and is a handy way of introducing a small piece of JavaScript that will let IE6 make use of pseudo classes for hover. A modified stylesheet for IE versions linked through a conditional comment will not be seen or loaded by the other mainline browsers as the conditional comment is a MS proprietary browser instruction. IE version targeting can be specific to each browser version. The sheet only needs to contain the 'variations/hacks' required providing that the conditional comment follows the links to the main stylesheet. If stylesheet validation is important to you, this method will allow your main stylesheet to remain fully valid. #4 Not as difficult as you seem to suspect, David has provided a couple of the important 'hacks' to target IE. They will be ignored by other browsers but may prevent validation of your stylesheet which isn't the end of the world in many cases. Much more important, in my opinion, is to write clean CSS that is focused carefully on what you are aiming for in terms of style, i.e. don't throw in rules for the kitchen sink if you don't have a kitchen sink on the site! Test and design in a fully compliant browser, THEN pick up the pieces for Internet Explorer. IE 8 will be reasonably steady with CSS 2 / 2.1 IE 7 trips up here and there but is not too hard to push into shape. IE 6 is far from dead (as most would wish), some things are fairly easy to correct, or you could opt for just providing it with a basic style via conditional comments. CSS 3 is only possible in any of them with the help of JavaScript. Best wishes Duncan __ 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] Seeking browser compatibility
Duncan Hill wrote:
On Thu, 16 Sep 2010 01:24:40 +0100, Keith Purtell
keithpurt...@keithpurtell.com wrote:
In my search for information about accommodating different browsers,
I've come across four recommended approaches:
1-Write a JavaScript to load separate style sheets.
2-Use JavaScript to write local css in the page header.
3-Use conditional comments to insert JavaScript or css into the header.
4-Write a single css style sheet that is cross-browser.
[snip]
- Keith Purtell
#4 Not as difficult as you seem to suspect, David has provided a couple
of the important 'hacks' to target IE. They will be ignored by other
browsers but may prevent validation of your stylesheet which isn't the
end of the world in many cases.
The hacks to target and filter the different versions of IE are all
valid but should not select anything.
* html /* IE6 */
*+html /* IE7 */
*:first-child+html /* IE7 */
The basic premise is that IE6 or below see this,
!-- -- html
and IE7 see this.
!DOCTYPE + html
IE8 was the first browser that became really hard to target with any hack.
Much more important, in my opinion, is to write clean CSS that is
focused carefully on what you are aiming for in terms of style, i.e.
don't throw in rules for the kitchen sink if you don't have a kitchen
sink on the site!
Test and design in a fully compliant browser, THEN pick up the pieces
for Internet Explorer.
IE 8 will be reasonably steady with CSS 2 / 2.1
IE8 was the best in CSS2 and CSS2.1 when it was released. Since that
time, Gecko has caught up. WebKit has it bugs and so does Opera. Now
with IE9 coming, it may be a battle between IE9 and Gecko that is the
most standard complaint browser with CSS2, CSS2.1 and CSS3.
IE 7 trips up here and there but is not too hard to push into shape.
Somewhat true but it is IE7 that still causes one to not go to hard
with either CSS or even the HTML. Some CSS bugs can not be fixed
without an altering or reordering of the HTML.
IE 6 is far from dead (as most would wish), some things are fairly easy
to correct, or you could opt for just providing it with a basic style
via conditional comments.
Give IE6 style that it can cope with, no conditional comments and no
mercy.
CSS 3 is only possible in any of them with the help of JavaScript.
IE8 support some CSS3.
Best wishes
Duncan
There is a reason that the following code (exactly as it appears) will
render the same in most browsers except for Opera and WebKit.
!DOCTYPE
divHello
style type=text/css
div {
background: silver;
color: red;
font-size: 300%;
}
Since most browsers when served HTML4.1 or HTML5 with a valid doctype
will happily repair tag soup.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Cross Browser Compatibility while using asp.net Server Control - DropDownList
The Problem: -- A DropDownList rendered by ASP.Net is displayed correctly in IE8. But, it appears as enlarged, boxed DropDownList in FireFox(Latest version). It happens only when this DropDownList is the First control on the WebPage. All other DropDownLists appearing as subsequent controls on same web page, appear correctly. The Help Needed What CSS shall I use to have correct rendering of DropDownList in both the browsers. With Kind Regards, Dilip Nagle __ 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] Hack to target IE9 beta
Hi Alan, Mmm, ok, these are the same results that I see when IE9 preview is in IE7 document mode or when IE8 is in IE7 compatibility mode. For IE7, /9, /a, /b, /c and /d works. For IE8, /0, /9, /a, /b, /c and /d works. For IE9 preview, /0 works. Are you sure that you have IE9 beta in true IE9 mode and not IE7 compatibility mode? Duh! I thought the mode was switched for all the tabs opened when in fact it is *per tab*. So yes, it works as advertised (as the text says on that page), but then how come my tests show that \9 works? -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ 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] Cross Browser Compatibility while using asp.net Server Control - DropDownList
The Problem: -- A DropDownList rendered by ASP.Net is displayed correctly in IE8. But, it appears as enlarged, boxed DropDownList in FireFox(Latest version). It happens only when this DropDownList is the First control on the WebPage. All other DropDownLists appearing as subsequent controls on same web page, appear correctly. The Help Needed What CSS shall I use to have correct rendering of DropDownList in both the browsers. URL? It's hard to have any idea without some code. ---Tim __ 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] Seeking browser compatibility
On 9/15/10 5:24 PM, Keith Purtell wrote: In my search for information about accommodating different browsers, I've come across four recommended approaches: 1-Write a JavaScript to load separate style sheets. 2-Use JavaScript to write local css in the page header. 3-Use conditional comments to insert JavaScript or css into the header. 4-Write a single css style sheet that is cross-browser. [...] At the risk of gilding the lily--you have already seen three excellent solutions-- here is yet another alternative: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ (If that link breaks, try http://goo.gl/CRQY ) Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can i vertically centre a UL?
Hey, Having given the best solution to what is impossible via CSS comes Tim with an impressive (off-list) javascript solution! Mad props Tim! This list has been here from day one (4yrs for me) and I am a self- taught webmaster (lol) bordering on having a decent career. It's only cos of peeps like you (mad props open source) that we can get on with things, independent of upbringing and/or opportunity. I am definitely going to give back whenever I can. CSS-discuss up for Presidency. Respect to you all, especially TIM! (solved) Thanks, CB :-D On 16/09/2010, at 4:39 AM, Climis, Tim wrote: -Original Message- From: Chris Blake [mailto:ch...@3pointdesign.com] Sent: Wednesday, September 15, 2010 3:41 PM To: Climis, Tim Subject: Re: [css-d] Can i vertically centre a UL? change the selector from .level3 to #menu ul.level3, and I think you'll be good. ---Tim That's great, thanks! I was wondering if there was any chance that it could always stay in the middle whether it had one link or six? Only with javascript. Keep the same CSS as you currently have, but add this to a function that gets called in the body onload. level3s = document.getElementByID(menu).getElementsByClassName(level3); for (var i=0; ilevel3s.length; i++) if(level3s[i].tagName = UL) level3s[i].style.marginTop = level3s[i].offsetHeight/-2 + px; Just a note, getElementsByClassName is a newish function in javascript, and I don't recall what browser support it has. But if you use a frame work, there's probably a reliable way to get a list of elements to loop through. jQuery, for example (I believe, as I haven't used it) would be something like level3s = $(#menu ul.level3); and then the same from there. (that method would let you get rid of the if check for the UL tag.) This works because the menus are displayed, but hidden way off to the left side of the screen. If they were hidden with display: none, you'd have to set them as visible first, then get the height, and then make it disappear again. ---Tim __ 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] Hack to target IE9 beta
Hi Alan,
Mmm, ok, these are the same results that I see when IE9 preview is in
IE7 document mode or when IE8 is in IE7 compatibility mode.
For IE7, /9, /a, /b, /c and /d works.
For IE8, /0, /9, /a, /b, /c and /d works.
For IE9 preview, /0 works.
Interesting...
It looks like if you replace background with color then \9 works.
Hence why I suggested to use :root #ie9 {color: teal\9;}
but then :root #ie9 {background: teal\9;} would fail.
So it's more reliable/safe to go with this instead:
:root #ie9 {background: teal\0;}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
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/
