Solved

margin top differences with IE6, IE7, and FireFox

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

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.
This article discusses four methods for overlaying images in a container on a web page
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

759 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now