Solved

margin top differences with IE6, IE7, and FireFox

Posted on 2008-10-07
3
1,413 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
[X]
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
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

717 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