myspaceprodesigns.com
ie & floats
- bookmark us
- add me on myspace
- add me on xuqa
- add me on yfly
10/24/2007 09:23 PM
Video Player YouTube Line Up
10/24/2007 02:19 PM
Re: Help with blogs
ie & floats
I honestly had a lot of trouble trying to figure out where to begin with this one and which problems to really address. I have developed many websites which relied heavily on floats to keep the left and right columns floating while the area in the middle would be resized with your browser or your resolution. Floats are great to use to take advantage of resolutions and sizes as well as for aligning elements to the left or right of other elements of your page. However, let me warn you that before attempting to create a website that does this for design, be prepared to face and overcome lots of problems.
First, if you don't know what floats are, please read our section on floats so you have an understanding of what they are, how we use them, and why we use them or this tutorial is going to lose you very quickly. Now let's take a crack at some of the problems in IE with floats.
Floats and Blocks
The first big problem that occurs with floats in IE is if you define width to your element which follows the float. For example, let's say that I wanted to float something to the left and follow it with text but I wanted the text to only occupy 50 percent of the width of the screen. What that should do is float the element to the left and allow the block level element to to only take up the half of the screen. Not so in Internet Explorer. Look at our example of a float and block element. Do you see the problem? If you don't then you're using a standards compliant browser (you trickster). If you want to see what the people in IE are seeing, take a look at this. It's almost as if IE forgets that there's nothing floating to the left! This makes it a bit difficult for us as web designers to get it looking right, doesn't it?
However, we can fix this by nesting the float within the block. This is not the best way to go about coding your page, but this is a good way to make it work, especially if you will not have multiple floats within the block (because the difficulty of coding will increase with the complexity of your float model).
Double the Margin of Error
What is this nonsense? Well, what I mean by "Double the Margin of Error" is how Internet Explorer handles margins on floats. In short, it doubles them. Have a look at this example of the Double Margin Float Error. If you're in IE, you will see that the div is 200px from the left edge of the page, which is completely wrong. This occurs on the right side of the float if it floated to the right. I used to add a conditional comment or another float to fix this until I discovered a fix at Position is Everything in which the property display:inline is added to the float and it works, still validates, and is not a "hack," all of which make me happy. Adding the display:inline property gives us a corrected float margin.
There are actually four others that I want to explain, but really can't at this time, as I haven't completely figured out triggers them. One of them involves text disappearing, known as the "Peak-A-Boo Bug." Another involves floats getting cleared for no apparent reason. Yet another involves margins of parents being added to certain child divs in addition to the margins already applied to these children. The fourth one, which is my most perplexing one, is one which involves certain items floating within the floats when I didn't code those items to float.
I actually have a track of what I have done to fix these problems and all the fixes were quite logical to me in terms of CSS, but I am trying to understand the problems and trace my route to fixing them so I can explain them to you in decent detail and replicate the errors consistently (because all of these errors were not consistent, even though my coding was, and I need to figure out what triggered the errors on certain elements).
Anyway, be sure to check back here if you're interested in learning about these as I add to this list!
Comments
View Comments (1) • Leave Comment • Support Forum