CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Amir
Amir

Reputation: 820

Negative margins not rendering correctly in non-Chrome browsers

I'm developing a website and using codes below.Chrome seems to work fine, but Firefox doesn't read negative margin and IE completely doesn't load it correctly :

Background of form :

<div class="pageB" style="opacity:0.8;position: fixed; height: 100%; width: 100%; top: 0; left: 0; background-color: #000000; z-index: 200; display: none; font-weight: bold; color: White; font-size: 16pt;direction: rtl;">
<div class="userlogin">
<div id=top>
<div class=s1></div>
<div class=s2></div>
<div class=s3></div>
<div class=s4></div>
</div>
<div id=round>
<div align="right" dir="rtl" style="float: right;"><img src="/Files/close.png" width="24" style="cursor: pointer;" onclick="AnimateBoxBack()"></div>
</div>
<div id=bottom>
<div class=s4></div>
<div class=s3></div>
<div class=s2></div>
<div class=s1></div>
</div>
</div>
</div>

Main Form : 

<div class="login-box">
Username :
<input type="text" style="width: 99%;" name="username" class="username" onfocus="AnimateBox()" /><br />
Password : <input style="width: 99%;" type="password" name="password" class="password" onfocus="AnimateBox()" /><br />
<input type="radio" name="chkAdm" class="chkAdm" id="admin" checked="checked">Admin&nbsp;&nbsp;
<input type="radio" name="chkAdm" class="chkAdm" id="user">User<br /><br />
<button class="rounded" onclick="Login()"><span>Login</span></button>
</div>

the javascript code that animates it :

function AnimateBox()
{
    $(".PageB").css("display","block");
    $(".login-box").css("position", "fixed");
    $(".login-box").css("z-index", "300");// : "300"
    $(".login-box").animate({
        "top" : "50%",
        "left" : "50%",
        "margin-top" : "-140px",
        "margin-left" : "-175px"
    },1000);
    loginAnimated = true;
}

Thanks in advance

Upvotes: 0

Views: 1202

Answers (2)

KilZone
KilZone

Reputation: 1615

Technically it should work in all 3 browsers you mention(example), I've used negative margins every now and then (but you should try to avoid them), so there has to something else going wrong with your page.

However, this is not the reason I'm writing this answer. The reason people use negative margins is to position a div without knowing the aspect ratios or screen size before the page is fully rendered, i.e., when placing it in a CSS stylesheet. You on the other hand, can know exactly what the screen size is, by:

$(window).width(); // Window width;
$(document).width(); // HTML width;

So you can use:

$(".login-box").animate({
    "top" : (0.5 * $(window).height()) - 140,
    "left" : (0.5 * $(window).width()) - 175
}, 1000);

Which allows you to use a position: fixed; or position: absolute; without negative margins, without loss of functionality and consistency throughout all 3 browsers you mention.

Upvotes: 2

casraf
casraf

Reputation: 21694

You could try position: relative and top/right/bottom/left.

Upvotes: 1

Related Questions