This week's book giveaways are in the Refactoring and Agile forums.
We're giving away four copies each of Re-engineering Legacy Software and Docker in Action and have the authors on-line!
See this thread and this one for details.
Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

IE vs. Mozilla

 
Jim Mortenson
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This question may be a little broad, but... in your opinion, what are the top three or four CSS "gotchas" to look out for when designing for both IE and Mozilla/Firefox?

TIA!
[ October 09, 2007: Message edited by: Bear Bibeault ]
 
Mike Bowers
Author
Ranch Hand
Posts: 42
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What are the top three or four CSS "gotchas"?

At the end of Chapter 1 in my book, Pro CSS and HTML Design Patterns, I have a section on Troubleshooting CSS. It lists 12 CSS gotchas. Here are my top three.

Gotcha number 1: invalid XHTML. It is the top culprit because CSS selectors choose which elements to style based on XHTML structure. Invalid XHTML structure causes some elements not to be styled or can actually style the wrong elements. This can be very subtle and can really cause you to pull out your hair.

Gotcha number 2: invalid CSS. It is the second top culprit because CSS requires browsers to ignore errors on individual properties. Thus, it is very easy to have a typo on a property that causes the browser to ignore it. This is very hard to track down unless you use a tool like the error console in FireFox. The easiest way to prevent this type of problem is to validate your CSS.

Gotcha number 3: incorrect CSS selectors. It is easy to have a typo in a selector that causes it to select no element or to select the wrong element or to select too many elements. To solve the problem, you can add a blatantly obvious CSS property to the selector in question so you can see exactly what the selector is selecting. For example you could assign border:10px solid red; to the selector so that each selected element is surrounded by a fat red box.

For the rest of these troubleshooting tips you can get my book at http://www.apress.com/book/view/1590598040
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic