Solved

Browser Compatibility - table spacing

Posted on 2011-03-08
3
737 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

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

630 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