Issue with margin-top not working in IE11

    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....>

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?


Who is Participating?
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.

.div-class {
//IE only
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.div-class {

Open in new window

That should work.  If not, let me know
I just read this:
Maybe try changing the style to:
<div style="margin: -17px 0 0 0;">
Also try:
<div style="margin: -17px 0 0 0;clear:both;">
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.
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.
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??
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.