asked on

margin top differences with IE6, IE7, and FireFox

The code below shows the "breadcrumb" line from my webpage with the appropriate styles from the CSS included in the <head> section.

If you look at this page in FireFox 2 or 3, the account-popup div appears precisely where I want it to appear - immediately below the "Last login". To get it to appear in the same position in IE6, I used the underscore hack: "_margin-top:0px;".

The only way I have been able to make it appear in that same position in IE7 is if I remove the "margin_top:40px;" but then it messes up the FireFox display. How do I get this DIV to appear in the same place for all browsers?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style>
    body{font-family:Arial,Verdana,Helvetica,sans-serif; line-height:16px; font-size: small; background:#DAE8EB;color:#163F4A;}
    #statusweb_wrapper{clear:both; background-color:#FFF;overflow:auto;border:5px solid #5394A1;margin:20px auto 0pt;width:980px; text-align:left;padding: 10px;}
    #intro-wrapper{float:left; width:960px; margin:0px 0px 0px 15px; _margin:0px 0px 0px 7px;}
    #name{float:left;font-size:138.5%;padding:15px 8px; font-weight: bold;width:500px;}
    #myAccountInfo-wrapper{float:left;width:425px; margin-left:10px; _margin-left:5px;}
    #breadcrumbs{float:left; padding:10px 0px 0px 8px; font-size: 93%; color:#0099cc; font-weight: bold;width:500px;}
    #breadcrumbs2{float:left; padding:10px 0px 15px 8px; font-size: 93%; color:#0099cc; font-weight: bold;width:500px;}
    #login-wrapper{float:left;}
    .login{float:left; text-align:right;margin: 4px 8px 10px 0px;width:300px;}
    .account-login{float:right;text-align:right;margin: 4px 0px 10px 0px;}
    .account-popup{position:absolute;display:none;clear:both;margin-top:40px;_margin-top:0px; margin-left:130px; border: 1px solid #999; width:280px; height: 109px; background-color: #fff; padding: 15px 15px 10px 7px; font-size: 93%;z-index:2;}
    .account-popup img{padding: 0px 6px;}
    </style>
</head>
<body>
<div id="statusweb_wrapper">
    <div id="content-wrapper">
        <div id="intro-wrapper">
            <div id="breadcrumbs2">Home</div>
            <div id="myAccountInfo-wrapper">
                <div class="login">FirstName&nbsp;LastName<br />Last login: MM/DD/YYYY</div>
                <div class="account-login">
                    <a href="javascript:ShowHideDIV('AccountInfo');">My Account Info</a>
                    <br /><a href="/myAccount/?action=logout">Logout</a>
                </div>
                <div class="account-popup" id="AccountInfo">
                    <img src="/images/lock.gif" align="left" alt="lock" />
                    <a href="">Change Password</a><br />
                    <a href="">Change Security Question</a><br /><br />
                    Need to change the email address associated with this acount? Contact our Customer Care Department at <b>1-888-555-1212</b>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function ShowHideDIV(whichDiv){
	try{
	    if (safeGetElementByID(whichDiv)){
            var x = document.getElementById(whichDiv);
            if (x.style.display == 'block'){
                x.style.display = 'none';
            } else {
                x.style.display = 'block';
            }
	    } else {
            //error getting the element
	    }
	} catch(exception){
		//no handling - just preventing page explosions
	}
}
function safeGetElementByID(field){
	try{
		if(document.getElementById(field)){
			return true;
		} else {
            return false;
		}
	}
	catch(exception){
		return false;
	}
}
 
</script>
</body>
</html>

Open in new window

ERNesbitt

Try using the Tantek hack (See code below). Just remember that you have to change the <styleID> text with your class, tag, or ID. It needs to be changed in two places.

#styleID {
	margin: 0px;
	/* more styles, etc. etc. */
	voice-family: "\"}\""; /* IE 6.1 */
	voice-family: inherit;
	margin: 40px;
	}
 html>body #styleID  { /* FireFox */
	margin: 0px;
}

Open in new window

ASKER CERTIFIED SOLUTION

melihme

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nap0leon

ASKER

Resetting the defaults isn't really an option since the majority of it is used across several hundred pages.

Is there a solution where I place a new DIV container inside the "account login" area and then pop the "account-popup" into that?

If it can't be done strictly with CSS, how about using JavaScript to determine the mouse position "onclick" and telling the account-popup to be 280 pixels left of the mouse and 20 pixels down?