Floated <a> drops down in IE 6/7

HTML & CSS
1

Hi all

I have a simplified version of what I’m working with here

www.ttmt.org.uk/forum/3_top

It contains a <h2> tag inside of which is a <a> tag that is a link to the top of the page. The <a> tag is floated to the right.

In the IE6/7 the <a> tag appears on the right put on the next line down!

I can’t work out what’s going on.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<link rel="stylesheet" href="reset.css" type="text/css" />
	<style type="text/css">
    div{
      margin:50px;
      width:500px;
    }
    div h2{
      padding-bottom:10px;
    }
    div h2 a{
      color:#666;
      float:right;
      margin-right:50px;
      text-decoration:none;
    }
    div h2 a:hover{
      color:red;
    }
	</style>
</head>

<body>
  <div>
    <h2>Crown Thinning<a href="#top" class="scrollTop">&uarr; top</a></h2>
    <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 </p>
  </div>
</body>
</html>
2

just a guess, don’t know if it’ll work:

h2 { float:left }

3

Hi,
Floats must come first in the source for IE6/7, as a general rule they should always come first for all browsers so you can avoid IE6/7 problems.

Optionally you can float both elements, in your case it would probably be best to wrap the un-floated h2 text in a span and float it left. That way it still maintains it’s order in the markup if css is turned off. You will need to force the h2 to contain it’s child floats now, overflow:hidden for modern browsers and haslayout for IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>untitled</title>
    <link rel="stylesheet" href="reset.css" type="text/css" />
    <style type="text/css">
    div{
      margin:50px;
      width:500px;
    }
    div h2{
      padding-bottom:10px;
      [COLOR=Blue]overflow:hidden;[/COLOR]/*contain floats*/
     [COLOR=Blue] height:1%;[/COLOR]/*IE6 haslayout*/
    }
   [COLOR=Blue] div h2 span {float:left}[/COLOR]
    
    div h2 a{
      color:#666;
      float:right;
      margin-right:50px;
      text-decoration:none;
    }
    div h2 a:hover{
      color:red;
    }
    </style>
</head>

<body>
  <div>
    <h2>[COLOR=Blue]<span>[/COLOR]Crown Thinning[COLOR=Blue]</span>[/COLOR]<a href="#top" class="scrollTop">&uarr; top</a></h2>
    <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 </p>
  </div>
</body>
</html>