In my mvc application I have added a div with height:270px.
<style type="text/css">
.table-div {
height: 270px;
margin-top: -20px;
border-top: 2px solid #DDD;
border-bottom: 2px solid #DDD;
margin-right: 10px;
margin-left: 10px;
background-color: white;
}
</style>
Its working fine in firefox. But if I open it in Chrome, then its height will looks like more than 270px. Why it is happening like this? How to solve this?
May be it is the element height.border-top and border-bottom should be added with the 270.
Related
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.
The right corner borders are cutting by a textarea that has a scrollbar. It only happens in IE11, other browsers are working fine.
This is the CSS:
textarea {
border: 1px solid black;
border-radius: 4px;
height: 100px;
}
See this Fiddle and this
I would have thought that some padding would fix it. Something like:
textarea{
border: 1px solid black;
border-radius: 4px;
height: 100px;
padding: 10px;
}
It looks fine to me in Chrome. I would test it in IE, but I'm on a Macbook.
I've created a shape using below css which displays fine in chrome like this:
But this appears broken in IE9 like this:
How do i fix this?
Here is my css/html used for generating this.
.arrow-head {
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
float: left;
}
.arrow-mid {
background: blue;
height: 20px;
width: 80px;
font-size: 12px;
color: white;
text-align: center;
float: left;
}
.arrow-tail {
width: 0px;
height: 0px;
border-top: 10px solid blue;
border-bottom: 10px solid blue;
border-left: 10px solid transparent;
float: left;
}
<div class="arrow-tail"></div>
<div class="arrow-mid"></div>
<div class="arrow-head"></div>
I used IE9 using Developer Tools and seems like it's working perfectly for me.
Guess you messed up your developer tools and I assume you have IE8 Standards View turned on...
Use the below meta and see it will work
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Demo (This is only for OP, as the code runs pefectly on IE9 Standards Mode)
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.
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