Solved

Browser Compatibility - table spacing

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Can't get js code to execute 8 32
Text color and background in a text box. 2 25
[Bootstrap] Navigation Bar Collapse 27 38
Check input text, Number 6 31
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
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 +…

749 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