CSS triangle up and down have different alignment in Firefox

Asked Jun 24 '13 at 16:19

Active Jun 24 '13 at 16:19

Viewed 137 times

I'm trying to make an image-less icon for a drop down menu using CSS triangles that point up and down. Code looks like this: http://jsfiddle.net/FGrR2/6/

.d, .u {
  float: left;
  clear: left;
  width: 0px;
  height: 0px;
  border-style: solid;
  margin-bottom: 5px;
}
.d {
  border-width: 5px 5px 0 5px;
  border-color: #007bff transparent transparent transparent;
}
.u {   
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #007bff transparent;
}

However, if I load the page in Firefox 17.0.1, the edges of the triangles don't line up. Here's a zoomed version of how that looks: https://i.stack.imgur.com/LzTrN.jpg It's like the 2nd triangle is "aligned" to the right or something.

Has anyone else encountered this?

asked Jun 24 '13 at 16:19

fien

Not sure if this will help you but the triangles are perfectly aligned in Firefox 21.0(latest version). – bukka Jun 24 '13 at 16:31
They are not aligned in Firefox 21.0 for me (MAC) – Paul Radich Jun 24 '13 at 17:10
Probably not what your looking for but if you add margin-left:-1px to .d it will fix it – Paul Radich Jun 24 '13 at 17:14
@PaulRadich but wouldn't that mis-align them in other browsers? – fien Jun 25 '13 at 04:50
You would have to test that. I did not come across a browser where it was aligned. Only browser testing will answer that. – Paul Radich Jun 25 '13 at 12:57

CSS triangle up and down have different alignment in Firefox

0 Answers0