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

FF v17 on a Mac
issues with div sizes and absolute positioning

 9:40 pm on Dec 20, 2012 (gmt 0)

I have a drop down nav bar that uses the following format.

<li><a>Main Nav Item</a>
<div>label for the drop down div</div>
<div> //opens the drop down div
<li>sub nav item 1</li>
<li>sub nav item 2</li>

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.



 6:29 pm on Dec 21, 2012 (gmt 0)

Posting the markup is always necessary.


 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.

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.

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