File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes IE vs. Mozilla Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "IE vs. Mozilla" Watch "IE vs. Mozilla" New topic
Author

IE vs. Mozilla

Jim Mortenson
Greenhorn

Joined: May 23, 2007
Posts: 1
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 ]

=======<br /> JHM
Mike Bowers
Author
Ranch Hand

Joined: Oct 08, 2007
Posts: 42
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
 
jQuery in Action, 2nd edition
 
subject: IE vs. Mozilla