homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Unexpected border on triangle in FF4
border transparent

 5:00 pm on Dec 8, 2011 (gmt 0)

Any ideas why the following code (to draw a triangle with CSS) has an unexpected dark border along the hypotenuse in FF4 but not previous versions of FF or any of the other mainstream browsers?



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Triangle with unexpected border in FF4</title>

<body style="background-color: #FFFF99;">
<div style="width: 0px; height: 0px; border-bottom-width: 100px; border-bottom-style: solid; border-bottom-color: transparent; border-left-width: 350px; border-left-style: solid; border-left-color: #FFFFFF;"></div>




 7:03 pm on Dec 8, 2011 (gmt 0)

I'm unable to test FF4, but I appear to see a similar thing in FF8 (Vista). It looks like FF is attempting to anti-alias the jaggies?! And it is failing somewhat along the transparent edge. Whilst this seems to work OK on the light (yellow to white) side, on the other (white to yellow - transparent) side a dark line appears.

Looking more closely at a page of CSS shapes in FF8, that I did a while back, I see similar issues. Depending on the colour used it is more noticeable. With yellow it is very noticeable!

I'm guessing that earlier (than FF4) browsers did not attempt to anti-alias these diagonals?

One workaround appears to be to not use transparent, but explicitly specify the same colour as the background!


 10:06 am on Dec 9, 2011 (gmt 0)

Thanks penders.

I have a background image behind it so I can't really go that route.

However, it has since been pointed out to me that if you change the border-bottom-style to "dotted" it works ok.

It seems to work still in the other browsers. So, at the moment I have not come across any drawbacks.


 2:50 pm on Dec 9, 2011 (gmt 0)

Thanks for the update - yes, border-style:dotted seems to work pretty well.

(For anyone else trying the above example, it must be rendered in standards mode ie. with a valid DOCTYPE for it to render OK in IE.)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved