[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

margin top differences with IE6, IE7, and FireFox

Posted on 2008-10-07
3
Medium Priority
?
1,424 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 1500 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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

650 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