I have this code, that shows a little triangle using pure CSS, and it works on all modern browsers, including IE8-IE9:
<html>
<head>
<style>
.arrow:after {
display: inline-block;
width: 0;
height: 0;
margin: 4px 0 0 4px;
vertical-align: top;
text-indent:-9999px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid black;
content: "↓";
}
</style>
</head>
<body>
<div class="arrow">testing</div>
</body>
</html>
The problem is that it is not working on IE7, it just does not display the arrow.
I have seen people suggesting to use ie8.js, but it doesn't work either.
Does anyone know how to make it work on IE7?
Yes, this is possible in IE7 without the use of JS plugins. Don't let the naysayers fool you. Here's your updated code:
<html>
<head>
<style type="text/css">
.arrow:after {
display: inline-block;
width: 0;
height: 0;
margin: 4px 0 0 4px;
vertical-align: top;
text-indent:-9999px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid black;
content: "↓";
}
.arrow {*zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i")).className="ie-after" );}
.arrow .ie-after {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '↓');}
</style>
</head>
<body>
<span class="arrow">testing</span>
</body>
</html>
style .arrow in conditional comments specifically for ie7. ie7 doesn't understand :after,:before,:content or display:inline-block for that matter. without looking at the site, it's hard to offer a solid fix. offhand, i'd make it display:block; with a text-indent and use background-image.
Have you tried using CSS3Pie
http://css3pie.com/
http://code.google.com/p/ie7-js/ project claims support for :after, :before and content. You would use the IE8.js part of it.
Test page: http://ie7-js.googlecode.com/svn/test/index.html
Related
I need to draw a lot of precisely positioned horizontal arrows that point either left, right, or both. I don't want to use HTML canvas. it will all be done dynamically with JQuery, but the css parameters will be the roughly the same as below, including arrowhead size and arrow thickness.
This code works pretty well...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style >
.ArrowHead {
position: absolute;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 5px solid transparent;
border-right: 12px solid black;
top:46px;left:52px;
}
.Arrow {
border-top:solid 1px black;
position: absolute;
top:50px;left:50px;
width:100px;height:1px
}
</style>
</head>
<body>
<div id="Arrow" class="Arrow"></div>
<div id="ArrowHead" class="ArrowHead"></div>
</body>
</html>
...but the tip of the arrowhead is slightly above the body of the arrow, and it just looks aligned properly on the right of the arrowhead because the bottom of the arrowhead is larger than the top (easier to see at 400%). Nice illusion, however, I was hoping to find out if there was some way that the arrowhead could be vertically symmetric and still be lined up exactly horizontally with the arrow body.
You won't be able to center the arrow vertically while the line is 1px in height, as you can't measure in half pixels. If you are willing to increase the line's width to two pixels, it's easy, though. It's also better to position the arrow heads relative to the line rather than to the viewport (using relative/absolute positioning). E.g.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.arrow {
background: black;
width:100px;
height:2px;
position: relative;
}
.arrow::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 12px solid black;
top:-4px;
left:-3px;
}
.arrow::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 12px solid black;
top:-4px;
right:-3px;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>
This is more of a curiosity question than something I really need to know.
On this page:
http://twitter.github.com/bootstrap/components.html#buttonDropdowns
How is the little caret / down arrow thing constructed? Poking around with Firebug it looks like it's just made with transparent borders but ... I must be missing something.
Bootstrap is very cool. I just got it going with Symfony.
It is only with borders. When you see arrows like this, the developer most likely used pseudo elements to create them. Basically what happens is you create a transparent box without content, and since there is nothing there, all you see is the one corner of the border. This conveniently looks just like an arrow.
How to do it:
.foo:before {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-left-color: #333;
}
http://jsfiddle.net/fGSZx/
Here are some resources to help:
CSS Triangle from CSS-Tricks (this should clear everything up)
Smashing Mag article about :before and :after
Here is the CSS for an upward facing caret, based on the CSS from bootstrap:
.caret-up {
display: inline-block;
width: 0px;
height: 0px;
margin-left: 2px;
vertical-align: middle;
border-top: none;
border-bottom: 4px solid #FFFFFF;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top-width: 0px;
border-top-style: dotted;
content: "";
}
Is it possible to create a border like the flowing image with css? Any hints will be appreciated
#sidebar h4, #sidebar-alt h4 {
background:url('images/widget-title-bg.png');
color: #333333;
font-size: 22px;
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
padding: 7px 0px 11px 0px;
}
EDIT: Made some changes according to your comments. Try:
<h1 id="progress">
<i></i>Recent Posts
</h1>
#progress {
display: block;
max-width: 200px;
min-width: 150px;
position: relative;
margin: 50px auto 0;
padding: 0 3px;
border-bottom: 10px solid #ECECEC;
font: bold 26px 'Dancing Script', cursive;
}
#progress i {
display: block;
position: absolute;
width: .8em;
height: 10px;
left: 0;
bottom: -10px;
background-color: #4287F4;
}
http://jsfiddle.net/userdude/z45QJ/4/
I'm not a big fan of the position manipulation, but all browsers should support and display this nearly identically, the only possible problem being the font's displa may be slightly differently in different browsers. However, IE7-9 should interpret everything else just fine.
Too bad the whole wuuurld isn't on WebKit:
<div id="progress"></div>
#progress {
width: 300px;
height: 10px;
border: none;
background-color: #ECECEC;
border-left: solid #4287F4;
box-shadow:inset 2px 0 white;
-webkit-animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
border-left-width: 0;
width: 300px;
} to {
border-left-width: 300px;
width: 0;
}
}
http://jsfiddle.net/userdude/z45QJ/1
It could be adjusted to go both ways. However, it only works on WebKit browsers (Chrome, Safari [?]). If that's ok, let me know and I'll add the return trip.
There are four ways to do it. I demonstrate four ways in this JSFiddle, and here are some explanations.
If you're not sure, just use Method B.
Method A
Method A has the advantage that it's the most compatible but the disadvantage that it requires extra HTML. Basically, you're giving an outer div the blue border and an inner div the white border. Your HTML will look something like this:
<div class="methodA">
<div class="container">
Method A
</div>
</div>
Your CSS will look like this:
.methodA {
border-left: 10px solid blue;
}
.methodA .container {
height: 100%;
border-left: 10px solid white;
}
Method B
Method B has the advantage that there's no extra HTML, but the disadvantage is that it won't work in IE before version 9.
.methodB {
border-left: 10px solid blue;
-webkit-box-shadow: inset 10px 0 white;
-moz-box-shadow: inset 10px 0 white;
box-shadow: inset 10px 0 white;
}
You can mitigate IE's compatibility issues using CSS3 PIE, which makes box shadows behave in Internet Explorer (along with other CSS3 features).
Methods C and D
This JSFiddle shows two other methods, which I won't describe in as much detail, but...
Method C makes the blue border a shadow. As a result, it can "cover" other elements and it also changes the size of the element. I don't love this solution, but it might work for you. It also suffers the compatibility issues of Method B.
Method D puts two divs inside of the element: one for the blue border and one for the right border.
it is not really complicate and no extra HTML is needed.
h4:after {
display:block;
content: '';
height:4px;
width: 1px;
border:0px solid #ececec;
border-left-width: 10px;
border-left-color:#4287F4;
border-right-width: 90px;
}
http://jsfiddle.net/N27CH/
Check this link Visit
(http://jsfiddle.net/qD4zd/1/).
See if it helps. This tells you about the application of gradient. See how it is done.
Also why not use directly the images that you want as the border.
Check out for "Gradient" in Css. This might answer your question.
I studied some usage of "canvas" tag in HTML5. That is preety much informative about gradient specification and is also more readable than the traditionl HTML4. So for this question i also want to request the questioner to look at the "canvas" tag in HTML5. check the link below.
Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers
Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas
Second link is more awesome. Cheers.:)
I am hoping someone can help me with a css problem...
I am using a listview to display some results, there is required to be a concept of grouping, to achieve this i am using 2 background colors alternating between groups. I am trying to add a border to these elements, but as the border-top and the border-left may be different colors, is there any way of removing the triangle where they meet?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
border-top:10px solid red;
border-left:10px solid white;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
You can write like this:
p{
width:200px;
height:200px;
background:red;
border-left:5px solid pink;
-moz-box-shadow:inset 0 5px green;
box-shadow:inset 0 5px green;
}
Check this http://jsfiddle.net/nRWux/1/
box-shaow not work in IE8 & below.
Here's a solution compatible with IE8+ using :before pseudo:
Fiddle http://jsfiddle.net/PhilippeVay/hXrW5/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
position: relative;
border-top:10px solid red;
border-bottom-style:dotted;
border-left-style:none;
}
p:before {
content: '';
display: block;
width: 10px;
position: absolute;
top: -10px; /* top: 0; if you want red over blue (top over left) */
bottom: 0;
background: blue;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
You can use box-shadow for the border-top,
In your example: http://jsfiddle.net/C7jnJ/
margin-top:10px;
box-shadow:0 -10px 0 10px red;
Instead of border-top. The margin-top is added because the shadow is displaying outside the 'p', If you would like it inside, then it would be: http://jsfiddle.net/C7jnJ/1/
box-shadow:inset 0px 10px 0px red;
No, it is not possible to remove the triangle where they meet. borders are implemented that way and there is no way around.
I am trying to create a rather simple effect on a set of images. When an image doesn't have the mouse over it, I'd like it to have a simple, gray border. When it does have an image over it, I'd like it to have a different, "selected", border.
The following CSS works great in Firefox:
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
However, in IE, borders do not appear when the mouse isn't hovered over the image. My Google-fu tells me there is a bug in IE that is causing this problem. Unfortunately, I can't seem to locate a way to fix that bug.
Try using a different colour. I'm not sure IE understands 'grey' (instead, use 'gray').
The following works in IE7, IE6, and FF3. The key was to use a:link:hover. IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.
Note that it's in Standards mode. Dont' know what would happen in quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
</body>
</html>
In my experience IE doesn't work well with pseudo-classes. I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.
CSS:
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
Inline Javascript:
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
Try using the background instead of the border.
It is not the same but it works in IE (take a look at the menu on my site: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
put that in your header, should fix some of the ie bugs.
IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself. So, if you added a class like "image" to your anchor and altered your markup to something like this:
<div class="myImage"><img .../></div>
You could then alter your CSS to look like this:
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
Which should mimic the desired effect by placing the border on the anchor instead of the image. Just as a note, you may need something like the following in your CSS to eliminate the image's default border:
.myImage a img {
border: none;
}