I have a navigation menu with alternating divs - one containing a menu link and the other a 'menu separator' div with a 2px wide 'separator bar' image. The width of the separator divs is set to 24px to create proper separations.
For some of the 'menu link' divs, I have implemented a regular hover dropdown using <\li>'s, etc. Using jQuery, I adjust the width of the <\li>'s in the dropdowns to match their parent div on the menu. Then, I add 24px along with left positioning to make it appear as if the dropdown borders are extending from the separator bars.
While everything works fine in Firefox, issues arise in Chrome and IE. Depending on the content of the main 'menu link' div, the dropdown may be misaligned by either one pixel or more in these browsers. In FF, the alignment is consistently correct regardless of the content in the menu link div. It seems like the discrepancy might be due to how different browsers render characters or handle jQuery's calculations for widths differently.
If anyone has suggestions on why this inconsistency occurs or how to fix it, I would greatly appreciate the input. Unfortunately, my code is not yet live on the Web, making it challenging to provide concrete examples at the moment...
Edit: For an example showcasing the browser discrepancies and the impact of different content, refer to: http://jsfiddle.net/jaslfpihdaddle/aFAF9/7/. Hoping someone can point out any oversights and offer an easy solution! ;)