Solved

margin top differences with IE6, IE7, and FireFox

Posted on 2008-10-07
3
1,406 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

726 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