Solved

Browser Compatibility - table spacing

Posted on 2011-03-08
3
728 Views
Last Modified: 2012-06-27

I have been developing a carousel function for my website www.dealclick.co.uk which uses jQuery to rotate between products.

I have been developing this on a Mac, using FireFox to get it as I visually wanted it to look, as in the image below:

 Working fine in FireFox
However when I look at the same url (www.dealclick.co.uk) in Safari or Chrome (I haven't even got to IE) the spacing seems off, it seems the TD height, which should be 50px goes to 51px in Chrome, this maybe because the height is set to 50px, with a 1px border, but in FF this still keeps to 50px in total, but in Chrome the border doesnt seem to be inclusive of height:

 Not working so well in Chrome
Any ideas how to work around this?

Cheers
0
Comment
Question by:dealclickcouk
  • 2
3 Comments
 
LVL 17

Expert Comment

by:Shinesh Premrajan
ID: 35067199
border-bottom: 1px solid

You need to disable this code  in all the "#option*" CSS tags, place

border :0px;

for all these tags.

Hope this helps
0
 

Accepted Solution

by:
dealclickcouk earned 0 total points
ID: 35067883

OK, I found a work around: basically as FireFox counts the borders in the height, where as Chrome etc don't so the actual content height in FF was 49px, as there was a 1px top border Chrome et al saw the content height as 50px, so the overall height was 51px.

To work around this I put a div in the TD with a height set to 50px, has no effect in Chrome etc as already thinks its 50px, but within FF it pushes it out to 50px, so now all browser look the same.

Thanks anyway
0
 

Author Closing Comment

by:dealclickcouk
ID: 35120546
because I found the solution before any other providers did!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now