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?
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.