Recent Posts
- My new HP TouchPad – Better, Faster, Stronger, Overclocked
- New Site Design 2011
- Disable Verizon V-Cast popup / autostart on Android HTC Incredible
- Mock Draft 2010 iPhone, iPad and iPod touch now Available!
- What is SEO? An introduction to Search Engine Optimization and search result rank
- Detect File Types For Files With No Extension
- Seperate the directory and file portions of a string path in PHP
- Migrating wordpress to a new server
- A customized web-based wysiwyg that can clean a paste from MS Word
- Google Talk Crashes When I Select Show current music track Status, using Winamp
- How to Fix Problmes with CSS Float Elements in IE, FireFox, Safari, etc
- Screwball Tees, funny t-shirt site, is alive!
- Starting to Add Google Checkout (as paypal alternative) To Accept Credit Card Payments
- Facebook Soars While MySpace Wilts
- Running multiple versions of IE on Vista
How to Fix Problmes with CSS Float Elements in IE, FireFox, Safari, etc
You may have discovered a powerful little css attribute called “float” and have dreamed about all the different elements you can make stick to the right side of the page or containing element. Then you go to implement it and IE (or maybe even FireFox) now renders the page in an unpredictable, Picaso kind of way. Drats! Why on earth is it doing that?!
Most of these problems can be fixed with a simple css style that have been using for years.
First… Why does it happen?
The “picaso” effect with elements displaying in unpredictable manners, overlapping or getting pushed off to the side of the page, is a result of how css attribute float with assigned value of left or right are treated by the browser. The browser ignores the height as well as top and bottom margins of the floating elements when rendering any elements following them. Depending on your page structure and the browser you are viewing the page from, this can cause a wide array of undesirable display problems.
How do I fix it? – The Ultimate Line Break!
You’re probably already familiar with <br> (or <br /> in xhtml). Here is a CSS enhanced version of the line break to fix many unpredictable display issues. In fact, this has saved me in a number of places and has become a staple in most of the style sheets of practically every site I build. It validates correctly and should not cause any extra vertical space on your page. You can place this pretty safely anywhere and it will vertically break up whatever is above and below it so that they are on separate lines and do not overlap. You can even use the HTML multiple times througout your page just like the old <br> tag!
The HTML:
<div class="hrClear"><hr /></div>
The CSS:
.hrClear {
width: 100%;
height: 0;
margin: 0;
padding: 0;
clear: both;
}
.hrClear hr {
width: 100%;
height: 0;
margin: 0;
padding: 0;
visibility: hidden;
display: none;
}