Best IT Recipes

IE7 float problems

Html =>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div style='border: 1px solid red; width: 100px;'> <a href="#">foo</a> <a href="#"style="border-color: blue; float: right;">bar</a> </div> something </body> </html>

I have problems with IE7 (IE6 support not needed)

On IE7, rendered HTML looks like this =>
alt text

I need it to look like this (now running on chrome / ie8) =>
alt text

What should I change? :)

+48
css internet-explorer internet-explorer-7
Nov 30 '09 at 14:01
source share
3 answers

You need to shift both elements and clean it.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div style="border: 1px solid red; width: 100px;"> <a href="#" style="border-color: blue; float: right;">bar</a> <a href="#" style="float:left;">foo</a> <div style="clear:both;"></div> </div> something </body> </html>

Or simply place a floating element in front of the normal element as follows:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div style="border: 1px solid red; width: 100px;"> <a href="#" style="border-color: blue; float: right;">bar</a> <a href="#">foo</a> </div> something </body> </html>

Brief explanation:

Forgive my English and picture, but here briefly how float and clearing work in a cross browser:

An item can be moved left or right. When you have an element floating, the element does not push the "normal" content down. See why -

Float and cleaning:

alt text
Legend: orange / floating right, blue / floating left, gray lines / transparent separator, red / border

In this case, you have 2 elements of one line text - one float to the left and another float to the right. When floating, it will not push the contents down and also take up space. Thus, if you do not use clear:both on the gray lines, the content below will be piled up between the two floating elements and, therefore, may not be what you want.

When you use clear:both below the floats, the content under the floats will push to the level that has the highest level of the float. This is shown in the diagram of the 2nd and 3rd parts.

Floating only:

alt text
Legend: orange / floating right, blue / normal content, gray lines / line shared with the next, red border / borders

Blue normal content is already by default text-align: left; . Thus, he is left oriented. You need the float to be in front of the normal content, because you are telling the browser to float from this line.

You have to experiment with other conditions to see its effect: place a float in front, behind, swim left and right, clear both, clear left and right.

+96
Nov 30 '09 at 14:02
source share

Always useful for all IE-Float-Combos: give each float element display: inline;

+1
Nov 30 '09 at 14:13
source share

Try to clear after fixing:

 div:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
0
Nov 30 '09 at 14:20
source share


More articles:


All Articles