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)
Related
So I have the following two triangles:
The points are cut off, but my code is literally just this:
.navCaret {
position: relative;
float: right;
right: 5px;
top: 5px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
}
.navCaretOL {
position: relative;
float: right;
right: 9px;
top: 9px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
}
And as you can see in this JSFiddle, it actually DOESN'T cut the edges off when rendering these triangles in a JSFiddle.
All in all this could not be a more standard way of creating a pure CSS triangle and has worked for me many, many times. Anyone have any idea what could be causing this strange behavior? Thanks.
EDIT: By the way, confirmed to behave the same way in IE and Chrome, both latest versions.
OMG I just figured this out by going through my page and deleting each CSS rule line-by-line. Apparently the problem was caused by the following rule:
div.navUpper * {
padding-top: 4px;
}
'.navUpper' is the container my carets were in. The '*' selector was applying 4px padding to them -- the effects of which can be seen here: https://jsfiddle.net/6f4yxp4e/8/
Thanks again to those who responded -- you were both right in different ways.
The triangle is only pointy when the border stretches all the way to the center, meaning anything altering the content box has to be 0 - this includes width/height and padding. Check for other css rules that overwrite your height: 0; or add some padding.
.navCaret {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
outline: 1px solid red; /*for illustration purposes only*/
}
.navCaretOL {
height: 0;
width: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
white-space: nowrap; /*for illustration purposes only*/
outline: 1px solid red; /*for illustration purposes only*/
}
<div class="navCaret">height != 0</div>
<br>
<div class="navCaretOL">height == 0 (content is overflowing)</div>
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.
This should be fairly simple, but after trying a lot of solutions from Google and other Stack Overflow questions I still haven't found a solution. I have a html.erb partial in a rails project:
<div class="resource-body">
<div class="arrow-up"></div>
<h4><%= resource.title %></h4>
<div class="resource-section-id">
<span hidden><%=resource.section_id%></span>
</div>
</div>
And the corresponding CSS:
.resource-body{
padding-left: 20vw;
margin: 0;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0;
border-bottom: 5px solid black;
}
The arrow appears above the URL. I'm trying to get the arrow to be immediately to the left of the link. I've tried the usual suspects like display: inline, etc. but no dice. Any ideas?
Here I have modified the css and added two properties in .arrow-up class
float: left;
padding-top: 6px;
Here is the link to fiddle
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0;
border-bottom: 5px solid black;
position: relative;
top: 33px;
left: -18px;
}
Make it easy!!!!!
just add this rules to your css:
h4 a {float:left;}
Enjoy it!!!
How is should be:
http://thc-cup.ucoz.com/How_is_should_be_Chrome_and_Firefox.png
How bad it is on IE:
http://thc-cup.ucoz.com/How_bad_it_is_on_IE.png
Is there any way to make the avatar area display like on Chrome and Firefox?
Link: thc-cup.ucoz.com/forum/2-1-1
CSS from that box:
.postTdInfo {
text-align:center;
background:#e0e0e0;
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
Thanks!
I think this script can help you out CSS3 PIE
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