ansaurus

Question

IE6 and IE7 floating bug inside a header

Answer 1

A:

If you are floating it you need to tell the h3 to clear it. I assume this would work:

.wrapper h3 { overflow:hidden; zoom:1; }

LMK if not. And FYI, I wouldn't put the anchor inside of the h3 like that. I would probably make it a sibling of the h3, if necessary wrap a div around both and then apply the overflow/zoom.

meder 2009-10-22 05:55:33

This does stop it popping out of the box, but the header is pushed to the top of the box and the link pushed to the bottom.

lawardy 2009-10-22 06:00:32

Are you hiding some CSS? Can you provide a demo?

meder 2009-10-22 06:03:22

Answer 2

A:

Fixed it. Here are two extra rules that I added in

.wrapper h3 { overflow:hidden; zoom:1; } 
.wrapper h3 a { margin: -1em 0 0 0; }

lawardy 2009-10-22 06:29:30

Answer 3

+2 A:

Put the right floated element first.

<h3><a href="#" class="action button">Update</a>Contact Details</h3>

Emily 2009-10-22 10:19:37

I wish there was a more elegant solution, but this does resolve the problem. See example - http://jsfiddle.net/h5Zmu/4/

Jason McCreary 2010-10-29 15:55:16

ansaurus

tags:

views:

answers:

IE6 and IE7 floating bug inside a header

related questions