Please bear with me as I'm new to IE11 debugging.
For the info, this bug is only happening in IE11, browsers like Chrome or FireFox do not have this issue
Currently part of my webpage is displaying that
This is ok.
However, when choosing through a different property, and clicking on one of the property this is what I have
From what I can see, the CSS is not used/read correctly by IE11.
This is my CSS
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
I've tried to add an !important on the width in the css but IE11 refuses to take into account and still gives me the wrong width.
.floor-details-item {
min-height: 160px;
width: 100% !important;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
&.opac {
opacity: 0.2;
}
When going through IE11 console when inspecting the element, this is what I have
Funny part is when I change it manually and typing 100% as you can see below, then the width issue is fixed.
Thank you for any insight you may provide.
update :
I have tried the following on the CSS. As this link is saying that IE 11 is not fond of width with !important, I added in the css the following
.floor-details-item {
min-height: 160px;
/*width: 100% !important;*/
/*adding auto and initial*/
width: auto;
width: initial;
But nothing so far.
Try to add min-width: 1px;. It saved my ass many times;-)
After many wrangles plus the help of my colleague, I found where the issue was located.
It was due to the css.
.floor-details {
width: 44%;
margin-left: 5px;
height: 555px;
float: left;
background-color: #FFFFFF;
border-radius: 5px;
border: 1px solid #eeeeee;
border-left: 20px solid #C2EFDF;
overflow-y: auto;
padding: 5px;
//display: flex;
align-items: center;
flex-direction: column;
.floor-details-item {
min-height: 160px;
width: 100%;
border: 0.5px solid #C2EFDF;
border-radius: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
padding: 5px;
//display: flex;
min-width: 1px;
IE11 does not like the display: flex; as a child. Removing it from the child also mean removing it from the parent as you can see from the code. Once done, the issue is fixed.
Related
take a look at this:
Here is my css:
<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
margin: 0px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>
Why are margins not working?
I want the "backups_header" to be flush with the top of the backups.
And they are, but the font probably doesn't fill its entire height. There is a bit of spacing around a the letters that make it look like a margin of about two pixels. If you select it, the highlight will reveil the actual line height.
There is no proper way to fix this, because it can be different for each font and even slightly differ on each machine (especially different OS'es), but your best bet would be to set a line-height and tweak it until it is just right.
The main reason is that you are again changing the margins below. write margin:0px above!
`<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
margin: 0px;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>`
I want to display a part of image in circle div. I have a code, but it doesn't work in Opera.
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
}
img {
margin-left: -75px;
width: 350px;
height: 90px;
}
HTML:
<div>
<img src="http://diskuse.jakpsatweb.cz/img/logo.png">
</div>
http://jsfiddle.net/vpfEY/6/
How can I fix it?
Check border-radius support hear also check this
Looking at you code it seems working i have tested it on chrome, firefox and opera. and its working.
If you are using the older version try using
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
NOTE But this is not required for morden browsers
I am unsure why an image would not respect the border-radius property. However I was able to get it to work using a background image.
HTML
<div></div>
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
background:url(http://diskuse.jakpsatweb.cz/img/logo.png) -115px 0 no-repeat;
}
http://jsfiddle.net/vpfEY/18/
the link: http://xanlz.com/test/test.html
the css:
.hot-version, .week-down, .total-down, .tag {
border: 1px solid #D4D4D4;
height: 286px;
margin-top: 10px;
padding: 1px;
}
the red part margin-top is larger in IE8 and ok under firefox,IE7. why? how to correct it?
Use css hacks:
IE7 and below can parse *property: value
.hot-version, .week-down, .total-down, .tag {
border: 1px solid #D4D4D4;
height: 286px;
margin-top: 10px; //for IE8
*margin-top: //another value for IE7;
padding: 1px;
}
EDIT:
These two links provide more hacks for IE6/7/8:
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
http://www.webdevout.net/css-hacks#in_css
It is easiest to describe this problem with pictures. How it is meant to look (works in Firefox):
firefox
In Chrome and Safari the insides of the border are square for some reason:
chrome
Here is my CSS:
.header {
width: 850px;
margin-left: auto;
margin-right: auto;
background-color: #F7F7F7;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px 40px 40px 40px;
border: 20px solid rgba(255,255,255,0.1);
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
margin-top: 20px;
}
Any ideas?
EDIT - here is a jfiddle of it: jsfiddle.net/oliverw92/pJgyu/11262/
It's a known Webkit and Opera bug: https://bugs.webkit.org/show_bug.cgi?id=23166
Until it's fixed, your only way around it is using 2 elements I'm afraid...
If you remove the alpha from the border, it works. Since you probably don't want to do that, you may be able to use two nested elements. Example here.
I think this is normal Webkit behavior when clipping to the box's padding. The padding is square, i.e., not defined by the border's curves, and so the background color overlays portions of the border.
Try this instead (via a SPAN nested inside your DIV):
CSS:
body {
background-color: #999;
}
.header {
width: 400px;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px 40px 40px 40px;
border: 20px solid rgba(255,255,255,0.1);
margin-top: 20px;
height: 85px;
font-weight: 100;
font-size: 70px;
vertical-align: middle;
text-align: center;
}
.header span
{
background-color: #F7F7F7;
display: inline-block;
width:100%;
border-radius: 20px 20px;
}
HTML:
<div class="header">
<span>DataLog</span>
</div>
Side Note: Aside from your code, I didn't bother adding all the vendor prefixes; I'll leave that to you.
Or you can just use a box-shadow and adjust the top margin. My example only includes the -web-kit versions
.header {
width: 400px;
margin-left: auto;
margin-right: auto;
background-color: #F7F7F7;
-webkit-border-radius: 40px;
-webkit-box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.10);
margin-top: 40px;
height: 85px;
font-weight: 100;
font-size: 70px;
vertical-align: middle;
text-align: center;
}
Here is a similar JSFiddle to your first example using only your original div
I have been experiencing a similar issue. It turned out that because the container inside the container that i have added with the border-radius has a background-colour, it covers the inside of the border.
To rectify this i have added a border-radius to the child object as well as it makes it look the same.
I have a simple layout which works fine in Chrome, Safari even Opera too (OS X). The surprise for me here is Firefox. (IE and Win not tested yet).
The problem is fieldset.ownerbox isn't floating in Firefox. (The two semi-transparent fieldset below the pie-chart)
CSS rules applied here:
#owners {
position: relative;
width: 940px;
left: 0px;
margin-left: 0px;
z-index: 1;
top: -240px;
font-size: 16px;
}
.ownerbox {
width: 310px;
height: 150px;
padding: 10px;
margin-right: 20px;
float: left;
background: rgba(255,255,255,0.5);
color: #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.ownerbox.large {
width: 500px;
padding: 0px 10px 20px 10px;
}
Please help, what's wrong with my approach?
Readjust your widths so it takes padding into account. You can overflow-x:hidden; on #owners to see how it looks "contained".
Alternatively adjust the width on #owners.
Edit: Seems you just need to clear:both on #owners.