IE11 Negative Margin FIx

HTML & CSS
1

Hi, I’m having issues with negative margins on IE11. I realize that IE is funky with them so I found two possible fixes in a google search. I only need this for min-height: 768px and in IE11. I don’t have the ability to test 768 so I have to have a friend test and I want to make sure my code is as accurate as possible when I do so they don’t have to keep testing. My question is the css formatting. Which one would be correct?

Fix1:

_:-ms-fullscreen, :root .ie11up and (min-height: 768px) {
.problem2 {
position:relative;
top:-10px;
}
}

OR

_:-ms-fullscreen, :root .ie11 {
@media screen and (min-height: 768px) {
.problem2 {
position:relative;
top:-10px;
}
}
}

Fix 2:

@media all and ((-ms-high-contrast: active), (-ms-high-contrast: none)) and (min-height: 768px) {
.problem2 {
position:relative;
top:-10px;
}
}
2

Well, I must be extremely fortunate because
my IE11 browser renders them perfectly. :sunglasses:

Here is my test example…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
div {
    width: 60em;
    padding: 1em;
    background: #f00;
    box-sizing: border-box;
    animation: test 10s  ease-in-out infinite;
 }
@keyframes test {
 0%   {margin-left: 0;}
 50%  {margin-left: -61em;}
 100% {margin-left: 0;}
 }
</style>
</head>
<body> 
 <div></div>
</body>
</html>

coothead

3

No fair cheating. You’re using real CSS.

1 Like
4

No, its just that you know what you are doing, I don’t :slight_smile:

So since they do, I want to at least recognize IE11 and use specific css. Do you know if any of my above are the correct way to identify the browser?

5

The above posted “CSS” is invalid. You can test that by direct upload using the CSS validator.

https://jigsaw.w3.org/css-validator/

Repeat your Google search and find out if the “css” is SCSS or something else in an uncompiled form. If it is, you’ll need to compile it before including it in your code.

I am not aware of any way that CSS can identify IE11.

6

I don’t understand which part is invalid. Im not arguing, just unsure. Let me present my problem differently.

This CSS works in Chrome and FF, but not IE:

@media screen and (min-height: 768px) {
.problem2 {
margin-top:-10px;
}
}

This CSS works in IE, but not in Chrome or FF:
@media screen and (min-height: 768px) {
.problem2 {
position:relative;
top:-10px;
}
}

I need to identify if the browser is IE. I found this which gave me two options:
https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

7

You shouldn’t need to if you use valid CSS.

8

Hi, what is invalid about this? I’m not aguing, just don’t understand.

@media screen and (min-height: 768px) {
.problem2 {
margin-top:-10px;
}
}
9

Thanks very much for the URL to PhilipNewcomer’s article. Good stuff.

I hesitated to ask more specifically what you are trying to do that requires negative top margins. They are usually not needed if a different method of coding that area of the layout can be found. For example, newbies commonly are unaware that lists have margin-top and bottom by default which sometimes imposes a white bar above their header.

So let me follow @felgall’s lead and ask if you can post a link to your test site or create a working page that demonstrates the problem using your real code.

Nothing, that snippit is perfectly valid

10

That’s the wrong approach and as Ron suggests we can most likely fix the issue without hacks as most problems in IE11 are down to the developers misunderstanding of how css works exactly. Even if there is a bug that you have found then chances are that a simple change in the way you approach the problem will solve the issue.

These days you never want to use a hack because the past has told us that they end up breaking something else along the way. I wouldn’t risk any of those hacks you listed.

Of course you may have found a bug that does need a hack and in which case it is important for us to know what it is in order to spot it in the future. Therefore a demo of the problem is certainly needed.:slight_smile:

1 Like
11

So, I figured out my issue in all areas,but one. My site is a fullscroll, and the problematic area is section 7. This is the CSS for each row that has a green check at the end:

@media screen and (min-height: 768px) {
.symptomrow {
margin-top:-8px;
}

I am trying to reduce the vertical spacing between each row. The above code works in Chrome and FF, not IE. To get it to work in IE I have to use:

@media screen and (min-height: 768px) {
.symptomrow {
position: relative;
top:-8px;
}

If I use the working IE code in Chome and FF, it only moves the whole section of rows up as one unit, not each row.

My site.

12

The large spacing between each row is caused simply by the padding on the tick icon. Line 1068 highlighted below:

.shortcode.themify-icon .themify-icon-icon {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
padding: .5em;
font-size: 16px;
border-radius: 100%;
}

So just remove the top and bottom padding, or reduce it. E.g.:

padding: 0 .5em;

When you face a situation like this, you should be asking “What is actually causing that spacing?” … rather than “What hack can I use to remove it.” :slight_smile:

2 Likes
13

Hi Ralph, thanks for the perspective. That wasn’t it. The padding is fine around the icon. I changed it just to see and it made no difference. The icon is part of the row. I need to adjust vertical spacing between the full row. First row for example is Purchasing and a check mark. I need less space below that row and same goes for all rows.

14

This is what happens if you remove the top and bottom padding (and the negative margin), as I showed above:

906×510 36.5 KB

The padding—as shown below—is enlarging the gap quite a bit:

896×248 13.9 KB

1 Like
15

Makes perfect sense and I got it to work! I didn’t target the right icon css. Thanks so much!

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.