Re: [css-d] Style a select tag (the arrow part)
Hi Steve, I found this CSS only hack to allow a pretty select menu with no JavaScript. http://pennypacker.net/articles/css_tricks_select_menu It works okay in FF3 but falls back to the default in IE6. Is an input value for a form? ~Mx http://www.mxdx.co.uk 2009/2/17 Stephen Tang clowwizarder...@gmail.com: Blake, Thanks for the reply and confirming this. I did find several Javascript-based solutions in my internet search, so I will investigate those options further. Thanks, Stephen On Mon, Feb 16, 2009 at 5:50 PM, Blake haswel...@gmail.com wrote: On Tue, Feb 17, 2009 at 8:29 AM, Stephen Tang clowwizarder...@gmail.com wrote: Based on current information on the internet, I presume that there is no way to do this with CSS only. Am I right? 100% There are JavaScript solutions around, I suggest you check that option out if you want to do any complex styling on SELECT elements. -- Blake Haswell http://www.blakehaswell.com/ | http://www.thegraveltrap.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-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] ASP.NET - Tableless Forms
New to this CSS world but loving it. I have seen many examples of tableless forms such as that at Dynamic Drive - CSS Library http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/P10/ However, I cannot find anything that works with ASP.NET components such ASP:Label, ASP:TextBox etc. Is it possible to do the same thing with .Net components (new to .net as well) hi, css is applied to html tags - output of ASP.net codes. see them by browsing the page and viewing the html source using a browser. then you can create css for the tags you see. place them in a file with .css extension. for example: styles.css then in your asp.net source include the following: Dim CSSHtmlLink as new HtmlLink CSSHtmlLink.href=~/styles.css CSSHtmlLink.Attributes.Add(rel, Stylesheet) CSSHtmlLink.Attributes.Add(type, text/css) CSSHtmlLink.Attributes.Add(media, all) Page.Header.Controls.Add(CSSHtmlLink) assuming you're using ASP.NET 2.0 good luck. Virgil http://www.jampmark.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] Style a select tag (the arrow part)
I found this CSS only hack to allow a pretty select menu with no JavaScript. http://pennypacker.net/articles/css_tricks_select_menu It works okay in FF3 but falls back to the default in IE6. yeah works okay in FF3 but you can't see the item you select. i'm sure there's a way to do it in css got to experiment. virgil http://www.jampmark.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] New to List First question.
A side note to IE6. I just bought my dad a brand new Dell mini computer and guess what, it came with IE6 installed! I was a bit perturbed at this... Nancy On Mon, Feb 16, 2009 at 7:58 PM, Ryan Little @ Gusto r...@goforgusto.com wrote: Not really sure how relevant browser statistic are regarding the practical application of CSS. Nevertheless, there was a very long thread last month, on somewhat related matters, that may help be of interest to you. It begins here: http://markmail.org/search/?q=the+css+overlords#query:the%20css%20overlords+page:1+mid:eq3b3ynqjk46m7xs+state:results If the link breaks in transmission, the subject line is: The CSS Overlords Hi David, Thanks for the welcome, sorry If the css got lost in there :) The reason I brought the browsers up in relation to the CSS is because I have to make a CSS file to deal with older browsers if people would just upgrade to current or at least a newer browser than one set of CSS works. (at least so far) IE 7 and 8 are behaving a great deal more than 6 and lower did. Goes back to lurking :) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Style a select tag (the arrow part)
Hi Martyn, I saw that in my internet searches, but it doesn't work in IE6, and unfortunately, the projects I am working on all still use IE6. I don't object to using Javascript and CSS to style the select tag, but I wanted to see if I missed anything about a CSS-only solution. So far, I have found no evidence of a CSS-only solution that would work in IE6 and FF3. --Stephen On Tue, Feb 17, 2009 at 6:59 AM, Virgilio Quilario virgilio.quila...@gmail.com wrote: I found this CSS only hack to allow a pretty select menu with no JavaScript. http://pennypacker.net/articles/css_tricks_select_menu It works okay in FF3 but falls back to the default in IE6. Is an input value for a form? yeah works okay in FF3 but you can't see the item you select. i'm sure there's a way to do it in css got to experiment. virgil http://www.jampmark.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] IE6 Class block larger
www.thecreativesheep.ca/page_error/imagepage3b.html I'm having a problem with an element on this page the class.myface when compared in IE7/FF/etc it looks fine but when you view it in IE6 the class.myface block element is scaled bigger, I've been trying to figure this out for a day or two I don't know how to fix. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Class block larger
Possibly something to do with the Box model bug in IE6? You are right it does happen here too. One warning on this page - I can see a lot of absolute positioning. Try resizing your browser (say to 800x600) and you'll notice the content doesn't move and you can only see half the page! ~Mx http://www.mxdx.co.uk 2009/2/17 Christopher R majes...@thecreativesheep.ca: www.thecreativesheep.ca/page_error/imagepage3b.html I'm having a problem with an element on this page the class.myface when compared in IE7/FF/etc it looks fine but when you view it in IE6 the class.myface block element is scaled bigger, I've been trying to figure this out for a day or two I don't know how to fix. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Class block larger
Yeah I see it's only caused in IE6, you can't even horizontal scroll to get it to center, I'm not to sure. On Tue, Feb 17, 2009 at 10:19 AM Martyn Merrett mx.css...@googlemail.com wrote: Possibly something to do with the Box model bug in IE6? You are right it does happen here too. One warning on this page - I can see a lot of absolute positioning. Try resizing your browser (say to 800x600) and you'll notice the content doesn't move and you can only see half the page! ~Mx http://www.mxdx.co.uk 2009/2/17 Christopher R majes...@thecreativesheep.ca: www.thecreativesheep.ca/page_error/imagepage3b.html I'm having a problem with an element on this page the class.myface when compared in IE7/FF/etc it looks fine but when you view it in IE6 the class.myface block element is scaled bigger, I've been trying to figure this out for a day or two I don't know how to fix. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Class block larger
Hi there,
New to the list so not sure whether I should reply to the list or to the
person individually, would be grateful if someone could tell me :)
Just spent a little bit of time looking at your problem and it's being
caused by the p tag sitting inside .mayface.
If you move the p tag outside of the .myface div then remove any
positioning from #contactinfo p then it should work . . . haven't had
time to thoroughly test though.
Something like . . .
HTML:
div id=contactinfo
div class=myface/div
pSite Design and Dev by:a href=mailto:christop...@walkfar.ca;The
Creative Sheep/a/p
/div
CSS:
#contactinfo p {
font-size: small;
font-style: italic;
font-size: 70%;
width: 250px;
}
Hope this helps in some way.
Jace
__
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] New to List First question.
Ryan, Be sure you are looking at the browser stats in the wider context of the site's purpose and audience reach. For my personal sites, I abandoned IE6 a year ago, but I get very few visitors. 20% of visitors to my personal site only account for a couple a day. On sites I build for clients who can get tens of thousands of visitors a day, 20% can be a very large number. Don't loose sight of the total number of users you may be eliminating from access to the site, many of whom may have no choice in the matter. Even for those larger sites, though, I am sure to be clear what kind of IE6 support we are talking about. I while strive to build sites that are usable for anyone at all, using any browser (within reason), things will not be as pretty or interactive on older browsers. In my opinion, that's a fair trade when budget demands that concessions be made. And it always does. Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Class block larger
Hi Jason,
You can reply to the person and/or the list.
I prefer to copy the list in reply to all so that everyone else
knows the answer plus it'll become a common knowledge pool.
Ta,
~Mx
http://www.mxdx.co.uk
2009/2/17 Jason Newington jason.newing...@play.com:
Hi there,
New to the list so not sure whether I should reply to the list or to the
person individually, would be grateful if someone could tell me :)
Just spent a little bit of time looking at your problem and it's being
caused by the p tag sitting inside .mayface.
If you move the p tag outside of the .myface div then remove any
positioning from #contactinfo p then it should work . . . haven't had
time to thoroughly test though.
Something like . . .
HTML:
div id=contactinfo
div class=myface/div
pSite Design and Dev by:a href=mailto:christop...@walkfar.ca;The
Creative Sheep/a/p
/div
CSS:
#contactinfo p {
font-size: small;
font-style: italic;
font-size: 70%;
width: 250px;
}
Hope this helps in some way.
Jace
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Class block larger
I appreciate the help David very much, I would just like to know with what I have designed how I could fix that cut off that happens with IE6? On Tue, Feb 17, 2009 at 11:19 AM David Laakso da...@chelseacreekstudio.com wrote: Christopher R wrote: www.thecreativesheep.ca/page_error/imagepage3b.html I'm having a problem with an element on this page the class.myface when compared in IE7/FF/etc it looks fine but when you view it in IE6 the class.myface block element is scaled bigger, I've been trying to figure this out for a day or two I don't know how to fix. It can be fixed. But that is not a solution. Please see: http://www.chelseacreekstudio.com/ca/cssd/sheep.html Best, -- Dancing with Wolves -- A thin red line and a salmon-color ampersand forthcoming. 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] IE6 Class block larger
Christopher R wrote: www.thecreativesheep.ca/page_error/imagepage3b.html I'm having a problem with an element on this page the class.myface when compared in IE7/FF/etc it looks fine but when you view it in IE6 the class.myface block element is scaled bigger, I've been trying to figure this out for a day or two I don't know how to fix. It can be fixed. But that is not a solution. Please see: http://www.chelseacreekstudio.com/ca/cssd/sheep.html Best, -- Dancing with Wolves -- A thin red line and a salmon-color ampersand forthcoming. 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] ASP.NET - Tableless Forms
It seems to be a little-known fact that the W3C actually says that tables can be used to lay out (actually it says present) forms. More info here: http://developer.cmzmedia.com/?p=71 Yes, tables were not intended to lay out a whole web page but they do have legitimate uses. There's no need to throw the baby out with the bath water. Christian Ziebarth __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 bumps the P down below one (but not other) floated divs
Thank you! This was exactly the thing -- I thought I'd done this and obviously hadn't. Sorry my thanks are so late; I really appreciate your help. On Fri, Jan 23, 2009 at 5:13 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Kir Talmage wrote: All is well in most current browsers, but IE6 is pushing the paragraphs down below the floating divs. So does IE7 at my end. Problem seems to be caused by IE's clear right bugs - no good CSS-only fix that I know of. http://www.metasilkwebworks.com/test/psllc/ If you move the h2 from where you have it now in the source-code, to below all three featured divs - just above the first paragraph, IE6 and 7 will handle them correctly. This move won't change/disturb anything in those browsers that already got it right. regards Georg -- http://www.gunlaug.no __ 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] ASP.NET - Tableless Forms
christi...@netscape.net wrote: It seems to be a little-known fact that the W3C actually says that tables can be used to lay out (actually it says present) forms. More info here: http://developer.cmzmedia.com/?p=71 Yes, tables were not intended to lay out a whole web page but they do have legitimate uses. There's no need to throw the baby out with the bath water. I'm not sure I'd consider it little-known, but it is often mis-quoted. First of all, the W3C specs *allow* many (nearly all) elements inside tables and table elements, not just the ones cited in that article. The issue isn't one of allowed versus disallowed, but rather of could versus should. While each of the elements mentioned in the reference page cited in the article (text, preformatted text, images, links, forms, etc.) [1] *may* go inside a table, every one of those elements can be more easily styled and more flexibly controlled using CSS-based, semantically correct HTML source. In fact, even in the specs as far back as HTML 3.2 [2], tables are permitted, though not recommended for layout. The specifications state: HTML 3.2 includes a widely deployed subset of the specification given in RFC 1942 and can be used to markup tabular material or for layout purposes. Note that the latter role typically causes problems when rending to speech or to text only user agents. Note the last line of that paragraph, which is often excluded from references citing this particular line. The use of tables for layout *typically* causes causes problems when rending to speech or text only user agents...like search engines. While the technology employed by both speech software and search engines has progressed considerably such that most of those issues are certainly lessened if not alleviated altogether, the fact remains that tables are not the best way to manage layouts of anything except tabular data, including entire pages or sites. Chapter 10 [3] of Joe Clark's book, _Building Accessible Websites_, is a perfect example of the mis-quoting (or selective exclusion) of the 3.2 spec. His book is about accessibility and yet he omits the second part of that paragraph (the one about accessibility) and very nearly recommends using tables for the layout of a web page. (Please note: BAW was written in 2002 and I'm purposefully being awfully hard on Joe Clark here. In his defense, his recent writings seem to echo the thought that tables should not be used for page *or* element layout. [4]) [1] http://www.w3.org/TR/html401/struct/tables.html [2] http://www.w3.org/TR/REC-html32-19970114#table [3] http://joeclark.org/book/sashay/serialization/Chapter10.html [4] http://alistapart.com/articles/tohellwithwcag2#WCAG-documents:travesty-failure -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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] ASP.NET - Tableless Forms
On Tue, Feb 17, 2009 at 4:13 PM, Bill Brown macnim...@gmail.com wrote: christi...@netscape.net wrote: It seems to be a little-known fact that the W3C actually says that tables can be used to lay out (actually it says present) forms. More info here: http://developer.cmzmedia.com/?p=71 Yes, tables were not intended to lay out a whole web page but they do have legitimate uses. There's no need to throw the baby out with the bath water. Personally, I agree with this idea, at least for complex forms. For simple forms, a div with some input elements works just fine, and can be easily styled. Regarding ASP.Net in particular, it creates some of the most hideous HTML I've ever seen. Take a look at the output from a Treeview control and you'll see exactly what I mean. Try using the CSS adapters [1] to make your life a little easier. A little off-topic, but also of note with ASP.Net is that you can make *any* tag a server-control, just by throwing runat=server into it. Be warned that this will screw with your element IDs, but if you're not using them (or can use class names instead) it works quite well. I use ASP.Net a lot, and tend to do things like: div class='formContainer'input id='name' name='name' runat='server' class='first formElement'/input/div This will let you do this.name.Value on the server side and lets ASP manage the viewstate, while not relying on the ASP controls, so you can easily style your elements via CSS. HTH. [1] http://www.asp.net/CssAdapters/ -- Jerod Venema Frozen Mountain Software http://www.frozenmountain.com/ 919-368-5105 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Class block larger
Christopher R wrote: I appreciate the help David very much, I would just like to know with what I have designed how I could fix that cut off that happens with IE6? www.thecreativesheep.ca/page_error/imagepage3b.html We know what you want. And over many moons, many folks on this list have bent over backward trying to help you. You have ignored all of them. And continue to do so. --Dancing with Wolves -- A thin red line and a salmon-color ampersand forthcoming. 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] Tabbed Nav Issues
Felix Miata wrote: To amplify David's original implication and subsequent response, use of px for sizing text is an affirmative design choice that whatever text sizes are acceptable to or preferred by the design's visitors are utterly irrelevant. Whatever size in px seems most appropriate to you in your own environment bears little useful relationship what may be appropriate in the environments of the visitors. A corollary is px for setting line height. http://fm.no-ip.com/auth/line-height-inherit.html demonstrates how it can be a problem. Felix, I don't quite get this Use only number for line-height business proposed at the link you provided. If your number is neither percentage nor em nor pixel, what does it represent? __ 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] Tabbed Nav Issues
* RePost wrote: A corollary is px for setting line height. http://fm.no-ip.com/auth/line-height-inherit.html demonstrates how it can be a problem. Felix, I don't quite get this Use only number for line-height business proposed at the link you provided. If your number is neither percentage nor em nor pixel, what does it represent? http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height ... number The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value. ... So 1.0 is one time the element's font size, 2.0 two times, ... -- Björn Höhrmann · mailto:bjo...@hoehrmann.de · http://bjoern.hoehrmann.de Am Badedeich 7 · Telefon: +49(0)160/4415681 · http://www.bjoernsworld.de 25899 Dagebüll · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ __ 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] Tabbed Nav Issues
On 2009/02/17 17:13 (GMT-0600) RePost composed: Felix Miata wrote: To amplify David's original implication and subsequent response, use of px for sizing text is an affirmative design choice that whatever text sizes are acceptable to or preferred by the design's visitors are utterly irrelevant. Whatever size in px seems most appropriate to you in your own environment bears little useful relationship what may be appropriate in the environments of the visitors. A corollary is px for setting line height. http://fm.no-ip.com/auth/line-height-inherit.html demonstrates how it can be a problem. Felix, I don't quite get this Use only number for line-height business proposed at the link you provided. You don't understand the demonstration you see there? If your number is neither percentage nor em nor pixel, what does it represent? A multiplier. Other multipliers are em and %, but these others have meanings when inherited that can be problematic, which that URL is supposed to demonstrate. http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height -- Do not let any unwholesome talk come out of your mouths, but only what is helpful for building others up. Ephesians 4:29 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] Font-color issue
At 10:02 AM 2/13/2009 -0800, David Hucklesby wrote: I find that these percentages work best cross-browser: 69%, 75%, 82%, 94% ... with a base font-size of 100%. Interesting. As an avid typophile -- and someone who still, admittedly, has a lot to learn about CSS -- I've been trying to follow any and all threads on the subject of fonts/typography over these last months (since I joined the list). Perhaps I missed something, but your comment above makes me wonder about a couple of things... Firstly, from past threads, my understanding is that one shouldn't be going any smaller than 100% -- or at least should try not to -- if only to be in keeping with whatever it is that any particular user has set their own settings at, so wouldn't going as small as 69% (or whatever) be *too* small? Secondly -- and perhaps more importantly -- in recommending those specific percentages, are you saying that things go funny in some browser or platform if those exact percentages aren't used -- like if I used, say, 76% or 85% or something? And what about for percentages higher than 100% (for headings or whatever)? Ron :? Woof?... http://www.Psymon.com Ach, du Leni!... http://www.Riefenstahl.org Hmm... http://www.Imaginary-Friend.ca __ 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] Tabbed Panels and Accordions being forced down by Internet Explorer
I'm a beginner to CSS. So be gentle. I designed a site for a good friend and have published it to the web. The site is *http://www.freestyle-la.net* Everything is great until you use Internet Explorer 6 or 7. Some pages, pages with Spry elements, like tabbed panels and accordions, are being forced out of position by something. I use a mac with Adobe Dreamweaver CS4. The site looks fine in FF, Opera, and Safari. The code and CSS validate fine. I've made CSS changes and simplified where I found redundancies to the best of my skill level at this point, but I *cannot* for the life of me see where or why these elements are moving down and to the left under the footer! I started the site using a two column fixed header set-up - a container div, a left sidebar, a space for content, and a footer div. I'm at a make or break point here and need someone to help me. I'd like to keep these elements and not re-design the pages, so I hoping someone would take a look at my code and CSS and offer some advise or even kill the bug. Notes: I changed from 'Transitional' XHTML to 'Strict', for all pages. (heard this would help certain browsers stay out of that quirk mode) All CSS and HTML validate correctly. Some floated elements and the doubling of margins by IE issue addressed, I think. read that on a site somewhere. If there is a floated element, say a left float AND a left margin, IE doubles that left margin. I made the sidebar an 'inline' element, thought it would offer more breathing room. No change. Thanks, RT -- Rhyan Taylor www.rhyantaylor.com rhyantay...@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/
Re: [css-d] Font sizing [was: Font-color issue]
Ron Koster wrote: At 10:02 AM 2/13/2009 -0800, David Hucklesby wrote: I find that these percentages work best cross-browser: 69%, 75%, 82%, 94% ... with a base font-size of 100%. Firstly, from past threads, my understanding is that one shouldn't be going any smaller than 100% -- or at least should try not to -- if only to be in keeping with whatever it is that any particular user has set their own settings at The 100% is needed as a base to avoid problems in certain browsers - others can explain this in detail far better than I. With regard to respecting users settings it seems more important to create in a way that the text /can/ be scalable to let them do what they want with it - hopefully without breaking your page design. Some ways of sizing prevent this from being possible - or at least make it difficult or problematic. As an avid typophile the following page may be interesting to you. http://www.webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/ regards, Brian __ 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] Backwards Compatible CSS
Hi all, I'm trying to get some strategy nailed down so that I can more effectively fix bugs where I work. A lot of what we do needs to be backwards compatible. I've got access to the html and sometimes I've updated (changed) classes or removed classes from existing markup in order to fix bugs. Perhaps a simple example might suffice Existing HTML div id = events class = module New HTML div id = eventsModule Lets say in the example the class module was wrongly applied to the div originally, and let's say that the module class carries with it a bottom margin of 12px. The bug says that there's too much space below the div it should be 5px. So, I determine that even though this is a module (the events module) it doesn't share the common bottom margin of 12px that all modules share (and for the sake of simplicity here let's say that's all .module has attributed to it). As a practice we don't string classes/id's together in the css as to avoid IE6 bugs, eg #events.module So let's say I take the route as noted above and I fix the bug by using this html: div id = eventsModule and the css #eventsModule - margin bottom 5px This change has broken backwards compatibility right? To maintain backwards compatibility would the only solution be to do the following? div id = events class = module #events - margin bottom 5px In which #events would trump .module in specificity Sorry if this seems a bit stupid but I'm having a hard time grasping making sure my code is backwards compatible. TIA _c -- iron sharpens iron __ 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] Font sizing [was: Font-color issue]
At 07:45 PM 2/17/2009 -0600, Brian Funk wrote: The 100% is needed as a base to avoid problems in certain browsers - others can explain this in detail far better than I. With regard to respecting users settings it seems more important to create in a way that the text /can/ be scalable to let them do what they want with it - hopefully without breaking your page design. Some ways of sizing prevent this from being possible - or at least make it difficult or problematic. Well, in that regard, I've been completely re-doing the CSS for my one of my sites (and, in doing so, that will have ultimately have implications across the board for all of my sites), and I've been trying to take the advice that I've gotten here and have set my base font size at 100%, with all my other font sizes done in percentages relative to that (I'm not using em or px anywhere at all, except for in the tiny copyright notice at the bottom of each page). In that regard, the site you pointed out... As an avid typophile the following page may be interesting to you. http://www.webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/ ...brings up exactly what part of my issue is! Firstly, thanks so much for pointing that out -- I'm amazed that I've never come across that site before, and I'll certainly enjoy spending some time there. :) However, it's quite intriguing because Bringhurst's The Elements of Typographic Style -- upon which that site is based -- has largely influenced me (among other sources) with regard to typographic choices. More specifically, his discussion in that book about the Golden Section has had me adopt various font sizes (for headings, etc.) within any particular site by using proportions that fall within that theory/observation of his, and which have made for visually effective and aesthetically pleasing designs. However, the font sizes/proportions/percentages that David mentioned earlier... At 10:02 AM 2/13/2009 -0800, David Hucklesby wrote: I find that these percentages work best cross-browser: 69%, 75%, 82%, 94% ... with a base font-size of 100%. ...have nothing to do with the Golden Section, and to me would look *disproportional* (even if it somehow gets rid of that blur effect that was referred to earlier in the thread) and, well, basically that's why I'm wondering what it is that's going on if/when one uses other, different, in-between percentages. On my system (WinXP) everything looks fine, no matter what browser I'm viewing anything in, and no matter what percentage (or pixel size or whatever else) I'm using for my font sizes. By the way, just to throw another question into the fray, is there anything wrong with using non-whole numbers (like 61.8, etc.) in one's font size percentages? For reference, the closest amounts (to one decimal place) to the percentages that David mentioned that would indeed be perfectly within the Golden Section would be: 61.8%, 76.4%, 85.4% and 94.4%. Those are the sorts of percentages that I'd *like* to use, if I could (without causing problems anywhere/anyhow). Ron :) __ 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] Font sizing
On 2009/02/17 21:59 (GMT-0500) Ron Koster composed: the font sizes/proportions/percentages that David mentioned earlier... At 10:02 AM 2/13/2009 -0800, David Hucklesby wrote: I find that these percentages work best cross-browser: 69%, 75%, 82%, 94% ... with a base font-size of 100%. ...have nothing to do with the Golden Section, and to me would look I have to wonder if more than a tiny fraction of professional web designers know that that is. Probably far fewer of the zillion hack designers or the junkware they use to create would. *disproportional* (even if it somehow gets rid of that blur effect that was referred to earlier in the thread) and, well, basically that's why I'm wondering what it is that's going on if/when one uses other, different, in-between percentages. On my system (WinXP) everything looks fine, no matter what browser I'm viewing anything in, and no matter what percentage (or pixel size or whatever else) I'm using for my font sizes. By the way, just to throw another question into the fray, is there anything wrong with using non-whole numbers (like 61.8, etc.) in one's font size percentages? For reference, the closest amounts (to one decimal place) to the percentages that David mentioned that would indeed be perfectly within the Golden Section would be: 61.8%, 76.4%, 85.4% and 94.4%. Those are the sorts of percentages that I'd *like* to use, if I could (without causing problems anywhere/anyhow). Holy Grail or magic percentages stem from interplay of designers' traditional small (sub-default) fonts fetish, the amount of px each character has to work with, and characteristics of common web fonts. Way back many years ago, typical resolution was really really really low, which produced two significant general effects: 1-fonts with enough px to define them well were really big; 2-the ugliness of inadequate px density seems masked at small sizes. All rendering engines round nominal font sizes to whole numbers of px, but not all browsers use equivalent rounding methods. IE, the dominant overall representative, truncates every computed px size to a whole number, while some popular other browsers use something resembling the mathematical rounding most of us learned when we graduated from simple fractions to decimals in school. When you apply the magic percentages to the sizes available below the traditional 16px default, you find few that land on a whole number. The goal is percentage application that won't result in e.g. 11px in one browser while 12px in others due to their rounding differences, even when one percentage is applied to another through inheritance. To see the comparative differences, visit http://fm.no-ip.com/auth/Font/font-rounding.html in IE, Opera, Gecko Webkit, and compare the differences, and not only at the default font size, but also with different defaults and/or text zoom levels. If you reject the popular designer notion that every page should look identical in every browser, then (presuming you've avoided IE's scaling bugs) a 1px smaller or larger font from one browser to the next should not be a problem. Ultimately, there's a high likelihood that what the user sees will be different anyway, because any of his default text size, screen resolution, display size, seating distance, visual acuity, fonts actually installed, anti-aliasing, minimum font size, zoom level and other factors can vary, thus making it look different. -- Do not let any unwholesome talk come out of your mouths, but only what is helpful for building others up. Ephesians 4:29 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] Tabbed Panels and Accordions being forced down by Internet Explorer
RHYAN TAYLOR wrote: The site is *http://www.freestyle-la.net* Everything is great until you use Internet Explorer 6 or 7. Delete the 'clear: both;' on .TabbedPanels, as IE7 and older don't support the CSS that keeps that 'clear' from clearing the sidebar. Notes: I changed from 'Transitional' XHTML to 'Strict', for all pages. (heard this would help certain browsers stay out of that quirk mode) XHTML 1.0 Strict is fine, but XHTML 1.0 Transitional won't trigger quirks mode rendering in any browser. See Doctypes and their respective layout mode... http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html Nothing has changed over the years. All CSS and HTML validate correctly. Good. Pity the validators can only check syntax and basic rules, and not help with debugging beyond that :-) Some floated elements and the doubling of margins by IE issue addressed, I think. read that on a site somewhere. If there is a floated element, say a left float AND a left margin, IE doubles that left margin. Depends on conditions - what's to the left of a left-floating element. Generally: check to see if the doubling of margins on floats bug appears before adding fixes for it, to avoid triggering other bugs. I made the sidebar an 'inline' element, thought it would offer more breathing room. No change. IE7 and 6 will 'clear' it anyway - see above. regards Georg -- http://www.gunlaug.no __ 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] Backwards Compatible CSS
cFA wrote: So let's say I take the route as noted above and I fix the bug by using this html: div id = eventsModule and the css #eventsModule - margin bottom 5px This change has broken backwards compatibility right? From what you wrote I can't see what backwards compatibility that gets broken by switching from an ID + class, to an ID on main elements and class on repeated elements approach or a mix of both, as long as all relevant styles are added to the right IDs and classes and thereby end up on the right elements. As long as we keep old IE combined ID/class bugs out of the equation, specificity rules, and how browsers actually handle specificity, haven't changed much for author styling over the last decade. In my experience the practice of overstyling causes most problems, as the author gets lost in what applies where. Most solutions would probably work better with half the amount of styles being better organized. I may also have gotten lost in in your case somewhere though (happens all the time :-) ). There are so many ways to link HTML/CSS together through element-targeting and IDs/classes, so it would help to see an example - site/template - so we can see what you're dealing with. regards Georg -- http://www.gunlaug.no __ 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] New to List First question.
On Mon, 16 Feb 2009 16:58:25 -0800 Came this utterance fomulated by Ryan Little @ Gusto to my mailbox: Not really sure how relevant browser statistic are regarding the practical application of CSS. Nevertheless, there was a very long thread last month, on somewhat related matters, that may help be of interest to you. It begins here: http://markmail.org/search/?q=the+css+overlords#query:the%20css%20 overlords+page:1+mid:eq3b3ynqjk46m7xs+state:results If the link breaks in transmission, the subject line is: The CSS Overlords Hi David, Thanks for the welcome, sorry If the css got lost in there :) The reason I brought the browsers up in relation to the CSS is because I have to make a CSS file to deal with older browsers if people would just upgrade to current or at least a newer browser than one set of CSS works. (at least so far) IE 7 and 8 are behaving a great deal more than 6 and lower did. To bring it back on track - controlling pages using CSS; i use a well known technique which makes IE5, IE5.5 and IE6 behave very similar to each other. Throw them into quirks mode intentionally, then you only need program for IE6 (unless your customer or one of his major customers use an older browser). The technique is not perfect and i still check across a broader range of browsers with completed pages but IE6 is the lowest i check _during_ development. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ 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] ASP.NET - Tableless Forms
On 2009-02-16 Iain Wilson wrote: Hi All New to this CSS world but loving it. I have seen many examples of tableless forms such as that at Dynamic Drive - CSS Library [snip] However, I cannot find anything that works with ASP.NET components such ASP:Label, ASP:TextBox etc. Is it possible to do the same thing with .Net components (new to .net as well) Sure, the rendered html is label ... input ... Unfortunately IDs on form elements are useless in .net for styling as M$ gloms hierarchy into the label to (presumably) insure uniqueness. The cascade and the CssClass attribute are your friends. One _strong_ recommendation, please use the AssociatedControlID attribute to explicitly associate the labels with their related form inputs. Your screenreader users will be appreciative. HTH, -Steve -- Steve Axthelm stev...@pobox.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/
