Issue with margin-top not working in IE11

Hi,
    I have an image which has the following style assigned (I know it's inline but want to get working before putting to a CSS file).....

<div style="margin-top: -17px;">
<img src....>
</div>

In Chrome and FF, this shows great, but in IE11 it ignores the margin-top.

is this a known issue, and is there a possible work around?

Cheers

Damian
damianb123Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rgranlundCommented:
I just read this:
http://community.sitepoint.com/t/ie11-negative-margin-bug/40401
Maybe try changing the style to:
<div style="margin: -17px 0 0 0;">
Also try:
<div style="margin: -17px 0 0 0;clear:both;">
0
damianb123Author Commented:
Hi rgranlund,
    Nope, neither of those made a difference.  The first example didn't make any difference, the second example also made no difference.....

Do you have any other ideas?  I'm baffled?

Cheers for your help.
0
rgranlundCommented:
Try removing the negative sign to see if that does anything.  If so, you may need to add a media query definition. Increase the number and see if anything moves. View the code source in FF and see if the div and the image are lined up.
0
damianb123Author Commented:
Yes, removing the negative i.e. -17px, to effectively '0' makes it look fine in IE, but then breaks it in FF and Chrome by having the image too low - perhaps another way of moving to top of div in FF and Chrome??
0
rgranlundCommented:
In your CSS file, you can place tow entries for that specific Div.  On the second entry, place it within a media query that specifically targets an IE browser. He is a brief article about this.  The CSS media query to use is at the bottom.
https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

.div-class {
margin-top:-30px;
}
//IE only
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.div-class {
margin-top:0x;
}

Open in new window

That should work.  If not, let me know
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.