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
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.
Any idea why there's a thin grey line above my green and how to get rid of it?
Thanks
https://jsfiddle.net/Lc7gym88/
hr {
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).
Remove border first.
hr {
border: none;
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
body {
background-color: black;
}
<br/>
<hr/>
Replace this:
border-bottom: 4px solid #469551;
by this:
border: 4px solid #469551;
Here is the JSFiddle demo
Removed default <hr> border and uses height and background
hr {
background: #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 4px;
border:none;
}
Example : https://jsfiddle.net/Lc7gym88/1/
by default tag <hr> taking border so you need first border zero. then add height check my demo
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.
How can I make img or element with image background same height, padding and margin as other links?
Here is my code
a {
display: inline-block;
padding: 1%;
border: 1px solid black;
color: black;
font-size: 15px;
}
a img {
height: 15px;
border: 1px solid red;
}
.backg {
display: inline-block;
padding: 1%;
border: 1px solid red;
color: black;
background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 100%;
}
here is codepen http://codepen.io/anon/pen/ZQRyOd?editors=1100
I am not sure that I understood the question but you can add vertical-align: middle; to .backg and a img
In my opinion if you don't care about older browser you should use flexbox
Here is a decent guide for doing so:
A Complete Guide to Flexbox
When I hover over an area on my testing website, I made it so a border is added. But because that happens, other elements move. I've looked up other posts, and they recommended adding padding, but that doesn't seem to work because it goes over other stuff.
This is where I add the border:
#logo:hover {
border: 2px solid cyan;
}
This is what it was added to:
#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
}
Does anyone know how to help me? Also about the way I asked my question.
#logo {
background-color: black;
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
}
#logo:hover {
border: 2px solid cyan;
}
<div id=logo></div>
Greetings,
TheWombatGuru
You also can use box shadow:
#logo{
box-shadow: inset 0 0 0 1px cyan;
}
#logo:hover {
box-shadow: inset 0 0 0 2px cyan;
}
You may add:
* { box-sizing: border-box;}
to your css sheet or maybe just to your #logo id.
you may find more info about this (for me at least amazing propertie ) here
(and just in case... the code marked applied the property to every html element in your web, which is exactly what I have been doing in my last many projects with absolutely no regret)
You should try adding this to your #logo :
border: 2px solid transparent;
which would make :
#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
border : 2px solid transparent;
}
Or using box-sizing: border-box
Hopes it helps !
Cheers !
box-sizing: border-box doesn't really make the 'circle' render correctly with the border in this case - although it is an amazing property. If it were me, I'd change your css to the following:
#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}
and adjust your #logo class margins to
{margin: 0 9px 0 9px;}
a little 'hackier', but I prefer the behaviour
You should add box-sizing: border-box to the pertinent element in your CSS. This will put the padding inside the width of the container.
Here is a codepen to demonstrate: http://codepen.io/himmel/pen/LVPPvg
Alternatively to box-sizing: border-box; you could also use the calc function to subtract a value.
#logo:hover {
width: calc(200px - 4px);
height: calc(200px - 4px);
border: 2px solid cyan;
}
This method might be helpful when you are dealing with percentages, anyway it's a cool trick i situations like this.
Try adding border:1px solid transparent; to non hover element.
Try using position: absolute; because elements with position absolute have no effect on other elements. Make sure that the parent element has a position relative. For example
`
#parent-element {
position:relative;
}
#logo {
position:absolute;
}`