Link to home
Start Free TrialLog in
Avatar of rhandalthor
rhandalthorFlag for Russian Federation

asked on

Odd line on top div FF under OSX Only

Page example where green box shows odd line at the bottom in Firefox 4.x on OSX: http://www.workcycles.com/home-products/custom-special-bikes/monark-long-john-transport-bicycle
On the indicated page and several other pages where this green information box is with rounded corners div.greenBoxWBSmallDown gets a white line at the top. When padding:0; is commented out it disappears. This line only appears in firefox 3.6+ and not in Firefox 3.6+ on other operating systems. Only on my Mac using FF 3 or 4.
When there are no thumbnails the white line does not appear in the green information box. The link has a page with a main image and thumbnails. Do not know if this is significant, but decided to mention it.
How to remove the line without causing issues in Firefox on other OS and in all other browsers?

NB Bug report filed here https://bugzilla.mozilla.org/show_bug.cgi?id=655213 , but no replies had as of yet.
Avatar of manishkungwani
manishkungwani

Suggested practice is that you should write the attributes like padding, border, margin (including top, bottom, left, right), etc ... only when they have a NON-ZERO value, as different browsers on different OSs may interpret them in a slightly different manner.
And this definitely is Mozilla's failing.
I will suggest that you remove all attribs with Value=0, unless you want to override the attribute value from the CSS applied to it.
Avatar of rhandalthor

ASKER

@manishkungwani is there any online documentation on the interpretation of zero values?
I prefer and override as this only happens to these green boxes when thumbnails are present. How would I do a specific override for Firefox and or Firefox 4? Do hope that Firefox on other OS will still display things properly like they do at the moment...
There is no Documentation which records all the differences in rendering, rather it is observed and agreed upon by the community, but if the problem is specific to a BOX (es), then it might need a minor workaround.
Also, if you want to do a specific override on the properties for a particular browser/OS, you will need to detect that in JS or any other scripting language. Then apply a different CSS for the Browser/OS combination that you have made for the particular Browser/OS.
ASKER CERTIFIED SOLUTION
Avatar of rhandalthor
rhandalthor
Flag of Russian Federation image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
great. :)
Also, if any of my comments were helpful, could you please mark them so.
Thanks.
@rhandalthor i will suggest you use the Eric Meyer's reset CSS to avoid any such problems in the future.

http://meyerweb.com/eric/tools/css/reset/
Was able to find the solution myself. Added it to the Bugzilla report as well.