Tips and Tricks

I was fixing up some xhtml/css for someone earlier and noticed a few common mistakes that I've seen a number of developers make, so I thought I'd start a thread so we can all share our IE/FF/Cross-browser tips and tricks .

Here are two that I can think of:

1. If you are using floating elements, always set the containing element’s width and overflow property. Overflow = hidden is what I usually use. Note: IE requires the width and FF requires the overflow otherwise the containing element (usually a div for me) doesn't have a height unless u add non floating elements.

2. To centre align a block level element set its width according, then set its margin-left and margin-right to auto.

Follow an alternate design process. If you code for IE in the first place, chances are it will work flawlessly in firefox in the first place. Then you dont have as many problems period.

Did you even read the tips? Point #1 requires a different solution in different browsers. If I worked towards ie, I know I need to specify a width, but that still wont fix my FF problem.

Try it and see.

<div style="border: 1px solid black;">
<div style="float: right;">Right</div>
</div>

that wont work in either browser, speicify a width and IE works, then specify overlow and FF works too. Unless you can tell me a better way to do that?

Originally Posted by metamorphium Follow an alternate design process. If you code for IE in the first place, chances are it will work flawlessly in firefox in the first place. Then you dont have as many problems period.

Genius idea! I'll try that. Thanks!