Re: [css-d] order of styles in .css document?
I have found that there are occasions where order can help if you're fighting
FOUC (flash of unstyled content). Order never eliminates FOUC, but elements
closer to the document root at the top of the stylesheet seem to make things
less FOUCy.
Like Tom said, the order only can really matter in the context of the cascade.
If you've repeated the exact style or the exact specificity of an element, then
order will make a difference:
.top{color: blue}
.top{color: red}
div.top.left {border: 1px solid black}
div.left.withImage{border:1px solid red}
On Jul 2, 2012, at 3:08 PM, John wrote:
> I have a feeling the answer is "no," but want to make sure: does it matter
> what order styles are in within a .css document?
>
> so, for example, does it matter if your container style is at the end and
> your footer is at the top, long as the markup is styled with the correct
> styles?
>
> Thank you!
>
> John
> __
> 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] IE8, :hover, underline, and generated content
Thanks so much, Philippe. I checked in IE10 all the way back and all of them
did the same. Glad to know that my favorite browsers did get it right.
For the client, I ended up writing some jQuery to imitate generated content,
just for IE.
However, Ingo, I didn't think to try outline. I'll look into that and see if
the client approves (I hate writing JS for presentational stuff). Thanks for
the suggestion.
On May 30, 2012, at 1:17 AM, Ingo Chao wrote:
> 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/
__
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
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.
Frank M Taylor
http://frankmtaylor.com
@paceaux
On May 24, 2012, at 11:31 AM, pace...@madebypaceaux.com wrote:
> Hi All,
>
> I have a conundrum that I'm not sure how to fix. Firstly, here's a
> JSFiddle that you can review: http://jsfiddle.net/Paceaux/Gqzyh/ . Due to
> a non-disclosure agreement, I can't show you an actual page with full
> context.
>
> 1. I'm doing :hover{text-decoration:underline}
> 2. I'm adding generated content on links to PDFs
> 3. I don't want the generated content to inherit the color or the
> underline from the a:hover
>
> I don't have any problem with this in any of the modern browsers, but IE8
> still wants to show the underline when you hover the link. I've tried
> experimenting with border-bottom and gotten the same result.
>
> Is there any way through CSS to keep a:hover:after from inheriting
> text-underline in IE8?
>
>
>
>
>
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE8, :hover, underline, and generated content
Hi All,
I have a conundrum that I'm not sure how to fix. Firstly, here's a
JSFiddle that you can review: http://jsfiddle.net/Paceaux/Gqzyh/ . Due to
a non-disclosure agreement, I can't show you an actual page with full
context.
1. I'm doing :hover{text-decoration:underline}
2. I'm adding generated content on links to PDFs
3. I don't want the generated content to inherit the color or the
underline from the a:hover
I don't have any problem with this in any of the modern browsers, but IE8
still wants to show the underline when you hover the link. I've tried
experimenting with border-bottom and gotten the same result.
Is there any way through CSS to keep a:hover:after from inheriting
text-underline in IE8?
__
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] what does "!important" mean?
To follow up with what others have shared regarding !important, one of the major reasons you see "!important" in these major corporate websites is Internet Explorer. Internet Explorer 7 will ignore !important, while other browsers will not. So often, the "all other browsers" property is used with !important, and the IE property is not. Another reason - which I've never been okay with, is website content management systems. Many WCMS have rich text editors that allow a content author to style content. The CSS author uses !important to prevent those styles from making it into the published website. In modern browsers, though, !important still overrides your cascade. Outside of using it as an IE hack, I recommend avoiding it at all costs as it can really lead to the start of a bad day. smashing Magazine has a solid article on the subject, too: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/ Frank M Taylor http://frankmtaylor.com @paceaux On Apr 19, 2012, at 1:39 AM, David Thorp wrote: > Really? No one knows? > > I tried googling it and seeking it out on w3schools, but can't seem to find > the !important thing specifically. Just finds lots of (unhelpful) instances > of the word "important". (Search engines ignore punctuation supposedly). > > David > > > On 18/04/2012, at 6:03 AM, David Thorp wrote: > >> Greetings all... >> >> Every now and then, when I'm reading other peoples'/companies' css code, i >> see this "!important" thing added to the end of some of the lines in css. >> >> What does it do/change? >> >> Thanks! >> David. > __ > 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] "classes"...?
Perfect. so I'm not as confused as I thought. I prefer the term "modular" for writing HTML that can be repurposed in various settings, and especially when writing CSS, I often tell folks it's a "syndicated design"; as certain elements of the design can be reused across various websites (such as templates, or brand). I have seen very successful implementations of "syndicated design" - but you need well written HTML, very well separated stylesheets, and a well-designed CMS. It's a good approach for multiple websites maintained by one CMS. Usually you have upwards of ten stylesheets in the CMS, and it concatenates them into one or two for publishing. I certainly don't consider OOCS to actually be object oriented by the programming definition. I prefer calling it modular, or saying it's a "syndicated design". Regardless, the article addresses the question of "object oriented" in the context that I think has been asked. Frank M Taylor On Mar 9, 2012, at 3:43 PM, Tim Arnold wrote: > On Fri, Mar 9, 2012 at 5:28 PM, Paceaux wrote: >> >> >> Smashing Magazine has a great article on Object Oriented CSS. >> http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/. > > > While I do think that Nicole Sullivan's Object Oriented CSS has real > value (especially in high traffic sites), I haven't found it to be > necessarily better than the way I've always done CSS. And that name! > Though she named it OOCSS, it is most certainly not object oriented in > the way that a real OO language is. To call it that has just muddied > the waters between developers and front end people and kind of made us > (front end folks) sound like we don't know what we're talking about. > Sigh. > > That said, HTML and CSS are not object oriented and, as far as I can > know, never could be. Certainly bits of HTML and CSS can be created > using OO languages, but that's about web development and CMSes, not > CSS. > > > Best, > Tim > > > -- > > tim.arn...@gmail.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] "classes"...?
I think I was following along until now. I was assuming that the equivalent of "classes" in front-end is simply writing CSS to allow blocks of HTML to be modular; able to fit in a variety of wrappers without the need to rewrite HTML. I was also assuming that "object oriented CSS" meant that the stylesheets were written so that different aspects of the design were separate and distinct. It appears that I misunderstood the stated purpose of "object oriented" in HTML and CSS. Others in this discussion have already learned that I'm not that bright, so let's forgo attempts to brighten a dim bulb. Smashing Magazine has a great article on Object Oriented CSS. http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/. Frank M Taylor http://frankmtaylor.com @paceaux On Mar 9, 2012, at 11:56 AM, david wrote: > Perhaps the confusion comes from the word "class". A class is just a name > that tells the browser, "When you render this item, use these settings." > Outside of that, a class doesn't do anything like what an object in OOP does. > A class doesn't know how to render itself it. A class doesn't respond to any > messages, contain any functions, or return any results. The browser > interprets the CSS and might process any MS filters (Javascript) found in the > class definition. > > On 03/09/2012 08:30 AM, Paceaux wrote: >> Hi David, >> Though I am not a very good programmer, I am somewhat familiar with >> object-oriented programming languages and methodologies. >> >> So I don't know how accurately I can answer the question, but I can tell you >> that I certainly believe it is possible to write HTML and CSS in an >> object-oriented approach (based on my understanding of object-oriented). My >> employer specializes in CMS implementations where object-oriented front-end >> code has significant benefits in large, enterprise web content management >> systems. In fact, the company for which I work is adopting my >> object-oriented methodologies for one of our clients. >> >> I can't give you a short answer to the methodology I've adopted, but I wrote >> a blog post a while back on the layers of design - which is the foundation >> for my approach. >> http://blog.frankmtaylor.com/2011/11/03/the-layers-of-design/ feel free to >> poke holes in that theory. >> >> >> >>Frank M Taylor >>http://frankmtaylor.com >>@paceaux >> >> >> On Mar 9, 2012, at 3:17 AM, David Thorp wrote: >> >>> Greetings all... again... ;) >>> >>> I'm familiar with some concepts from object oriented programming. In >>> particular something which i think is called encapsulation. >>> >>> In languages like C++ you build classes which are portable mini programs >>> that do stuff. You can pick them up and plug them into any C++ program, >>> you don't have to know how it works, you just know what it does and its >>> input and output and you can just use it without any fuss. >>> >>> I'm looking at how HTML and CSS work, and wondering if there's some way to >>> do similar things like this in web development. I understand javascript >>> and php are both object oriented languages, but I'm just talking about html >>> and css. >>> >>> For example... with the help of Vince (ghodmode) and a couple of others on >>> this list I have built a really nice simple list layout. (see: >>> http://www.davidthorp.name/testingstuff/ghodmode-a.html). >>> >>> Say I know want now to pick that list up and put it somewhere in the middle >>> of another larger page (something with a lot more stuff in it, say >>> http://www.davidthorp.name/testingstuff/browser-0c.html). >>> >>> Or more accurately, I want to pick that list up and put different versions >>> of it (ie. same layout but perhaps different numbers of columns, different >>> alignments in each column, etc) into various locations in a more complex >>> layout. >>> >>> Ideally I want to keep that list in it's own file and just refer to it from >>> the main file. I don't want to have to copy and paste the code from the >>> list file into the main file. >>> >>> If this was C++, that would be relatively simple. The class would have >>> methods that you can call with different parameters for different >>> situations (eg. number of columns, alignment in each column, whatever). &
Re: [css-d] "classes"...?
Hi David, Though I am not a very good programmer, I am somewhat familiar with object-oriented programming languages and methodologies. So I don't know how accurately I can answer the question, but I can tell you that I certainly believe it is possible to write HTML and CSS in an object-oriented approach (based on my understanding of object-oriented). My employer specializes in CMS implementations where object-oriented front-end code has significant benefits in large, enterprise web content management systems. In fact, the company for which I work is adopting my object-oriented methodologies for one of our clients. I can't give you a short answer to the methodology I've adopted, but I wrote a blog post a while back on the layers of design - which is the foundation for my approach. http://blog.frankmtaylor.com/2011/11/03/the-layers-of-design/ feel free to poke holes in that theory. Frank M Taylor http://frankmtaylor.com @paceaux On Mar 9, 2012, at 3:17 AM, David Thorp wrote: > Greetings all... again... ;) > > I'm familiar with some concepts from object oriented programming. In > particular something which i think is called encapsulation. > > In languages like C++ you build classes which are portable mini programs that > do stuff. You can pick them up and plug them into any C++ program, you don't > have to know how it works, you just know what it does and its input and > output and you can just use it without any fuss. > > I'm looking at how HTML and CSS work, and wondering if there's some way to do > similar things like this in web development. I understand javascript and php > are both object oriented languages, but I'm just talking about html and css. > > For example... with the help of Vince (ghodmode) and a couple of others on > this list I have built a really nice simple list layout. (see: > http://www.davidthorp.name/testingstuff/ghodmode-a.html). > > Say I know want now to pick that list up and put it somewhere in the middle > of another larger page (something with a lot more stuff in it, say > http://www.davidthorp.name/testingstuff/browser-0c.html). > > Or more accurately, I want to pick that list up and put different versions of > it (ie. same layout but perhaps different numbers of columns, different > alignments in each column, etc) into various locations in a more complex > layout. > > Ideally I want to keep that list in it's own file and just refer to it from > the main file. I don't want to have to copy and paste the code from the list > file into the main file. > > If this was C++, that would be relatively simple. The class would have > methods that you can call with different parameters for different situations > (eg. number of columns, alignment in each column, whatever). You then add a > #include statement at the beginning of your main file, that effectively makes > the class part of your program, and you call it from the main file with > method calls and parameters, in each different situation. > > > So... my question is... Is this possible in web development at all? > > Is it possible just with plain HTML and CSS files? > > If not, is this where I need PHP? Can I achieve the above with PHP? > > And if the answer to that is no, then is there any way to achieve this > concept at all? Or am I just barking up the wrong tree here? > > Thanks! > David. > > > PS. for what it's worth the data in the records/rows in the list are > ultimately going to be generated dynamically by PHP or other calls to a > database, so the above question is only really about the table, the divs, and > the css styling, not the data in the list. Hope that makes sense. > __ > 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] Inappropriate uses of CSS3
Thanks Vince, David, Barney, and others for your constructive thoughts and suggestions. I would think this is certainly the best forum to discuss when and why we use certain CSS3 features. I didn't consider Mr. Laasko's response to be a slide against my designs at all. We're all professionals and I just figured it was a general guideline. The input is great and I'll be sure and cite each of you in the post. 1. I hadn't considered the "re-purposing" of text shadow for the engraved effect, but that's great. So use text-shadow for text-shadows, not effects- especially ones that aren't cross-platform friendly? 2. text-shadow on body copy is another one. So…. use text-shadow for presentational text, not body copy? 3. I'll admit that when transforms and transitions became supported, I abused them. So, don't use them for the score interactions? 4. Animations are definitely becoming popular, and I'm wondering if and when Animations should be used as a part of the core UX. Should animations be reserved for games or specific and expected interactions? On my own site, I'm using an animation to fade in the content when the page first loads. Would that be an abuse? So would it be good to establish (as part of my central thesis of the blog post) that the shinier parts of CSS3 are good for enriching the design, but not the core UX? Therefore, Text shadow, animations, and transitions are best when they aren't paired with :hover, :focus, or :active. Frank M Taylor On Feb 19, 2012, at 2:49 AM, Barney Carroll wrote: > Hiya Frank, > > One of the things that really irritated me when browser started > supporting text-shadow was those clever clogs who figured out how to > use a lighter colour outset and a darker colour inset shadow to > produce an engraved effect on all their body text. I suspect most of > these people were Mac-based designers, since it often made text > illegible on Windows. > > Having said that the fad has had its time in the sun and people tend > to stay away from text-shadows in body copy. > > Transitions are generally abused the same way these days – they're > getting mainstream recognition and people implement them all over the > place because it's fun. > > Elliot Jay Stocks' idea of transitioning all layout metrics on > viewport resize [1] is definitely a fun trick, but in practice the > effect is neither conducive to better user experience nor > aesthetically pleasing. This trick is being used all over the place > now – even Gmail does it. > > Transitions on hover is the other popular thing. CSS already handles > the representations of an object under multiple states – why not > animate that transition? The why is because we can, and animation is > nice. But in practice I've found people want instantaneous feedback > from their actions – by and wide, hover, click and focus are not going > to be strange new experiences users will wonder at – if there are > usability cues that assist their journey, they will want them > instantaneously. Animation for core UX like that can become unsettling > noise which distracts and hinders the user. > > But these are ultimately kill-joy arguments rooted in vague > unsubstantiated opinions on minor usability concerns. > > [1] http://elliotjaystocks.com/blog/css-transitions-media-queries/ > > Regards, > Barney Carroll > > barney.carr...@gmail.com > +44 7429 177278 > > barneycarroll.com > > > > On 19 February 2012 03:06, Ghodmode wrote: >>> On Fri, Feb 17, 2012 at 5:14 PM, David Laakso >>> wrote: >>> >>>> On Fri, Feb 17, 2012 at 12:08 PM, Paceaux >>>> wrote: >>>> Howdy all,\ >>>> >>>> I'm writing a blog post on inappropriate or tacky uses of CSS3. >>>> >>>> --- >>>> >>>> Oh, my... how easy. >>>> Try writing a blog post on appropriate uses of CSS3. And live up to it >>>> on your own site... >>>> Best, >>>> ~d >>>> PS Do you have a CSS question? >>>> >>>> >>>> Chelsea Creek Studio >>>> http://ccstudi.com >> >> On Sat, Feb 18, 2012 at 1:53 PM, bill scheider >> wrote: >>> Ouch :) >>> >>> -- >>> Wisdom tells me I'm nothing. Love tells me I'm everything. Between the two >>> my life flows. >>> -- *Nisargadatta Maharaj* >> >> Ya David, I gotta admit, that was kinda harsh. At least offer the guy >> some constructive criticism instead of an unexplained jab at his site. >> >> I think his site (http://frankmtaylor.com) looks pretty good.
[css-d] Inappropriate uses of CSS3
Howdy all, I'm writing a blog post on inappropriate or tacky uses of CSS3. The title of the post is actually, "Treat your CSS3 like a lady, not a one-night stand". So far, these are the topics I've thought of addressing: text and box shadows making things illegible or distracting opacity and rgba making it too hard to read gradients where they aren't needed border radius that's just too round for what's needed Does anyone have any examples or thoughts on when a CSS3 technique has crossed the line from being elegant and functional to just plain ugly or annoying? Frank M Taylor http://frankmtaylor.com @paceaux __ 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] problem with opacity
instead of opacity, try setting the transparency of the background for your DIV
with RGBA or HSLA.
background: rgba(250, 250, 250, .4);
Frank M Taylor
http://frankmtaylor.com
@paceaux
On Feb 16, 2012, at 12:38 PM, Angela French wrote:
> Hello,
> I am wanting to achieve the following effect:
>
> A div with a white background color with a 40% opacity. This div is
> absolutely positioned over a picture so that that picture comes through the
> div because of its opacity setting. This part works fine.
>
> Then in that div I want to use a tag with a background color of white.
> This is the part that is not working so well. It appears that this
> background color is inheriting the opacity of the div it lives in as the
> white background-color seems to have no effect. I have even reset the opacity
> of this by setting it to 100.
>
> I'm sorry I can't provide a link, but here is my CSS and code. Hoping
> someone can set me straight.
>
> div.skiptomain
> {
> position:absolute;
> height:35px;
> width:145px;
> top:0;left:380px;
> border-bottom-left-radius:8px 8px;
> background-color:#fff;
> opacity:0.4;
> filter:alpha(opacity=40);
>
> }
> div.skiptomain p
> {
>
> font-weight:bold;
> background-color:#ff !important;
> opacity:1.0;
> filter:alpha(opacity=100);
> }
>
>
>
>
> Skip to main content
>
>
>
> Thank you!
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> http://www.checkoutacollege.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] menu in separate page?
Actually…. there is a way to do this with plain ol' HTML. Kind of. It's called SHTML. I learned about it on one of my last clients (I promptly switched him to PHP). I'd never recommend the method because HTML is a markup language, not a server-side language…. and I can't imagine the security issues that would stem from using shtml. This is wildly off-topic from CSS, so I'll summarize by suggesting that you research PHP. Look for best practices surrounding or Frank M Taylor http://frankmtaylor.com @paceaux On Feb 2, 2012, at 1:06 PM, Michael Stevens wrote: > Is this the same question from the WebDesign L list? There was one earlier > this morning dealing with it and it was addressed pretty well. Outside of > using an actual server side language like PHP, probably javascript as well, > you can't accomplish it with just HTML. > > Mike > > -Original Message- > From: css-d-boun...@lists.css-discuss.org > [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of john > Sent: Thursday, February 02, 2012 12:34 PM > To: css-d@lists.css-discuss.org > Subject: [css-d] menu in separate page? > > Can somebody point me to a tutorial that shows how to put a menu into it's > own page, the advantage that you edit/adjust once, and all pages are > updated, rather than editing the menu on each page. > > I am googling for this, but not finding anything that exactly deals with > this, at least doesn't look like it to me..lots of the search results are > from years ago ( like, 2007 ) and others say "It can't be done!" > > thank you for any clues about this! > > John > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- > http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-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] I Have a Really Big 'm'
I'm giving up on this topic. After reading the specs numerous times, I'm realizing that the specs themselves are circular. I feel like I'm trying to find out if the chicken or the egg came first. On ems and exes: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units :" em: the 'font-size' of the relevant font. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)" "ex: the 'x-height' of the relevant font" "If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. " On font-size: http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-size: On all other properties, 'em' and 'ex' length values refer to the computed font size of the current element. em = font-size = em = font-size = em = font-size === paceaux wants to finger paint @paceaux On Jan 25, 2012, at 3:04 AM, Ghodmode wrote: > I think we're going around in circles. > > Here's my existing experiment page: > http://www.ghodmode.com/experiments/emsize.html > > I'm going to do another one with more information. > > It's a square block, 1em wide and tall, with a lowercase 'm' inside > it. I used Javascript (jQuery) to get the width and height of the > block and the numbers it comes up with match what Firebug & friends > say for the computed height and width. > > It shows that an em is as wide as it is tall, but it's not the size of > the letter 'm'. > > Since the block's width is the same as its height, that shows that em > is both a horizontal measurement and a vertical measurement. However, > the letter doesn't fit, so an em isn't based on the size of a letter > in the font specified... at least not the letter 'm'. > > more inline ... > > On Wed, Jan 25, 2012 at 6:28 AM, Tim Climis wrote: >>> From my this, it really visually appears as if the em is not an "m" or an >>> "M" in >>> even the most plain typeface. That's when the text is centered. If it's >>> left or >>> right aligned, you can fit in two more "m". >> >> As has been discussed before in this thread, em is not a horizontal measure. >> It is a vertical measure, and is defined as the size of the font. > > But a 1em block is a square. It's the same size vertically as it is > horizontally. How can it be only a vertical measure, or only a > horizontal measure? > > The problem is, it's not a measure of anything. It's relative to the > font size, but none of the letters in the font are necessarily 1em > tall or wide. This is the part I didn't understand before. > > >> Directly from the CSS 1 spec (just to show that it's always been defined >> this way - at least in CSS) "ems, the height of the element's font" >> http://www.w3.org/TR/CSS1/#units > > You copied that from the comment in one of the example code blocks, > not the actual description of the unit. It still leaves the question: > How big is that? > > What it actually says is "The relative units 'em' and 'ex' are > relative to the font size of the element itself." It doesn't go on to > say how they relate to the font size. > > >> The CSS 2.1 spec gets more precise, particularly in regard to x-height. >> http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units > > The CSS 2.1 spec does make it much clearer by linking to the font-size > property definition. So, the 'em' is the font-size. But then it says > "The 'em' unit is equal to the computed value of the 'font-size' > property of the element on which it is used." That makes me ask > "Huh?! How is it computed? How big is an 'em'?!" If they just took > that word "computed" out of there, it would have been easier for me to > understand. > > That's perfectly clear to some of you on this list? > > What I think it should say is that 1em is equal to the element's > font-size. If the font-size isn't defined, the size of the em is > equal to the user agent's default font size. > > -- > Vince Aggrippino > a.k.a. Ghodmode > http://www.ghodmode.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] I Have a Really Big 'm'
geeze, this morning I thought I knew this stuff. Now I'm lost.
I wasn't thinking that the em or the ex stretched the glyph. I understand that
the font-size constructs a square out of the measurement, regardless of the
type of measurement.
assuming an "m" is 16px wide but 10px tall, it's total space up on the screen
is 16sqr pixels, right? That just means that visually, there's more vertical
space in the 16 sqr px. Right?
assuming the inverse measurements are true, the total space is still 16sqr px,
right? These two questions are why I would adjust either line-height or
letter-spacing by "ex"; to compensate for disproportionate visual space.
So my question now is the difference between "em" and "ex". Is "em" a
horizontal measurement and "ex" a vertical? I get that font-size will make both
of them a square, but are they relative to x and y axes, respectively?
Frank M Taylor
http://frankmtaylor.com
@paceaux
On Jan 24, 2012, at 6:13 PM, Philippe Wittenbergh wrote:
>
> On Jan 25, 2012, at 9:13 AM, Paceaux wrote:
>
>> I read the CSS2 spec this afternoon, and learned that the em is really an
>> "em square" and the square is how font-size is determined.
>> http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html
>
> No, not really. 'em' as an unit of measurement is defined here (along with
> 'ex'):
> http://www.w3.org/TR/CSS21/syndata.html#em-width.
>
> The 'em square' mentioned in your link above means that the size of the font
> increases proportionally (glyphs are scaled in both directions). Both
> increase or decrease the size of text based on the font-size of the root
> element and ultimately based on the font-size expressed by the user
> preferences. '1em' declared on the root element () means - match the
> font-sixe in the user pref, usually 16px by default.
>
>> So out of new-found ignorance, I have questions:
>>
>> 1. If em is really the "em square", and ex is strictly an "x", then am I
>> right to conclude there is not a relative horizontal measurement?
>
> They are both units for vertical and horizontal measurement.
>
>> 2. Since the em is a square, width of the glyph affects line-height, right?
>
> No. The width of glyphs doesn't come into play here. But font-size may affect
> line-height, yes.
>
>> 3. Since "ex" isn't an "ex square", body{font-size: 2ex} sets the width of
>> the glyph's the same as its height, correct?
>
> Again, no. Those css units do not affect the width of individual glyphs –
> iow, they do not stretch of compress glyphs (if you want to do that, you'll
> need to look at the 'font-stetch' property, which is poorly supported and
> will only work if the font-family has a narrow/condensed/... face [1]). They
> scale the overall font-size of the text. body{font-size: 2ex} would make the
> glyphs both taller and wider.
>
>> 4. Is this the reason that body{line-height: 2ex} is shorter than
>> body{line-height: 1em}?
>
> 1em is not equal to 2ex for most fonts.
>
>> Since font-size is always a square, then "em" seems appropriate when the
>> typeface is more squared. Therefore:
>> 1. If the typeface is wider than it is tall, it seems that I should use
>> body{line-height: 2ex} rather than body{line-height: 1em} or
>> body{line-height:1}.
>> 2. If the typeface is taller than it is wide, then it seems that I should
>> use{letter-spacing:-.5ex}
>
> To both questions: why ?
>
> [1] This test case should work correctly on Firefox 3.6 + running on OS X
> 10.5 and newer (with some bugs on 10.7.2) :
> http://dev.l-c-n.com/_temp/font-stretch1.html
> OS X only because it uses fonts installed by default on OS X. A similar test
> case could be created to work across platforms with Gecko based browsers
> using an appropriate family through @font-face
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.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/
Re: [css-d] I Have a Really Big 'm'
Years ago I read a book on typography and it didn't click until today that the
"em" isn't strictly a horizontal measurement in CSS. I'd never thought that
hard about it until today. I was naturally concluding that "em "was a
horizontal measurement and "ex" was vertical - and that either could be used as
relative measurements. I'd never thought otherwise until today.
I read the CSS2 spec this afternoon, and learned that the em is really an "em
square" and the square is how font-size is determined.
http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html
So out of new-found ignorance, I have questions:
1. If em is really the "em square", and ex is strictly an "x", then am I right
to conclude there is not a relative horizontal measurement?
2. Since the em is a square, width of the glyph affects line-height, right?
3. Since "ex" isn't an "ex square", body{font-size: 2ex} sets the width of
the glyph's the same as its height, correct?
4. Is this the reason that body{line-height: 2ex} is shorter than
body{line-height: 1em}?
Since font-size is always a square, then "em" seems appropriate when the
typeface is more squared. Therefore:
1. If the typeface is wider than it is tall, it seems that I should use
body{line-height: 2ex} rather than body{line-height: 1em} or
body{line-height:1}.
2. If the typeface is taller than it is wide, then it seems that I should
use{letter-spacing:-.5ex}
This morning I totally understood font-sizing. Now I don't know anything.
Please share any insights you have.
Frank M Taylor
http://frankmtaylor.com
@paceaux
On Jan 24, 2012, at 3:28 PM, Tim Climis wrote:
>> From my this, it really visually appears as if the em is not an "m" or an
>> "M" in
>> even the most plain typeface. That's when the text is centered. If it's left
>> or
>> right aligned, you can fit in two more "m".
>
> As has been discussed before in this thread, em is not a horizontal measure.
> It is a vertical measure, and is defined as the size of the font.
>
> Directly from the CSS 1 spec (just to show that it's always been defined this
> way - at least in CSS) "ems, the height of the element's font"
> http://www.w3.org/TR/CSS1/#units
>
> The CSS 2.1 spec gets more precise, particularly in regard to x-height.
> http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units
>
> It was (a really long time ago, and only a really long time ago *in print*) a
> measure of the width of a capital M. It has been (and is defined in the CSS
> spec as) the font height for quite a while.
>
>> more interestingly, I looked at the "computed size" in Chrome, and it
>> reported that the div had a calculated size of 140px.
>>
>
> That's not interesting at all. That's expected. The font-size is 14px (you
> set it to that). 1 em is the font-size. So 10em would be 14px x 10=140px.
>
>
__
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] I Have a Really Big 'm'
This a curious subject that you've brought up. So to satisfy my curiosity as to the size of an em and an ex, I tried the most boring experiment possible: http://cssdesk.com/aHUQR From my this, it really visually appears as if the em is not an "m" or an "M" in even the most plain typeface. That's when the text is centered. If it's left or right aligned, you can fit in two more "m". However, the x is definitely an "x" and not an "X". (at least in Chrome on a Mac) more interestingly, I looked at the "computed size" in Chrome, and it reported that the div had a calculated size of 140px. Now I really feel ignorant on the subject of font-size calculation. Good job! (that's a compliment, not sarcasm). Frank M Taylor http://frankmtaylor.com @paceaux On Jan 24, 2012, at 1:06 PM, Paceaux wrote: > I think other comments have kind of addressed that for most of us in this > discussion group, we knew that the em isn't one "M". > > Regarding your article, I have a few thoughts: > 1. Experiments have results. For the sake of your readers, provide the > results of the experiment. > 2. explain the experiment. I can see you've bordered out the width and > height, but for a reader unfamiliar with em calculation, they won't > understand the relationship that pixels will have to it. > 3. I'm struggling to understand your thesis or argument. Is it that the em is > not the best letter to measure by? Or is it that the em isn't always an > "em"? The statement "I have a really big m" doesn't support either of the > arguments. That's fine if it doesn't, but you should clearly, in the first > two sentences, state your argument/thesis. > > A few other things to consider: > > "em" is generally thought as the relative width of the relevant font. The > CSS2 spec, however, doesn't say that explicitly. It refers to the "em square" > "ex" is relative height of the relevant font. > Some UAs may base x-height on a measurement between "o" and the baseline. > I've read where the em is calculated based on the "default" font size. so you > may want to rerun the experiment with a default font. > > Also: > I think if you're making the argument that an em isn't always an "M", why not > also check to see if an "ex" is an "x" > > > > > > > Frank M Taylor > http://frankmtaylor.com > @paceaux > > > On Jan 23, 2012, at 11:23 PM, Ghodmode wrote: > >> I wrote a new blog entry inspired by past discussions on WebDesign-L >> and CSS-D: "I Hava a Really Big 'm'" >> >> >> Contemporary wisdom says that we should use the relative unit ‘em‘ >> for most, if not all, element measurements in web design. >> >> So, how big is an ‘em’? I set up a small experiment to tell me just that. >> >> Continue reading → >> http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ >> >> >> I appreciate any comments, questions, or complaints. >> >> Thank you. >> >> -- >> Ghodmode >> http://www.ghodmode.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/ __ 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] I Have a Really Big 'm'
I think other comments have kind of addressed that for most of us in this discussion group, we knew that the em isn't one "M". Regarding your article, I have a few thoughts: 1. Experiments have results. For the sake of your readers, provide the results of the experiment. 2. explain the experiment. I can see you've bordered out the width and height, but for a reader unfamiliar with em calculation, they won't understand the relationship that pixels will have to it. 3. I'm struggling to understand your thesis or argument. Is it that the em is not the best letter to measure by? Or is it that the em isn't always an "em"? The statement "I have a really big m" doesn't support either of the arguments. That's fine if it doesn't, but you should clearly, in the first two sentences, state your argument/thesis. A few other things to consider: "em" is generally thought as the relative width of the relevant font. The CSS2 spec, however, doesn't say that explicitly. It refers to the "em square" "ex" is relative height of the relevant font. Some UAs may base x-height on a measurement between "o" and the baseline. I've read where the em is calculated based on the "default" font size. so you may want to rerun the experiment with a default font. Also: I think if you're making the argument that an em isn't always an "M", why not also check to see if an "ex" is an "x" Frank M Taylor http://frankmtaylor.com @paceaux On Jan 23, 2012, at 11:23 PM, Ghodmode wrote: > I wrote a new blog entry inspired by past discussions on WebDesign-L > and CSS-D: "I Hava a Really Big 'm'" > > >Contemporary wisdom says that we should use the relative unit ‘em‘ > for most, if not all, element measurements in web design. > >So, how big is an ‘em’? I set up a small experiment to tell me just that. > >Continue reading → > http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ > > > I appreciate any comments, questions, or complaints. > > Thank you. > > -- > Ghodmode > http://www.ghodmode.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] first character in a paragraph should be bigger
I believe that ::first-letter is CSS3 only, so just be mindful of that.
I tinkered around in one of my playground sites and came up with this. It
required me to tweak the settings of my article h1 as well as the
::first-letter. Obviously you could apply this to , as well:
article h1[
font-size: 1.5em;
display:block;
text-indent: -1.5em;
margin-bottom: 2em;
}
article h1::first-letter{
font-size: 3em;
line-height: 1em;
vertical-align: -.5em;
float:left;
letter-spacing: .55em
}
You're welcome to take and twist the CSS you see there however you'd like:
http://html5bible.org/Bible/new-testament/james/index.html
Frank M Taylor
http://frankmtaylor.com
@paceaux
On Jan 16, 2012, at 3:40 PM, Martin wrote:
> Hi there,
>
> I'm wondering if it'd be possible to style the first letter of a paragraph so
> that it'd be 3-lines height (I mean generally bigger) as it was in old texts,
> eg:
>
>
>
> | irst letter of each paragraph should be
> - as big as that. I don't know if that's possible
> | but it'd be nice to know it. It'd look good on
> my website. Thank you very much
>
> Would it require using pictures or css would do?
>
> regards
>
> Martin
> __
> 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] How To Clear CSS Caching?
I've found that the latest version of Chrome(16) is doing this. In Chrome, go to Preferences > Under the Hood and then look in the Privacy section. There's an option for "predict Network actions to improve page load performance". I've theorized that this might be the issue, but I'm uncertain. I haven't been paying close-enough attention, but I think the problem persists with this unchecked... ….. and I have the problem even if I'm testing a local file. I haven't researched the issue much because I figured it must've been me, but now that you've raised it, it's time for me to get on Google. Frank M Taylor http://frankmtaylor.com @paceaux On Jan 3, 2012, at 10:29 AM, Elli Vizcaino wrote: > Hello Everyone, > > > I'm noticing that not every browser refreshes the CSS even when using shift + > refresh. Based on this article: http://css-tricks.com/update-on-css-caching/ > there is a way to make sure the browser gets the most updated stylesheet when > requesting from the server. However, the article isn't' clear on how to > implement this, as in, it doesn't provide an actual code sample. Plus some > seem to require programming. Anyone know how I can get apply this so I can my > CSS is also updated in the browser when I make changes? > > > 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] Creating angled corner with CSS
I expanded the jsfddle window and I saw it. The far right side is skewed.
so, you could use transform and :after
I'll leave it to you to fill in the appropriate styles, vendor prefixes, and
positioning, but I'd start with this:
.bg:after{
content: "";
transform: skew(5deg, 0)
}
Frank M Taylor
http://frankmtaylor.com
@paceaux
On Dec 1, 2011, at 9:11 AM, Mads Erik Forberg wrote:
> Hi Frank,
>
> If you se my example on JSFiddle, http://jsfiddle.net/8jxxH/ , you'll see
> what I mean :-)
>
> Thank you for your response
>
>
> / Mads
>
> Den 01.12.2011 16:48, skrev Paceaux:
>>
>> Hi Mads,
>>
>> I'm not sure if I understand what you mean by "angled corner". Do you mean a
>> rounded corner? If that's the case, then you can certainly do that with
>> border-radius.
>>
>> Or are you looking for something other than a rounded or traditional 90
>> degree angle?
>>
>>
>>
>>
>> Frank M Taylor
>> http://frankmtaylor.com
>> @paceaux
>>
>>
>> On Dec 1, 2011, at 7:45 AM, Mads Erik Forberg wrote:
>>
>>> Hello,
>>> I'm wondering if it's possible to achieving angled corner with pure CSS and
>>> no images: http://jsfiddle.net/8jxxH/
>>>
>>> / Mads
>>> __
>>> 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] Creating angled corner with CSS
Hi Mads, I'm not sure if I understand what you mean by "angled corner". Do you mean a rounded corner? If that's the case, then you can certainly do that with border-radius. Or are you looking for something other than a rounded or traditional 90 degree angle? Frank M Taylor http://frankmtaylor.com @paceaux On Dec 1, 2011, at 7:45 AM, Mads Erik Forberg wrote: > Hello, > I'm wondering if it's possible to achieving angled corner with pure CSS and > no images: http://jsfiddle.net/8jxxH/ > > / Mads > __ > 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] Border: Double
Thanks, Mark!
Is this a known defect/bug in Opera?
I can't imagine a scenario where I'd intentionally apply an outline to an
invisible element. But, I can see this as a good bit of information where
we've gotten our selectors wrong, or some sort of JavaScript was applied
incorrectly - and we see a box on our page for no good reason. I use outline
for doing wireframes, so this is good to know.
My guess is that this happens because outline is not supposed to be part of the
layout - unlike border. I think I read in Meyer's book Smashing CSS that the
outline is meant to be drawn around the element. So it looks like Opera maybe
is following the letter of the law, while the other browsers are assuming you
don't want to outline what's invisible.
Frank M Taylor
http://frankmtaylor.com
@paceaux
On Nov 29, 2011, at 6:42 AM, Mark Richards wrote:
> On Mon, Nov 28, 2011 at 17:36, Paceaux wrote:
>
>> There's another CSS3 trick you can try, but I don't think it has as wide
>> support as the box-shadow trick. You *do* add border and outline, and then
>> apply outline-offset:
>>
>> border: 1px solid #444;
>> outline: 3px solid #444;
>> outline-offset: 3px;
>>
>
> Just a word of warning to anyone using outline and Opera: Opera renders the
> outline on top of everything, even if it would normally be invisible. This
> makes outline useless to anyone with a complex layout who cares about Opera
> support.
>
> Sample:
>
>
>#a, #b {
> height: 100px;
> width: 100px;
> position: absolute;
> border: 1px solid green;
>}
>#b {
> border: 1px inset red;
> background-color: blue;
>}
>#aa {
> margin: 30px auto;
> height: 40px;
> width: 40px;
> background-color: pink;
> outline: 1px solid pink;
>}
>
>
>
>
>
>
> __
> 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] Border: Double
There's another CSS3 trick you can try, but I don't think it has as wide
support as the box-shadow trick. You *do* add border and outline, and then
apply outline-offset:
border: 1px solid #444;
outline: 3px solid #444;
outline-offset: 3px;
Frank M Taylor
http://frankmtaylor.com
@paceaux
On Nov 28, 2011, at 2:52 PM, Elli Vizcaino wrote:
> Hi CSS Disscuss,
>
>
> Was just wondering if there was a way to give a double border different
> values. For instance have one be 1px while the other is 3px? Is this
> possible? And is there a way to declare it?
>
> TIA!
>
>
> Elli Vizcaino
> Helping artists, entrepreneurs and
> small businesses look like rock stars &
> 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] Border: Double
I've seen a few ways to do this. Some cleaner than others. As far as I've seen,you don't have much success by adding border and outline to the same element. If you want to avoid having to style an interior element, there's one trick which will work in CSS3 supported browsers: box-shadow: 0 0 0 5px #445578, 0 0 0 10px #776678; The fourth value is offset. I think all the modern browsers support multiple box shadows. So this should allow you to add as many "borders" as you need. The added bonus is that box-shadow doesn't participate in the layout like border does. Frank M Taylor http://frankmtaylor.com @paceaux On Nov 28, 2011, at 2:52 PM, Elli Vizcaino wrote: > Hi CSS Disscuss, > > > Was just wondering if there was a way to give a double border different > values. For instance have one be 1px while the other is 3px? Is this > possible? And is there a way to declare it? > > TIA! > > > Elli Vizcaino > Helping artists, entrepreneurs and > small businesses look like rock stars & > 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] nav not floating right
try using modrnizer.js for your html5 block elements. Or, a simpler solution is to use the Meyer 2.0 CSS reset. In it, Eric Meyer declares all the HTML5 block elements as display:block. Frank M Taylor http://frankmtaylor.com @paceaux On Nov 15, 2011, at 6:05 PM, mem wrote: > On Nov 16, 2011, at 24:49 , Philippe Wittenbergh wrote: > >> >> On Nov 16, 2011, at 9:33 AM, mem wrote: >> >> IE 7 and 8 do not understand the html5 'nav' element at all. You need some >> js to 'explain' that element to those browsers. Search for 'HTML5 shim' > > Thanks. > > Done it. Forgot about that. Long time since I play with it I guess. > > I've added the following between the head tags: > > > > http://help.nuvemk.com/floatedFluidLayoutHtml5/index_1.php > > The problem seems to persist on both: ie7 and ie8; > > Any clue? > > :( > > > __ > 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] sibling + child combinator
thank you, Philippe. That answers my question. I was "hoping" that the combinator could go upward in the document tree, but my experiments with that weren't working.It was an off-the-wall bet that I could change styles based on whether another element were present in a neighboring document tree. Ultimately,this confirms that the sibling combinator doesn't work as an "aunt" or "uncle" combinator. Frank M Taylor http://frankmtaylor.com @paceaux On Nov 14, 2011, at 6:16 PM, Philippe Wittenbergh wrote: > > On Nov 15, 2011, at 5:09 AM, Paceaux wrote: > >> 1. Does the non-adjacent sibling combinator ( ~ )only go in one directIon? >> If I attempt .address ~ .newsletter, I can successfully style >> newsletter. >> I I try .newsletter ~ .address, I cannot style newsletter > > This combinator only works in one direction: downwards in the document tree > (as is always the case with CSS selectors so far - they never go 'up') >> >> 2. Is it possible to select a child of a sibling, like so: >> .newsetter > #nav_social ~ .address > > That may work, assuming that both #nav_social and .address are descendants of > .newsletter. > > As David suggests, a simple html test case would be helpful to understand > what you're trying to do. > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.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/
[css-d] sibling + child combinator
I have a unique challenge with a client. I have an an element called "address" which needs a zero margin if the ul "nav_social" is present. If "nav_social" is not present, then "address" needs a 14px margin. My challenge is that "nav_social" is not a sibling of the same element as "address". Therefore I have two questions. 1. Does the non-adjacent sibling combinator ( ~ )only go in one directIon? If I attempt .address ~ .newsletter, I can successfully style newsletter. I I try .newsletter ~ .address, I cannot style newsletter 2. Is it possible to select a child of a sibling, like so: .newsetter > #nav_social ~ .address Here's a short handed version of the HTML Frank M Taylor http://frankmtaylor.com @paceaux __ 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 measures - em grid system makes sense ?
perhaps I misstated earlier.
I set html{font-size:16px} so that all subsequent elements have the font-size
1em. Doing so guarantees that a 60em width is also 960px.
I don't over-ride a user's ability to zoom (ctrl + , ctrl -). This simply means
that the widest base of users can read the text without zooming, and if they do
zoom, the layout doesn't break.
Though I can see your point that if a user has changed their default
font-settings, they may be frustrated. Perhaps I'll take that into
consideration and not include any absolute values for the font-size at the HTML
element.
Frank M Taylor
http://frankmtaylor.com
@paceaux
On Nov 10, 2011, at 7:07 AM, Philip TAYLOR wrote:
>
>
> Paceaux wrote:
>
>> most of the time, I actually set html{font-size: 16px} so I can guarantee
>> the font size and a width of 960px.
>
> Why do you /want/ to guarantee the font size ? Surely
> the user is the best judge of the size at which he or
> she likes to read things, and therefore you should respect
> that judgement rather than seeking to circumvent it.
>
> Philip Taylor
__
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 measures - em grid system makes sense ?
most of the time, I actually set html{font-size: 16px} so I can guarantee the
font size and a width of 960px.
I find that a 10px font is too small for me or most of my users to read. Every
time I tried the 62.5% thing, I was still fine using em for layouts, but the
content didn't have enough white space and was too hard to read. And when, of
course, I sized-up the font size, well…. drinking ensued as I tried to get
content to play in their containers.
Frank M Taylor
http://frankmtaylor.com
@paceaux
On Nov 9, 2011, at 10:42 PM, G.Sørtun wrote:
> On 10.11.2011 02:23, mem wrote:
>
>> Ok. And why will I need one in px and another in em ? I'm not getting
>> what will that do, should that have the same measures like: 960px and
>> 60em ?
>
> 60em may be somewhat equal to 960px under certain, very limited, conditions.
> If you're happy with that there's no need to "mess with" both units, just
> make up your mind whether it's 'em' or 'px' or some other unit you're gonna
> rely on ... and test well.
>
>> Great recall. I presume that body will have some sort of background
>> image so I cannot narrow it, and it should be as wide as the viewport
>> unfortunately.
>
> If you say so. I often let 'html' alone do the "fill viewport" job, leaving
> 'body' open for other jobs. How to use elements depends mainly on degree of
> legacy browser support.
>
>> So this means adding and extra container with no semantic propose
>> other then dealing with this ?
>
> Probably not necessary to add any non-semantic elements as "style only"
> hooks, _if_ you've got a good set/use of semantic elements in the layout.
> You'll have to present it - with the semantics - if you want really qualified
> and detailed advices on how to style it to your liking.
>
> regards
>Georg
> __
> 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] css measures - em grid system makes sense ?
The font is "arvo". I'm cheap, I pulled it off of Google's Font CDN:.
http://www.google.com/webfonts
I don't think an em-based layout can work in all situations. In the case of my
online resume, I'm not doing anything elaborate: no graphics, no fancy design.
I'm absolutely horrible at math, so ems give me small, manageable numbers that
help me with grids. It's all preference, but I have an 8th-grade education when
it comes to math, so small numbers and easy math helps:
1. If I set body{font-size: 16px}, then I can set body{width: 60em} to
accomplish
2. Devoid of gutters, that means each of five columns is 12em.
3. I start by assuming a gutter is 16px, or….. 1em.
4. Four gutters are in-between columns, and I split the fifth between the first
and last column: 60 em - 5 em = 55em.
5. Awesome. 55 / 5 = 11em width: .column{width: 11em}
6. I distribute half of the gutter to each margin: .column{margin-left: .5em;
margin-right: .5em}
7. My result is 4 em between the five columns, and the first and last column
adding up to the fifth.
A. If I want ten columns, then I cut the column width in half. I don't think
about gutters
B. If I want wider gutters, I subtract an em from the width, and split it
across margins
C. If I want 6 columns, it's ((60-6)/6). each column is 9 em (54 em in total).
I assign the 6 leftover em to each column, splitting by margin.
The added bonus I get is that the em is a typographical setting. So margins and
paddings set to the value of ems have the benefit of scaling with the size of
the font. So larger fonts have proportionately more breathing room than smaller
fonts.
Another bonus is my ability to use the golden ratio (1.618):
header{font-size: 1em},
header hgroup {font-size: 1.618em}
header hgroup h1 {font-size: 1.618em}
On Nov 9, 2011, at 12:27 PM, Barney Carroll wrote:
> @Frank
> Really like your EM-based site — what font is that? The thing I made was
> ultimately just way too elaborate: too many 'static' graphic design
> considerations for EMs to play nice. In practice it worked (and only recently
> got redesigned ;) but maintenance became an utter pain.
>
> @David H
> Your notion of using % for horizontal measurements and EM for height sounds
> very healthy to me. What with text playing a large part of how tall things
> are, the notion of using font-size as a relative measurement in that context
> makes a lot of sense.
>
> @mem
> I think what David L says about max-widths is absolutely on the money.
> Personally I'm a big fan of the 320andUp framework philosophy, whereby you
> cater for an environment where available width and CSS support may be limited
> (no extensive side-by-side layouts; no floats), and then deal with larger
> viewport real-estate via selective media queries.
>
> As far as padding, margins and other 'secondary' measurements, I think EMs
> makes sense (when reading on my phone I like text to be at least half an EM
> away from the screen edge)… An important rule to bear in mind on this front
> is to apply padding and margin to elements without set widths. This is
> something I learned the hard way via OOCSS' fractional grids.css — I set the
> width or max width on a wrapper, and put the other dimensions on width:auto
> children. Without this precept, things tend to break or at least become very
> tenuous very fast.
>
> My design priorities tend to dictate that heights should rarely be set,
> simply because life becomes infinitely easier once one dimension is left free
> to accommodate the overflows of the others (font-size, images scaling to
> width, variable contents…).
>
> Once again I'd really recommend Ethan Marcotte's writings on the matter on
> alistapart.com. Responsive Web Design and the earlier Fluid Grids articles
> show a huge experience and massive insight on these matters.
>
>
> Regards,
>
> Barney Carroll
> (+44) 742 9177 278
> __
> 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/
