Re: [css-d] CSS Formatting
Donna Casey wrote: Alex Foley wrote: I'd sure like a confirmation from someone that overflow: auto is the way to go... I've been clearfix-ing up until about 12:03 pm today. Zoe's excellent (free) article explains much of this: http://communitymx.com/content/article.cfm?cid=6BC9D A great read! thanks, Zoe! You're welcome, but I certainly don't mean that article to be an endorsement of using overflow to contain floats all the time. I use the Easy Clearing method most of the time. Part of this is habit, but part of it is because I have had issues with scrollbars showing up in some browsers in complex layouts. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
Yehuda Katz wrote: Essentially, I created a set of CSS Formatting guidelines designed to get designers to create readable CSS that other designers could quickly get up to speed on. The spec is available in PDF form at http://www.yehudakatz.com/CSSf-1-5-1-Spec.pdf. The purpose of the CSSf specification is to provide a standard way to write CSS that will be consistent and readable. b. Use overflow: auto or overflow: hidden, not clearing elements, to clear floats where possible. I do not see why a specification that is about readability tries to prescribe what technique I should use, even if the author of the specification possesses evidence that he knows the best technique, which would be a separate discussion. This is not about formatting. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
Sure it is. Adding clearing elements, and the ensuing additional CSS (or extra clearing markup), makes code less readable for, in most cases, no good reason. Since overflow: hidden or overflow: auto does the trick, the whole issue of clearing floats becomes essentially a non-issue, and saves extra markup. Hold on. Adding overflow:auto; on a container will clear any and all floats inside said container all by itself!?!? Cross-browser??!! And PIE's Easy Clearing is 'so last year' too?!? Where have I been??? -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
Tom Livingston wrote: Sure it is. Adding clearing elements, and the ensuing additional CSS (or extra clearing markup), makes code less readable for, in most cases, no good reason. Since overflow: hidden or overflow: auto does the trick, the whole issue of clearing floats becomes essentially a non-issue, and saves extra markup. Hold on. Adding overflow:auto; on a container will clear any and all floats inside said container all by itself!?!? Cross-browser??!! And PIE's Easy Clearing is 'so last year' too?!? Where have I been??? same place as me i guess! I thought overflow wasn't a good cross-browser solution either.. ah well, everyday's a school day. As for this CSSf thing I can see it being useful for those new to CSS as a learning aid but its not going to work as a specification. /Formatting/ CSS is all down to your personal preference, the important thing is making use of sensible and semantic id names and class names etc.. If another developer can find the bits they're looking for easily they could then just use their own text editor to format it how they want if it's so important. Guidelines and specs are two different things, CSSf is the former. Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
I'd sure like a confirmation from someone that overflow: auto is the way to go... I've been clearfix-ing up until about 12:03 pm today. Alex Foley Robert O'Rourke wrote: Tom Livingston wrote: Hold on. Adding overflow:auto; on a container will clear any and all floats inside said container all by itself!?!? Cross-browser??!! And PIE's Easy Clearing is 'so last year' too?!? Where have I been??? same place as me i guess! I thought overflow wasn't a good cross-browser solution either.. ah well, everyday's a school day. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
Alex Foley wrote: I'd sure like a confirmation from someone that overflow: auto is the way to go... I've been clearfix-ing up until about 12:03 pm today. Here we go: http://dev.l-c-n.com/IEW/containing-float-overflow.php It's not as consistent as clear-fixing but in general using overflow : hidden ; on divs will work. IE =6 needs a hasLayout trigger too. Happy days =] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
On 7/17/06, Yehuda Katz [EMAIL PROTECTED] wrote: Sure it is. Adding clearing elements, and the ensuing additional CSS (or extra clearing markup), makes code less readable for, in most cases, no good reason. Since overflow: hidden or overflow: auto does the trick, the whole issue of clearing floats becomes essentially a non-issue, and saves extra markup. i personally would rather not have scrollbars appear or things disappear on elements with width or height. I prefer using option #2 in the wiki (http://css-discuss.incutio.com/?page=ClearingSpace), which doesn't add additional markup, either, and perhaps should be mentioned in your version of a guideline. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
snip i personally would rather not have scrollbars appear or things disappear on elements with width or height. I prefer using option #2 in the wiki (http://css-discuss.incutio.com/?page=ClearingSpace), which doesn't add additional markup, either snip I'm with CJ on this one, though I don't care about Mac IE anymore, and would put the Win IE-specific stuff in a CC. my 2¢ (and I now bow out of this up-and-coming Holy War) -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
Gunlaug Sørtun wrote: Yehuda Katz wrote: Since overflow: hidden or overflow: auto does the trick, the whole issue of clearing floats becomes essentially a non-issue, and saves extra markup. I use such design-methods quite often, and the overflow-property doesn't cut it across browser-land. regards Georg Pardon my ignorance, but I am definitely missing something here. My CSS knowledge is nowhere near that of you gurus and overflow is something I haven't worked with much, so I'd just like to interject a really silly question here. (Sorry. Inquiring minds want to know...) If overflow: auto or hidden is used merely to clear an element, what prevents the occasional chopping off of needed data (hidden) or the addition of nasty little scroll bars everywhere (auto) where one might not want them? K. What is it I don't understand? :) lr __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
K. What is it I don't understand? :) lr You understand it correctly, actually. -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting
On 2006-07-16, Yehuda Katz wrote: Essentially, I created a set of CSS Formatting guidelines designed to get designers to create readable CSS that other designers could quickly get up to speed on. The spec is available in PDF form at http://www.yehudakatz.com/CSSf-1-5-1-Spec.pdf. Regarding: Convert six character codes to three character codes by rounding. Why on earth would you do that? There's no way the designers I work with would find the color shift in the image below (your example, #c3b937 - #cc3) acceptable. http://pangram.org/images/hex.jpg -Steve -- Steve Axthelm [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting - overflow for clearing floats
So, the overflow-property is a useful solution for containing floats in some cases, but not in others. regards Georg Good to know, Does a floated element within a container that has overflow : hidden ; applied respect the padding of the container? In particular the bottom padding, and also are there any cross-browser differences in this instance? (apart from the usual =P ) Cheers, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting - overflow for clearing floats
On Jul 18, 2006, at 8:17 AM, Robert O'Rourke wrote: So, the overflow-property is a useful solution for containing floats in some cases, but not in others. regards Georg Good to know, Does a floated element within a container that has overflow : hidden ; applied respect the padding of the container? In particular the bottom padding, and also are there any cross-browser differences in this instance? (apart from the usual =P ) Yes, it should... While you are around on my demos on block formatting context. The use of overflow can be quite problematic. Have a look at this in Opera 9 and below: http://dev.l-c-n.com/IEW/float-formatting-context-Right.php (overflow adjacent to a right floated block). And all those demos are quite basic things. There are more differences between browsers. Look at how the horizontal margins are handled, especially between a container with overflow and an adjacent float (hint: Gecko and iCab are right, all others are wrong). The overflow:hidden method can also cause content to be clipped, with no way for the user to access the data. Imagine a larger data table within such a container. It may display fine when viewed on the designers monitor. But the user need to zoom in to be able to read. The table expands, but part of it is clipped... As Georg says, quoted above, overflow can be a method to contain floats. There are no black and white solutions. Advising people, especially beginners, of the contrary is utterly unfair. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Formatting
Hi guys, Michael Geary of the jQuery list suggested I continue a discussion I started there on this list related to CSS. Essentially, I created a set of CSS Formatting guidelines designed to get designers to create readable CSS that other designers could quickly get up to speed on. The spec is available in PDF form at http://www.yehudakatz.com/CSSf-1-5-1-Spec.pdf. An example stylesheet formatted almost 100% according to the CSSf spec is available at http://www.yehudakatz.com/sample.css. I say almost 100% because I'm using it in a production setting, and I've changed the spec somewhat after a spirited conversation on the jQuery list. I also use a Ruby on Rails implementation of Sean Inman's SSC, which definitely further simplifies the CSS and makes it more readable. You can take a look at the SSC structure at http://paste.css-standards.org/1500. I'm not sure how long those pastebins last. -- Yehuda Katz Web Developer (ph) 718.877.1325 (fax) 718.686.4288 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Formatting Revisited:
Hey everyone, Well, after 3 hours of unsuccessful tries I am coming back to you guys in hopes that this problem can be solved. My CSS code is losing all of it's formatting when viewed in a browser. I am writing the code in Dreamweaver 8 and it is perfectly styled just like I want it. However, when you view it in a browser, there are huge spaces and indents and stuff. I took it in to TextEdit and and changed it and saved it and looks perfect in the browser. DW is somehow reformatting the code and I can't figure out how or where it is doing it. I went in to DW8 and under the Preferences you can set the CODE FORMAT properties. I set the TAB to 1 so that when I press tab to tab over it will only move 1 space. I thought this was the problem but I guess it is not. I have provided a link below to the file so you can see what I am talking about. If anyone can help me figure this out it would be greatly appreciated! http://www.9mmcreative.com/css/9mm.css Thanks, Cory __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting Revisited:
I went in to DW8 and under the Preferences you can set the CODE FORMAT properties. Hi Cory This is pretty far off-topic for this list and would probably be better discussed in a Dreamweaver forum (see http://www.macromedia.com/cfusion/webforums/forum/index.cfm?forumid=12). Having said that, I can try to help you off-list if you want to e-mail me directly. cheers, Lori __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting Issues:
Jim Nannery wrote: Cory wrote: I'm sorry, I think you guys are misunderstanding what I am saying. I am not talking about how the layout looks in the browser, I am talking about when you right click and view the source code, THAT is what is all messed up. In particular the CSS. In DW8, the CSS is all nice and neat just like I coded it, but if you view the CSS CODE in a browser window, it is all messed up and all over the place like it lost the formatting. What would cause that? The browser, the FTP program that I am using or what? Cory [...] Since I don't use Dreamweaver (old hand coder) I'm *guessing* that DW uses some proprietary formatting that isn't recognized by the browser you are trying to view it in. [...] Hi Cory, I don't have DW either, but guess it will be the way DW is making the tab space. The same thing is happening for instance in Frontpage: there they use a tab space which is about 4 letters in width. Openend the same css-file (or javascript-file: same effects) in Wordpad, the space is 6 letters. And in Notepad ... 10 letters in width ( sometimes not showing the tabs, but a black sign instead, without spacing). With 2 or more indenting tabs for nested div's it doesn't show good anymore. Then there are huge white spaces and wrappings to next lines: *unordered listings*. ;-) You can check this by moving in the css-file with the arrow keys: big jumps in the whitespaces indicate the tab positions. It can be also, that in DW a proportional font-type is used, while not in Notepad. In browsers, it depends of the default text-editor you have assigned in the browser configuration: the text-editor that will be used automatically when the browser discovers a css- or other text file that has to be opened. Does the html render as expected in the browser? If so, I wouldn't worry to much about how the code looks in view source. [...] Agree! - When I am in a clear mood, I don't use the tab key when coding, but give 2 or 3 ordinary spacebar spaces - then the code is always good looking. francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting Issues:
david wrote: No, the problem is that DW (and it's WYSI-not-really-what-you-get competitors) is lying to you. The only way to really test and make sure your pages are working right is checking it in a browser. Remember, people don't browse websites using Dreamweaver! ;-) I'm sorry, I think you guys are misunderstanding what I am saying. I am not talking about how the layout looks in the browser, I am talking about when you right click and view the source code, THAT is what is all messed up. In particular the CSS. In DW8, the CSS is all nice and neat just like I coded it, but if you view the CSS CODE in a browser window, it is all messed up and all over the place like it lost the formatting. What would cause that? The browser, the FTP program that I am using or what? Cory __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Formatting Issues:
Hey everyone, I having a problem with my CSS formatting when viewed in a browser compared to how I have it layed out in Dreamweaver 8. In DW8, it is layed out perfectly and I can read everything just fine. When you view the CSS code in the browser however, it is all over the place and it loses all of the formatting. What causes this? Could it possibly be my ftp program doing it? Is there a way to fix this so that it looks just DW8 when viewed in a browser? Thanks for any help! Cory __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting Issues:
It's probably not the browser. Dreamweaver often times doesn't show css layouts correctly. If you have a link to your site that would probably help. On Jan 20, 2006, at 1:33 PM, Cory Perry wrote: Hey everyone, I having a problem with my CSS formatting when viewed in a browser compared to how I have it layed out in Dreamweaver 8. In DW8, it is layed out perfectly and I can read everything just fine. When you view the CSS code in the browser however, it is all over the place and it loses all of the formatting. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting Issues:
Cory Perry wrote: Hey everyone, I having a problem with my CSS formatting when viewed in a browser compared to how I have it layed out in Dreamweaver 8. In DW8, it is layed out perfectly and I can read everything just fine. When you view the CSS code in the browser however, it is all over the place and it loses all of the formatting. What causes this? Could it possibly be my ftp program doing it? Is there a way to fix this so that it looks just DW8 when viewed in a browser? Thanks for any help! No, the problem is that DW (and it's WYSI-not-really-what-you-get competitors) is lying to you. The only way to really test and make sure your pages are working right is checking it in a browser. Remember, people don't browse websites using Dreamweaver! ;-) -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
