Posted by on Tuesday, June 22nd, 2010 at 3:58 pm.
There are hundreds of cross-browser compatibility issues in website design; here I will try and solve a few for you. These tips are things that I generally try and implement into any coding I do, in fact, there are probably some I will miss out as it has just become second nature to me!
Reset Your CSS
I wrote a blog about this the other week, and I still want to stress its importance – always reset your CSS, it will save you so many problems in the long run.
Cross-Browser Compatibility Fixes
Cross-Browser Float Bugs
Floating elements can seem tricky at first, but with a few simple rules you should be able to nail it every time.
Display: Inline
If you want your floated elements to sit next to each other, make sure you also set them to display inline. This solution has solved many problems in IE6 for me, and it is now something I always make sure I do. Of course, if you don’t want your elements to sit next to each other then give it an attribute of clear:both/left/right, this will shift it underneath and clear any other floated elements. Here is an example:
<div id="box1"><p>Hello, I am floated left and inline.</p></div> <div id="box2"><p>Hello, I am floated left and inline, sitting next to my friend.</p></div> <div id="box3"><p>Hello, I am floated left, but sitting on the next line.</p></div>
#box1, #box2, #box3 { float:left; width:200px; display:inline }
#box1 { background-color:#900; }
#box2 { background-color:#00F; }
#box3 { background-color:#906; clear:both }
You can view an example of this here. So, the rule to remember here is to always set your floats to display inline (unless you specifically require a different display value).
Clear Your Floats
Clearing your floats is a very important aspect of using floated elements. If your floats have ever been playing up and not sitting next to each other, then this tip is for you.
There are a few different ways to do this, but I find this to be the best technique. I will use an example of a two column centered layout – quite common in web design.
My First Example, found here, shows one problem of not clearing your floats. The wrapper is not properly wrapping the floated elements, you can tell this as the wrapper has its own background colour. Now, you could add another div under your floats and add the clear:both; property to it, but there is a much cleaner way to do it.
<div id="wrapper"> <div id="box1"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> <div id="box2"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div>
#wrapper { margin:0 auto; width:600px; background-color:#3F9; overflow:hidden }
#box1, #box2 { float:left; display:inline }
#box1 { background-color:#C30; width:200px; }
#box2 { background-color:#0CF; width:400px; }
As you can see in this example the background of the wrapper div shows. This is because I have added the overflow:hidden property to #wrapper. This wrapper div will now clear any floats within it, without the hassle of empty clearing divs.
So in conclusion, add overflow:hidden; to any wrapping elements that contain floats.
Until Next Time…
I’ll leave it there for this week, but I will be back next week with part 2 of common cross-browser compatibility fixes. Feel free to throw in any suggestions into the comments section and I’ll add it to my list. Thanks for reading!
Channel