Float inside Div displaying ok in firefox+opera, not ie7

I got this floated <a href... inside a div having left and right borders, which display ok in ff & opera. I.e., the anchor is displayed within the borders. In ie7, however, the anchor is displayed _outside_ the div borders.

Here's the CSS for the anchor:

font-size:0.9em;
float:right;
margin-top:10px;
color:#286EA0;
cursorointer;
text-decoration:none;
line-height:1.6em;
text-align:left;
font-family:Verdana,Tahoma,Arial,sans-serif;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;

And for the div container:

height:40px;
border-left:1px solid black;
border-right:1px solid black;
margin:0pt 110px 0px 160px;
padding:0pt 10px;
color:#303030;
font-family:Verdana,Tahoma,Arial,sans-serif;
font-size:76%;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;

There is some inheritance involved with the anchor, but it's only color, line-height, font-size, and text-underline that are overwritten...

Anyways.. help would be much appreciated.

Regards,
tores

 

Hmm, I was certain the container's height property would trigger hasLayout and make the div contain the anchor. Could you link to a live page? Try doing an overflow:hidden; and zoom:1; on the div as well, try making the anchor a block element (display:block to get that pointer effect all throughout the anchor.

 

Here is the link to the page in question: http://toreriks.dyndns.org/home/
Look to the lower right corner of the center column, for an anchor named "eldre >>". (It's norwegian, so don't feel bad if you don't understand. For the curious: "eldre" means "older")

The css, can be found here: http://toreriks.dyndns.org/home/css/main.css

-tores

 

Could you upload this page somewhere so we can take a look?

 

Normally I'd tell you to validate your HTML, but aside from the use of target="" and a mismatched character encoding (should be UTF-8 not UTF8 ) it's fine. However, you do have a space above the DOCTYPE declaration which is throwing Internet Explorer into quirks mode. I strongly suggest you remove that space and see what happens.

If you still want the functionality of the target attribute without having the attribute in your code, check out this handy little script:

function externalLinks() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i<anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("href") &&
		anchor.getAttribute("rel") == "external")
		anchor.target = "_blank";
	}
}

window.onload = function() {
	externalLinks();
}

Code (markup):

Put this script in the HEAD section of your Web page (note, if you have additional scripts that rely on window.onload remove the window.onload event handler from them and call the script in the function below the externalLinks script instead), then in your HTML replace target="_blank" with rel="external"