Forum Moderators: not2easy
- full-width dotted lines preceding/following the header
- header text content, left aligned
- a small background icon (arrow), floated right, on the same "line" of the text, linking to the top of page
Something like:
...................................
Some text ^
...................................
In the sample above the "^" sign represents the arrow, that in point of fact, is correctly floated right.
Code:
CSS
.para{
border-bottom:#CCCCCC 1px dotted;
border-top:#CCCCCC 1px dotted;
margin-bottom:5px;
margin-top: 8px;
padding-top:4px;
padding-bottom:4px;
}
.para a {
background:url(img/toparrow.gif) no-repeat right center;
float:right;
display: block;
height: 15px;
width: 23px;
}
HTML
<h4 class="para">Some text<a href="#top"/></h4>
While this works flawlessly in FF 3.5, Opera 9, Chrome, it doesn't in IE7: the background icon is not rendered correctly inside the header "line"; it is correctly floated right, but below the header.
Any hint?
<h4 class="para">Some text<a href="#top"></a></h4>
Any hint why IE is rendering the floated element on the next line?
To be honest to position such an arrow I'd give the .para position relative and the use absolute positioning on the <a> instead of floating it. It gives more control over where it ends up.
P.S. - This bug is showing on IE 7
<h4 class="para"><a href="#top"></a>Some text</h4>
Basically it doesn't render the arrow on the next line, IF the anchor is set BEFORE the text inside the header.
Cans someone explain this behavior?
<!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">
<head>
<title>Test</title>
<style type="text/css">
.para{
border-bottom:#cccccc 1px dotted;
border-top:#cccccc 1px dotted;
margin-bottom:5px;
margin-top: 8px;
padding-top:4px;
padding-bottom:4px;
position:relative;
}
.para a {
background:url('2.jpg') no-repeat right center;
display: block;
height: 15px;
width: 23px;
position: absolute;
right: 0;
top: 4px;
}
</style>
</head>
<body>
<h4 class="para">Some text<a href="#top"> </a></h4>
</body>
</html>
As a general rule: put the floated elements before the non-floated content. If e.g. any browser would encounter your "some text" where it were longer than the space available and wrap over two lines, those browsers too would put it on the lower line.
Above I took the 4px top from your padding, but you can center it vertically by replacing that top: 4px with:
top: 50%;
margin-top: -7px; /* half the height */
