I used the CSS border radius to curve a dotted border. It looks great in every browser except firefox where only the corners have a solid curve.
Thanks in advance
Some years ago this was a bug of FireFox as far as I remember. Not sure how it's now.
Show us your CSS please. Maybe you have to use browser specific CSS like this:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
Also there can be some dependency of what HTML version you use. HTML 5 hope :)
That's the way Firefox renders it.
There is no solution for this.
http://jsfiddle.net/437sp/
.border {
width:200px;
height: 50px;
border:5px dotted green;
border-radius:10px;
}
Related
I've created a fiddle to illustrate this: https://jsfiddle.net/9tu8n4y5/
The markup is pretty simple as it's supposed to look like a dotted line to separate bits of content:
.dot {
border-bottom: dotted 2px #022169;
}
<div class="dot"></div>
In Firefox 55.0.3 this looks as I'd expect it to:
However, in Chrome 61.0.3163.91 it has a strange "solid line" at the start and end:
Closer:
Does anyone have any ideas why this is? I guess it's a browser specific problem that cannot be changed with CSS?
I am using a 27" 5k Retina iMac. However my second display is a non-Retina screen and the results are the same on that.
Safari 10.0.3 gives the same result as Firefox.
Edit (after posting) - reported to Chromium Bugs team, https://bugs.chromium.org/p/chromium/issues/detail?id=766977
I haven't tested this solution on retina, but you can play around with radius values to get exactly/closer to what you want. This is how I have dealt with the bug:
.border-bug {
border-bottom: 2px dotted red;
}
.no-border-bug {
border-bottom: 2px dotted red;
border-left: 2px solid transparent;
border-top: 1px solid transparent;
border-radius: 4px 1px 3px 3px;
}
<div class="border-bug">
Bug Bug Bug.
</div>
<br>
<div class="no-border-bug">
Almost no bug.
</div>
This bug seems like have been around since ages.
Hi Just found a work around: add Css Property border-collapse: separate; to table and it will work fine.
I've a Joomla3 website with a custom template looking fine in most browsers but awful in IE8. Lots of the elements just don't seem to be picking up background colours and are just white.
For instance the footer normally has a background colour. When I look at the template.css file (compiled from bootstrap and my custom template.less file) you can see the footer formatting
.footer .container {
padding: 5px;
border: 3px solid #bbbbbb;
padding-top: 0px;
border-top: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background-color: rgba(245,248,250,0.7);
}
But when I use the website development tools of ie8 (via wine on my mac - in case that makes a difference) to examine why it is just white in ie8, I see
which seems to show that the background-color of .footer .container is just being ignored.
Why would this be? Is this because it's compiled into a rgba format by the less compiler?
Many thanks for any help on this and how I might solve it.
CSS3 colors, such as rgba() are not supported by IE8, that's why it's not working.
You will have to take an alternative approach for specifying the background-color if you want support in IE8. If you don't mind losing the transparency, just use background-color:rgb(245,248,250); or.. background-color: #F5F8FA;
See http://caniuse.com/css3-colors
What you can do is import css3.js in your website. This javascript files allows you to use CSS3 attributes that will work on older browser that wouldn't usually support it.
http://imsky.github.io/cssFx/
Once you've imported that, you can use the following as you were before:
background-color: rgba(245,248,250,0.7);
Just to be on the safe side, I think it's always good practice to have a fallback, just incase, like so:
background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);
Note that the fallback comes before rgba()
Hope this helps
I encountered this same issue when using IE11 in enterprise mode.
I had this style set:
.heading {
background-color:#f1f1ef;
border-style:solid;
border-color:#E4E3DD;
border-width:1px;
}
and my table heading did not have the background color:
<th class="heading">Test</th>
I had to manually set a property bgcolor for this to work in Enterprise mode:
<th class="heading" bgcolor="#f1f1ef">Test</th>
I want to implement badges like on Stack Overflow. Maybe you can give me some nice CSS code?
Introducing the brand new
Stack Overflow BadgeMaker 3000
It makes Badges™
Just pop in a name, tell it what color you want your shiny new badge to be, and you're all set!
Browser support: All modern browsers, up to and including IE7. Round corners not supported in IE8 and below.
Maybe you can use the nice Firebug and take a peek at how SO does it.
You mean rounded corners? It uses CSS3 rounded corners:
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
Or you can run a search for 'badge' on their CSS file:
.badge,.badge-tag{color:#fff!important;background-color:#333;border:1px solid #333;margin:0 3px 3px 0;padding:0 6px 0 3px;display:inline-block;text-decoration:none;line-height:1.9;-moz-border-radius:6px;-webkit-border-radius:6px;}
.badge:hover,.badge-tag:hover{border:1px solid #555;background-color:#555;text-decoration:none;}
.badge-tag:hover{color:#fff!important;border:2px solid #555;}
.badge-tag{color:#333!important;border:2px solid #333;background-color:#eee;}
I have a problem with partially rounded corners. See the first working example for most browsers:
.box {
display: block;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: yellow;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
You can see that only bottom right corner should be rounded. Natural choice would be adding a border-radius.htc hack inside a conditional IE statement:
.box {
border-bottom-right-radius: 20px;
behavior:url(border-radius.htc);
}
This is not working because border-radius.htc file is only accessing normal border-radius value (this.currentStyle['border-radius']). VML used by the hack is roundrect which only supports one percentage value for arcsize.
So I was wondering if there is any other way around the problem by using some other VML elements?
Another problem is that htc-file doesnt's support borders but that can be fixed with VML's stroked attribute. Nifty corners for example doesn't work well with corners at all.
I was able to get it to work with border-radius: 0 0 10px 10px; and htc from http://css3pie.com/
The other solution: border-bottom-right-radius:10px; not to make the CPU calculate unneeded border roundings
i used this corner style:
.corners4{
background:url(../img/panelHeaderColor.jpg) repeat-x;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
but, this doesn't work in IE, is there any IE equivalent for this?
thanks
If you remove the -moz- part of the property, you will have border-radius-topleft and so on. These are the border-radius properties. These are only in the CSS3 standard. With IE's current track record, CSS3 should be supported sometime around 2017. If you want it to work in Safari, you can use -webkit-border-radius. See this question for more information on rounded corners.
The -moz- part stands for "Mozilla" - this property is not supported by IE.
There is no CSS only equivalent for this that works across all browsers. At least not yet.
Curved corners are a serious pain in the behind to implement with javascript, and most solutions aren't very robust. The absolute best way to achieve this in a way all your users will be able to enjoy is the old school way of using your own images as corners, unfortunately. This website makes the process easier, at least. If you want to venture into JS solutions, I've heard good things about curvyCorners.
IE seems to be tricky with rounded corners a lot of times. All in all, you will find it isn't supported very well, and there are still plenty of users going back to IE5.5 or so. I would recommend a different approach.
While I don't remember exactly where I learned it, I can give you the code I have on my website.
HTML Code that goes before your element:
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
HTML Code that comes after your element
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
CSS Code:
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background: #000; margin:0 4px;}
.b2 {height:1px; background: #fff; border-right:2px solid #000; border-left:2px solid #000; margin:0 2px;}
.b3 {height:1px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
.b4 {height:2px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 0px;}
The above CSS code, the #000 is going to be your border color. The #FFF is going to be
the color of your content box.
You will want to have no top and no bottom border on your content block, but then set the left and right border to be 1px and then the color you want the border to be.
Depending on your current implementation this may seem somewhat not as nice looking, and feel free to add more b tags applying the same logic to get a bigger radius. If you would like a larger radius and can't figure it out, just let me know and I'll extend this to be larger.
One final note, depending on where you are placing these you may have to tweek the margin settings a bit.
Check this site: http://border-radius.com/ it generats css for WebKit, Gecko, CSS3.
Example:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
The corner radius issue of IE gonna solve.
http://kbala.com/ie-9-supports-corner-radius/