Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

margin top differences with IE6, IE7, and FireFox

Posted on 2008-10-07
3
1,401 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:nap0leon
3 Comments
 
LVL 3

Expert Comment

by:ERNesbitt
ID: 22663246
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

0
 
LVL 1

Accepted Solution

by:
melihme earned 500 total points
ID: 22663271
Because all the browsers have different "default margin values" for divs, you need to reset.

Actually, if you want a web page which have same looking at any browser you must reset *everything* at first.

check out this page, http://developer.yahoo.com/yui/reset/

simply add the reset.css (it must be first attached css file), all margins, paddings,  any browser specific value for css will be clear..

do not forget it reset **everything**. for example the strong tag does not make texts bold.
0
 
LVL 18

Author Comment

by:nap0leon
ID: 22689922
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?
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question