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

Discussion in 'CSS' started by tores, Jul 31, 2007.

0
  1. #1
    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;
    cursor:pointer;
    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
     
    tores, Jul 31, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    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.
     
    soulscratch, Jul 31, 2007 IP
  3. tores

    tores Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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
     
    tores, Aug 1, 2007 IP
  4. Jezek

    Jezek Peon

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Could you upload this page somewhere so we can take a look?
     
    Jezek, Aug 3, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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"
     
    Dan Schulz, Aug 3, 2007 IP