Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 367
  • Last Modified:

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.
0
rhandalthor
Asked:
rhandalthor
  • 5
  • 3
1 Solution
 
manishkungwaniCommented:
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.
0
 
rhandalthorAuthor Commented:
@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...
0
 
manishkungwaniCommented:
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.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
rhandalthorAuthor Commented:
table {
	border-spacing:0; /*Firefox 4 Mac OSX Greenbox bottom spacing fix */
}

Open in new window


helped. Firefox 4.x adds border-sapving:2px to all tables
0
 
manishkungwaniCommented:
great. :)
0
 
manishkungwaniCommented:
Also, if any of my comments were helpful, could you please mark them so.
Thanks.
0
 
manishkungwaniCommented:
@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/
0
 
rhandalthorAuthor Commented:
Was able to find the solution myself. Added it to the Bugzilla report as well.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now