RE: [WSG] Figures out issues. Standards for troubleshooting css
Many people have some sort of reset stylesheet, that turns on a border for every div or every element. The 'perfect' version of this idea can get very complex, but something as simple as setting a border on all divs can often show you where something is stretching or floating where you were not expecting. Mike Mike Brockington Web Development Specialist www.calcResult.com www.stephanieBlakey.me.uk www.edinburgh.gov.uk This message does not reflect the opinions of any entity other than the author alone. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Figures out issues. Standards for troubleshooting css
Hi Mike (and all), I also find outline : 1px dashed #f00; very useful as, unlike 'border' it doesn't add any extra pixels. (However, It doesn't work in IE, of course.) Bob www.gwelanmor-internet.co.uk - Original Message - From: [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Monday, September 01, 2008 9:57 AM Subject: RE: [WSG] Figures out issues. Standards for troubleshooting css Many people have some sort of reset stylesheet, that turns on a border for every div or every element. The 'perfect' version of this idea can get very complex, but something as simple as setting a border on all divs can often show you where something is stretching or floating where you were not expecting. Mike *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Figures out issues. Standards for troubleshooting css
For problems with box alignment, I know I usually turn on background colors to clearly see the size and position of the boxes the browser is using. Or is that a newbie answer? On Sat, Aug 30, 2008 at 11:32 PM, Michael Horowitz [EMAIL PROTECTED] wrote: Just figured out my recent issues. Nothing really special for the resolution. Brings up a newbie question is standard steps people use for troubleshooting. My first steps are of course make sure things validate. Beyond that I don't have any standard steps besides really using google. Any good lists of generic steps people do when troubleshooting CSS issues. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Figures out issues. Standards for troubleshooting css
Actually that helped me with my image problem. It let me know the issue was with how I was defining my background image when it worked with a background color. The hardest thing about learning a new language is learning its troubleshooting techniques. Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 Fred Ballard wrote: For problems with box alignment, I know I usually turn on background colors to clearly see the size and position of the boxes the browser is using. Or is that a newbie answer? On Sat, Aug 30, 2008 at 11:32 PM, Michael Horowitz [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Just figured out my recent issues. Nothing really special for the resolution. Brings up a newbie question is standard steps people use for troubleshooting. My first steps are of course make sure things validate. Beyond that I don't have any standard steps besides really using google. Any good lists of generic steps people do when troubleshooting CSS issues. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Figures out issues. Standards for troubleshooting css
That's so true. Just figuring out how to reliably display debugging data in a new language can often take awhile. But there are a host of troubleshooting principles that can be applied almost universally. I've found it almost universally applicable to keep simplifying the problem until you get to the simplest case that still causes the problem to occur. For instance, being able to say it doesn't work, but by making this one change it does is very valuable. This technique may not always expose the root cause of the problem or even a solution, but it virtually always gives you more insight into the problem. I tried this technique with a CSS problem and it not only led me to the source of the problem but it helped me create a simpler, more elegant solution. On Sun, Aug 31, 2008 at 12:23 PM, Michael Horowitz [EMAIL PROTECTED] wrote: Actually that helped me with my image problem. It let me know the issue was with how I was defining my background image when it worked with a background color. The hardest thing about learning a new language is learning its troubleshooting techniques. Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Figures out issues. Standards for troubleshooting css
Fred Ballard wrote: For problems with box alignment, I know I usually turn on background colors to clearly see the size and position of the boxes the browser is using. Or is that a newbie answer? Definitely not a newbie method. Setting backgrounds is one of the quickest ways to check line-ups while designing and troubleshooting. I usually set borders first time around, and the extra element-dimensions borders create gives me lots of information about tight-corner layouts and other potential design-problems that browsers may handle differently. Another technique I use daily is to invalidate CSS rules instead of commenting them out during troubleshooting. Typical example: background-: #abc; Such rules stop working in all browsers, and the CSS validator will help find these invalid rules if I lose track of them. I prefer such direct debugging over developer tools in various browsers, simply because the tools are always at least one step behind. Michael Horowitz wrote: The hardest thing about learning a new language is learning its troubleshooting techniques. Maybe not a technique, but... Being able to separate browser-bugs from designer-bugs quickly, helps a lot. That means being aware of the browser-bugs we run into most frequent, to a point where it almost becomes second nature to spot them. A quick stress-test of a design in the major browsers should normally be enough to pin-point most bugs and design-weaknesses, without even having to look at the HTML/CSS behind it. Getting to that point takes time and a lot of bug-spotting, so looking at other designers' work, attempts, failures etc. across browser-land is (for me at least) more useful and less time-consuming than creating test-cases and struggling with my own designs. That's the main reason I keep an eye on lists/forums like [css-d], [WD], [WSG] etc, since all you new and old designers manage to trigger many more browser-bugs and create more weak designs than I can - even on a good day :-) Helping others fix their problems helps me recognize, remember and thereby avoid getting stuck on the same or similar problems. Seeing how others go about solving problems helps a lot too - even when I disagree. Doesn't matter if I see the problem or need a solution right now, as I probably will one day. A few minutes troubleshooting someone else's case may save me hours on my own cases later on, so it is time well spent. regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Figures out issues. Standards for troubleshooting css
My first steps are of course make sure things validate. Beyond that I don't have any standard steps besides really using google. Any good lists of generic steps people do when troubleshooting CSS issues. One URL: http://getfirebug.com/ Regards, Rimantas -- http://rimantas.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Figures out issues. Standards for troubleshooting css
The web developer toolbar for firefox can help you to see block level elements, choose - outline outline block level elements. This can sometimes be a big help when sections are behaving oddly. Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk T: +44 (0)20-8816-8893 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: 31 August 2008 19:56 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Figures out issues. Standards for troubleshooting css Fred Ballard wrote: For problems with box alignment, I know I usually turn on background colors to clearly see the size and position of the boxes the browser is using. Or is that a newbie answer? Definitely not a newbie method. Setting backgrounds is one of the quickest ways to check line-ups while designing and troubleshooting. I usually set borders first time around, and the extra element-dimensions borders create gives me lots of information about tight-corner layouts and other potential design-problems that browsers may handle differently. Another technique I use daily is to invalidate CSS rules instead of commenting them out during troubleshooting. Typical example: background-: #abc; Such rules stop working in all browsers, and the CSS validator will help find these invalid rules if I lose track of them. I prefer such direct debugging over developer tools in various browsers, simply because the tools are always at least one step behind. Michael Horowitz wrote: The hardest thing about learning a new language is learning its troubleshooting techniques. Maybe not a technique, but... Being able to separate browser-bugs from designer-bugs quickly, helps a lot. That means being aware of the browser-bugs we run into most frequent, to a point where it almost becomes second nature to spot them. A quick stress-test of a design in the major browsers should normally be enough to pin-point most bugs and design-weaknesses, without even having to look at the HTML/CSS behind it. Getting to that point takes time and a lot of bug-spotting, so looking at other designers' work, attempts, failures etc. across browser-land is (for me at least) more useful and less time-consuming than creating test-cases and struggling with my own designs. That's the main reason I keep an eye on lists/forums like [css-d], [WD], [WSG] etc, since all you new and old designers manage to trigger many more browser-bugs and create more weak designs than I can - even on a good day :-) Helping others fix their problems helps me recognize, remember and thereby avoid getting stuck on the same or similar problems. Seeing how others go about solving problems helps a lot too - even when I disagree. Doesn't matter if I see the problem or need a solution right now, as I probably will one day. A few minutes troubleshooting someone else's case may save me hours on my own cases later on, so it is time well spent. regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Figures out issues. Standards for troubleshooting css
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Horowitz Sent: Sunday, August 31, 2008 10:23 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Figures out issues. Standards for troubleshooting css Actually that helped me with my image problem. It let me know the issue was with how I was defining my background image when it worked with a background color. A quick way to find issues in IE is to use the IE Dev Toolbar. The blue border showing up when you hover over the elements in the page provides great feedback. -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Figures out issues. Standards for troubleshooting css
Yeah, FireBug really do its job pretty well. Just turn on the inspect menu, and hover it to the section of your page, you will see the box layout. I use it to find out which divs that cause a problem(width problem). On Mon, Sep 1, 2008 at 3:35 AM, Thierry Koblentz [EMAIL PROTECTED] wrote: -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Horowitz Sent: Sunday, August 31, 2008 10:23 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Figures out issues. Standards for troubleshooting css Actually that helped me with my image problem. It let me know the issue was with how I was defining my background image when it worked with a background color. A quick way to find issues in IE is to use the IE Dev Toolbar. The blue border showing up when you hover over the elements in the page provides great feedback. -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Figures out issues. Standards for troubleshooting css
Setting backgrounds is one of the quickest ways to check line-ups while designing and troubleshooting. Another technique I use daily is to invalidate CSS rules instead of commenting them out during troubleshooting. I second these techniques. I use bg colours as well and invalidate CSS by putting an x in front of the rule, e.g. xmargin:2em; which has the same effect Georg described. There's also a couple of standard IE bandaids, i.e. height:1% to give the element layout, position:relative and display:inline (for double-margin bug on floats), sometimes also float:none. I found it most rewarding to develop in parallel. I usually complete one element and immediately test in IE6 and IE7. This prevents you from having interrelated IE issues. Google IETester for a good app to install both on the same machine. Rarely do I need to amend for Safari (PC) or Opera. Cheers, Jens The information contained in this e-mail message and any accompanying files is or may be confidential. If you are not the intended recipient, any use, dissemination, reliance, forwarding, printing or copying of this e-mail or any attached files is unauthorised. This e-mail is subject to copyright. No part of it should be reproduced, adapted or communicated without the written consent of the copyright owner. If you have received this e-mail in error please advise the sender immediately by return e-mail or telephone and delete all copies. Fairfax does not guarantee the accuracy or completeness of any information contained in this e-mail or attached files. Internet communications are not secure, therefore Fairfax does not accept legal responsibility for the contents of this message or attached files. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
