Solved

Browser Compatibility - table spacing

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 5 42
Html5 Index on a table 7 25
CSS: Making responsive table look nicer 7 23
How to show span when clicked on? 10 19
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.
Find out what you should include to make the best professional email signature for your organization.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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.

813 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