I've been using CSS triangles on different websites for about a year now:
.triangle {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid red;
}
In Firefox (Mac OS X) the triangles always looked like this:
Since a couple of days, the triangles look like this in Firefox:
I don't know exactly since when this happens, I guess since an update to Firefox 24 or 25.
I absolutely prefer how the triangle looked before. Now, the tip looks blunt.
What can I do to make the tip sharp again in Firefox?
What about other browsers?
Karl
Well that is how the browser renders it, so there is nothing really you can do besides using images.
It looks fine to me? What OS are you using? (OSX 10.8.4 here) and Firefox 25.0. Also looks good in Chrome to me (latest version). Why do you need to have code when adding link to fiddle .__.
Related
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;
}
in webkit safari and chrome ive found that they render the last px of the css rule border:1px dotted; oddly it kind of combines the last 2 pixels into 1 so you get a black mark at the end of the line ..?
has any one else encountered this / got a work arround for it ? please see attached image bellow
Give it a border-right: 1px solid transparent; style: http://jsfiddle.net/4CktD/
It's weird, but hey, it works.
For some reason a website that recently went live has now completely screwed in IE9. Not sure what has happened to screw it all up but I'm left desperately needing to apply the fixes as the site is actually live.
There are some major ones and some minor ones.
The site is http://bit.ly/8oRMih
The site views fine in Firefox and Chrome.
When viewed in IE9, the left hand sidebar (left_column) doesn't appear horizontally level with the jQuery slider (jtabslider).
The CSS for the id left_column is...
clear: left;
width: 200px;
margin-top: -34px;
margin-right: 10px;
overflow: hidden;
border-left: 4px solid #990000;
border-right: 4px solid #990000;
border-bottom: 4px solid #990000;
None of our designers are free currently and I'm simply hopeless at debugging for IE so would be really grateful if any CSS wizards could lend a hand in resolving the issues if possible please.
Let me know if there is more info needed from me.
Thanks in advance.
Validate your HTML.
The problem is the first issue listed:
No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.
No doctype means that IE is using quirks mode which emulates IE5.5. Which sucks. So your site looks broken.
Working on my home page where I'm cycling through some images using JQuery's fadeIn and fadeOut methods.
The images have a border of 2px and a radius of 14px applied.
As you can see, the corners of the image are overlapping the border.
This behavior only happens in Safari and Chrome, not in Firefox and IE.
Anyone have any idea as to why?
You can see this behavior here:
http://www.findyourgeek.com/index-copy.php
Thanks.
Support for border-radius on images in Chrome/Safari (or rather Webkit) seems to be a bit buggy
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
The above post is from earlier in the year (~Chrome ver 10) when the support for border-radius on images wasn't working. Support is available know but like you're seeing it still has some issues. You may want to report the bug you're seeing to the Webkit/Chrome/Safari projects. I know there was a fairly easy to find bug reporting page for Chromium, not sure about the other two.
Here are two ideas for workarounds:
you can apply sort of a CSS3 hack by removing the 2px border and setting a 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;). This would have a few drawbacks as it's only a fix for Chrome/Safari example jsfiddle
or of course the other option is to edit the photos to give them rounded corners (http://www.roundpic.com/ is a good site for this)
try removing the border styling from the image itself and adding it to #content #topStoriesTest
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}
I am debugging my app in IE8's developer mode and I'm running into some very strange behavior. IE8's dev mode usually displays every CSS style on a new line, but not in these cases... take three examples:
#1
.messages .read
background-color: rgb(234,234,234); HEIGHT: 1.5em
padding-top: 0.3em
#2
a:link
color : rgb(80,80,82); TEXT-DECORATION: none
#3
#messaging .body
border-bottom: rgb(...) 1px solid
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDFDFD', endColorstr='#C2C2C2'); BORDER-LEFT: rgb(...) 1px solid; PADDING-BOTTOM: 1.5em; MARGIN: 15px 0 25px; etc.
As you can see, these are three cases where IE seems to behave strangely, and especially for #3, I get some really strange artefacts, such as an ugly dark grey border around my gradient box.
Is there a known way of getting around this behavior?
Update - gradient artefacts fixed
#3 was fixed surprisingly easily, by adding position:relative; to that style. Apparently IE needs this in order to render its gradients properly.
I'm still interested in knowing why IE lumps some styles together on one line, and whether this quirk has any actual effect.
In the samples you give there are at least some missing semi-colons. This may very well be the problem here.
As suggested in comments: try to validate your CSS. Here's the one from W3:
http://jigsaw.w3.org/css-validator/