Re: [css-d] css3 rounded shadow in opera/IE
On Wed, 04 Aug 2010 23:43:27 +0100, Martin mhe...@gmail.com wrote:
Hi there.
Is there any way of imitating it in opera and IE. It works fine in FF
and Chrome.
.shadowed {
border: 1px solid #c4c8cc;
-moz-box-shadow: 3px 3px 7px #999;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
-webkit-box-shadow: 3px 3px 7px #888;
-webkit-border-bottom-right-radius: 15px;
}
Or possibly ignore this class altogether when a user opens it with
opera/IE?
Thanks a lot.
Martin
For Opera, above 10.10 I think, maybe somewhat earlier versions for some
things,
simply give the rule without any vendor prefix.
e.g box-shadow: . and border-radius: ...
the usual recommendation is to give the rules with vendor prefix first,
followed by the 'natural' rule so that when Mozilla and Webkit fully adopt
the property, their browsers will respond to the 'natural' rule and ignore
the prefixed version. Your code above would look like:
.shadowed {
border: 1px solid #c4c8cc;
-moz-box-shadow: 3px 3px 7px #999;
-webkit-box-shadow: 3px 3px 7px #888;
box-shadow: 3px 3px 7px #888;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
}
IE will need some JavaScript to help it along, there are many versions
available of either stand-alone scripts or built into libraries like
jQuery.
A useful little tool that I just found for getting the syntax correct on
border radius is
http://border-radius.com/
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/
[css-d] CSS internationalization: transliteration
Hi! Just some notes after an useful conversation that I had this morning: http://onwebdev.blogspot.com/2010/08/css-internationalization.html HTH :-) Gabriele Romanato http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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] css3 rounded shadow in opera/IE
On Aug 5, 2010, at 4:13 PM, Duncan Hill wrote: the usual recommendation is to give the rules with vendor prefix first, followed by the 'natural' rule so that when Mozilla and Webkit fully adopt the property, their browsers will respond to the 'natural' rule and ignore the prefixed version. Thanks for repeating that recommendation :-). It (normal part of the cascade) is something that people apparently completely fail to understand, as there so many webpages that mis-handle it. For the record - WebKit (Safari 5 / Chrome 5) support border-radius without the vendor prefix (-webkit-). Box-shadow still needs the vendor prefix as it was not part of the CSS3 background and borders module when it became a Candidate Recommendation. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help in changing background colour in text box
I'm not sure if this is the place to ask this question. I've designed a form, but for the life of me I can not change the color of the background text field. Right now it is white, which doesn't match the rest of my design theme. I've gone into the css for the form and changed every background color to none, or black with no results. I'm really stump by this mystery. If some-one would have any ideas, that would be great. Thanks Chris URL: Contact Us-Inno-Vision Design __ 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] css3 rounded shadow in opera/IE
On Aug 5, 2010, at 5:14 PM, Duncan Hill wrote: For the record - WebKit (Safari 5 / Chrome 5) support border-radius without the vendor prefix (-webkit-). Box-shadow still needs the vendor prefix as it was not part of the CSS3 background and borders module when it became a Candidate Recommendation. I read an article (can't find my link) where, perhaps it was one of the dev versions, was responding to both sets of properties, with and without the prefix. This was producing different rendering in the browser and reinforces the importance of stating the rules in the correct sequence. I once made this WebKit testcase on this list (in a similar context even): http: //dev.l-c-n.com/CSS3_border-background/border-radius_vendor-cascade.html Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] input backgound
Hi Chris,
Something like this should work:
input, textarea {
background: #efefef;
}
Cheers
William
__
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] css3 rounded shadow in opera/IE
On Thu, 05 Aug 2010 08:49:38 +0100, Philippe Wittenbergh e...@l-c-n.com wrote: On Aug 5, 2010, at 4:13 PM, Duncan Hill wrote: the usual recommendation is to give the rules with vendor prefix first, followed by the 'natural' rule so that when Mozilla and Webkit fully adopt the property, their browsers will respond to the 'natural' rule and ignore the prefixed version. Thanks for repeating that recommendation :-). It (normal part of the cascade) is something that people apparently completely fail to understand, as there so many webpages that mis-handle it. So many tutorials ignore the actual specification and only concentrate on the -moz- and -webkit- prefixes, the problems will begin when the properties are fully adopted in all main browsers, including in all probability IE9. If the property is correctly applied to stylesheets now, the transition as more browsers become fully compliant, will be smooth and more or less consistent without much further effort. In some cases, tutorials display the correct property first, followed by the vendor prefix version which runs the risk of the correct cascade being defeated. Placing the property as the last rule will over-ride the vendor prefix whenever it can. (I know you know much more than me on this Philippe, just hope it makes it a bit more understandable to anyone just delving into the property) For the record - WebKit (Safari 5 / Chrome 5) support border-radius without the vendor prefix (-webkit-). Box-shadow still needs the vendor prefix as it was not part of the CSS3 background and borders module when it became a Candidate Recommendation. I read an article (can't find my link) where, perhaps it was one of the dev versions, was responding to both sets of properties, with and without the prefix. This was producing different rendering in the browser and reinforces the importance of stating the rules in the correct sequence. 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] css3 rounded shadow in opera/IE
On Thu, 05 Aug 2010 09:25:26 +0100, Philippe Wittenbergh e...@l-c-n.com wrote: On Aug 5, 2010, at 5:14 PM, Duncan Hill wrote: For the record - WebKit (Safari 5 / Chrome 5) support border-radius without the vendor prefix (-webkit-). Box-shadow still needs the vendor prefix as it was not part of the CSS3 background and borders module when it became a Candidate Recommendation. I read an article (can't find my link) where, perhaps it was one of the dev versions, was responding to both sets of properties, with and without the prefix. This was producing different rendering in the browser and reinforces the importance of stating the rules in the correct sequence. I once made this WebKit testcase on this list (in a similar context even): http: //dev.l-c-n.com/CSS3_border-background/border-radius_vendor-cascade.html Thanks Philippe, that's the one that proves the cascade. Forgive my poor memory 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] css3 rounded shadow in opera/IE
For IE try: http://css3pie.com/ CSS3 PIE is a .htc plugin that makes Internet Explorer 6-8 capable of rendering several of the most commonly used CSS3 properties ... On Thu, Aug 5, 2010 at 11:40 AM, Duncan Hill dun...@gmail.com wrote: On Thu, 05 Aug 2010 09:25:26 +0100, Philippe Wittenbergh e...@l-c-n.com wrote: On Aug 5, 2010, at 5:14 PM, Duncan Hill wrote: For the record - WebKit (Safari 5 / Chrome 5) support border-radius without the vendor prefix (-webkit-). Box-shadow still needs the vendor prefix as it was not part of the CSS3 background and borders module when it became a Candidate Recommendation. I read an article (can't find my link) where, perhaps it was one of the dev versions, was responding to both sets of properties, with and without the prefix. This was producing different rendering in the browser and reinforces the importance of stating the rules in the correct sequence. I once made this WebKit testcase on this list (in a similar context even): http: //dev.l-c-n.com/CSS3_border-background/border-radius_vendor-cascade.html Thanks Philippe, that's the one that proves the cascade. Forgive my poor memory 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/ __ 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 mini 5.1 ::
markup http://chelseacreekstudio.com/site/portfolio/01.php css around line 669 http://chelseacreekstudio.com/site/css/sisu.css The image does not fill the width of the window in Sanyo Mirro scp3810 for BoostMobile running Opera Mini 5.1 nor in the Opera Mini Simulator. http://www.opera.com/mobile/demo/ What to do? aside It does fill the window in Mac OS X 10.4 at 600, 480, and 400. And it fills the window in the iPhoney Simulator... /aside Best, ~d -- 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] IE8 float bug/s?
On Wed, Aug 4, 2010 at 6:36 AM, Zoran Zorkic zo...@gmx.net wrote: Yup, floating the img left did it. Thank you very much! I really love how a thing like this comes up and just block the progress. This was a interface for the app and I could not continue with fixing this first :( I did try asking a friend who is a lead developer at a web-dev company, but he just said I should stick to tabels if I run into CSS implementation problems. At times like this I wonder if he's right. I mean, his clients are not complaining, not do they care how a site is built, as long as it looks and works as it's supposed. His company does use a weird mix of CSS, HTML5, AJAX and tables. In my honest opinion, tables should only be used where they, semantically, make sense. I've used tables to control the display of forms just for the styling, but thats a challenge to do in any other way. Pages should be written in semantic HTML, then styled with CSS after the page is written, adding a few divs here and there for styling purposes. Writing pages this way will keep the content separate from the design to search engines and screen readers. If theres a challenge to do something in CSS, just email a list like this and get several opinions. There's no excuse for using table layouts anymore with how far everything's come in ways of web standards. Alex Mitchell http://gumware.com/ (in the process of a redesign) __ 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] IE8
I test new webpages with several browsers, including IE6 and IE7 (on separate machines). Windows Live is now suddenly touting The new Windows Live Internet Explorer 8 Browser in a newsletter. That newsletter has NO information on CSS processing by IE8 or on the possibility of installing more than one iE version. Do we have a summary of those points in the archives? Bruce __ 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
On Thu, Aug 5, 2010 at 12:52 PM, Alex Mitchell alex.mitch...@gumware.comwrote: On Thu, Aug 5, 2010 at 5:06 AM, bruce.som...@web.de wrote: I test new webpages with several browsers, including IE6 and IE7 (on separate machines). Windows Live is now suddenly touting The new Windows Live Internet Explorer 8 Browser in a newsletter. That newsletter has NO information on CSS processing by IE8 or on the possibility of installing more than one iE version. Do we have a summary of those points in the archives? Bruce In regards to installing multiple versions of IE, there's a nice program called IETester, which can run emulations of IE5.5, 6, 7, 8, and 8 compatibility mode. So far It's been a great tool for me. It even obeys the IE comment hacks. EDIT: here's a link: http://www.my-debugbar.com/wiki/IETester/HomePage http://www.my-debugbar.com/wiki/IETester/HomePage Hope this helps, Alex Mitchell http://gumware.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] CSS ListBox Styling - using multiple lines
On Wed, Aug 4, 2010 at 8:19 AM, Nancy Johnson njohnso...@gmail.com wrote: Hi, Is there any way to display content of one option area on multiple lines in a list box? select optionLots of text Lots of text / option optionMore text / option / select Appears something like this in design view Lot of text Lots of text Thanks in advance, Nancy I've been testing a few theories on this and haven't been able to come up with a way using strictly html and css. However, if you look at http://tunulo.us/ there's a hidden select element, which has its options recreated in ulli format which allows for much more flexible styling, and uses javascript to manipulate the hidden select element. Hope it helps, Alex Mitchell http://gumware.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] IE8
On Thu, Aug 5, 2010 at 5:06 AM, bruce.som...@web.de wrote: I test new webpages with several browsers, including IE6 and IE7 (on separate machines). Windows Live is now suddenly touting The new Windows Live Internet Explorer 8 Browser in a newsletter. That newsletter has NO information on CSS processing by IE8 or on the possibility of installing more than one iE version. Do we have a summary of those points in the archives? Bruce In regards to installing multiple versions of IE, there's a nice program called IETester, which can run emulations of IE5.5, 6, 7, 8, and 8 compatibility mode. So far It's been a great tool for me. It even obeys the IE comment hacks. Hope this helps, Alex Mitchell http://gumware.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] :: opera mini 5.1 :: resolved
David Laakso wrote:
markup
http://chelseacreekstudio.com/site/portfolio/01.php
Best,
~d
Resolved on the Opera Mini Simulator and Sanyo Mirro handset.
Settings: changed from low to: Image Quality High [ thanks to Duncan
Hill -- on another list ].
This brings the image up to a full width [and too wide] scale in both
portrait and landscape mode.
I added this to hold it within the window [was 96%]
@media handheld, screen and (max-width: 480px), screen and
(max-device-width: 480px) {
body#p #main img {
max-width : 35% !important;
height : auto !important;
}
} /* for Opera Mini 5.1 on SanyoMirro 4 BoostMobile*/
Best,
~d
--
desktop
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] css3 rounded shadow in opera/IE
On 08/05/2010 10:55 AM, Martin Möller wrote:
For IE try: http://css3pie.com/
CSS3 PIE is a .htc plugin that makes Internet Explorer 6-8 capable of
rendering several of the most commonly used CSS3 properties ...
On Thu, Aug 5, 2010 at 11:40 AM, Duncan Hill dun...@gmail.com wrote:
On Thu, 05 Aug 2010 09:25:26 +0100, Philippe Wittenbergh e...@l-c-n.com
wrote:
On Aug 5, 2010, at 5:14 PM, Duncan Hill wrote:
For the record - WebKit (Safari 5 / Chrome 5) support border-radius
without the vendor prefix (-webkit-). Box-shadow still needs the
vendor prefix as it was not part of the CSS3 background and borders
module when it became a Candidate Recommendation.
I read an article (can't find my link) where, perhaps it was one of the
dev versions, was responding to both sets of properties, with and
without the prefix.
This was producing different rendering in the browser and reinforces
the importance of stating the rules in the correct sequence.
I once made this WebKit testcase on this list (in a similar context
even):
http:
//dev.l-c-n.com/CSS3_border-background/border-radius_vendor-cascade.html
Thanks Philippe, that's the one that proves the cascade.
Forgive my poor memory
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/
__
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/
Thanks everyone,
The entries without vendor specific tags work fine on Opera.
The PIE extension seems to be partially working on IE. I'm testing
it on IE8. The drop-shadow effect seems to work fine. The radius property
doesn't seem to be supported (no round corners)
.shadowed-light {
border: 1px solid #c4c8cc;
-moz-box-shadow: 1px 1px 3px #999;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
-webkit-box-shadow: 1px 1px px #888;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
box-shadow: 1px 1px 3px #999;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
behavior: url(PIE.htc);
Thank you
__
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] css3 rounded shadow in opera/IE
On Thu, 05 Aug 2010 22:08:45 +0100, Martin mhe...@gmail.com wrote:
Thanks everyone,
The entries without vendor specific tags work fine on Opera.
The PIE extension seems to be partially working on IE. I'm testing
it on IE8. The drop-shadow effect seems to work fine. The radius property
doesn't seem to be supported (no round corners)
.shadowed-light {
border: 1px solid #c4c8cc;
-moz-box-shadow: 1px 1px 3px #999;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
-webkit-box-shadow: 1px 1px px #888;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
box-shadow: 1px 1px 3px #999;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
behavior: url(PIE.htc);
I think you might find that PIE only supports the shorthand version for
border-radius and all corners are therefore equal,
e.g. border-radius: 5px;
it is also MS proprietary which probably means that your CSS will not
validate if this concerns you (I've never used it and therefore haven't
tried to validate with it)
You might also like to take a look at something like jQuery or Mootools
that have scripted solutions for IE.
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/
[css-d] solved- navigation link a different colour when page is active
Hi All - thanks for all your help with this one - I created a class that targeted the a tag called 'current' so your suggestions were most helpful Many Thanks! Sofia Woods Shortie Designs 0433 179 193 www.shortiedesigns.com shortiedesi...@gmail.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/
