View Full Version : Resolved Border Bottom 2 pixels shorter in FF than IE

Feb 9th, 2010, 08:15 PM
If I view the following code in FF and IE, there is a major difference

<div style="position:absolute; width:200px;">
<div style="border:green solid 1px; border-bottom: blue solid 1px;border-right:transparent solid 1px;">one</div>
<div style="border-right: red solid 1px;">two</div>

The blue bottom border of the top div and the red right border of the bottom div do NOT join/intersect in FF but they do in IE. It first appeared to me as though FF was not drawing the furthest pixel to the right and furthest pixel to the left of the bottom border; making it 2 pixels shorter than it ought to be.

It took me quite a while to discover that by setting the right border of the top div to transparent, FF "overlapped" the transparent border on top of the furthest right pixel of the bottom border, turning it the same color as the background, effectively erasing that pixel of the bottom border. In my opinion, IE is correct and FF is wrong, but thankfully it is easy to make the two borders intersect by simply not specifying the top div's right border as anything, or setting it to "none".

Note, that this is not a problem if your border is larger than 1px width, as both browsers intersect the borders at a 45 degree angle at the corners, just like a frame should.

I hope this helps some other poor soul from spending as much time as me to solve this difference between browsers. I was unable to find anything with my google searches, but maybe this answer will get out there!