Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Browser Compatibility - table spacing

Posted on 2011-03-08
3
Medium Priority
?
743 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: 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!

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

670 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