Msg#: 4530041 posted 9:40 pm on Dec 20, 2012 (gmt 0)
I have a drop down nav bar that uses the following format.
<ul> <li><a>Main Nav Item</a> <div>label for the drop down div</div> <div> //opens the drop down div <ul> <li>sub nav item 1</li> <li>sub nav item 2</li> </ul> </div> </li> </ul>
Everything is controlled by CSS and works great on PCs in IE, FF, and Chrome. It works in Safari on Mac. The issue is with FF on a Mac. The drop down div moves about 2px left with each main nav item you move to the right. In other words, the first main nav item from the left, the div is fine. The next main nav item (moving ->) and the next div shows up 2px further to the left (<-) than it should be.
I strongly suspect it has to do with how FF renders divs that use absolute positioning but I'd like your thoughts. I can post the code if necessary.
Msg#: 4530041 posted 3:12 pm on Dec 22, 2012 (gmt 0)
I figured out a solution.
The issue is with how FF renders <div> on different platforms. I ended up using: -mos-margin-start and -moz-margin-end (effectively margin-left and margin-right) to control the div.
Gotchas: The PC version didn't need the margin controls so I used a browser & platform sniffer to implement an Apple only style sheet.
And of course this didn't work 100% on the Mac platform either. While I was able to stop the incremental change in FF, the difference between Macbook Pros with the exact OS and FF version rendered the div 1px off. We'll live with this one as I think the value of trying to accommodate FF has reached it's limit. Our traffic for FF on a Mac is about 2.4% and this minor difference between Macs isn't worth chasing.