Solved

html table movement

Posted on 2010-09-13
4
373 Views
Last Modified: 2012-05-10
Hi experts,

Please see http://www.fobgfc.org/upcoming_new_design2.php

I have used a jquery tooltip, and got around the IE / z-index bug also through jquery (upcoming_z.js, attached).

Thing is, when I hover over the fixtures, the table cells seem to re-align themselves somehow.  Is there any way I can stop this?

Thanks,  
Colin upcoming-z.js
0
Comment
Question by:colinspurs
  • 2
4 Comments
 
LVL 16

Assisted Solution

by:s8web
s8web earned 100 total points
ID: 33665549
I think it might be because of all the Comic Sans :) J/k -

You have an unclosed tr tag on line 336. If that's not the problem, try setting a specific width to the td tag in your css. Something like:

#container3 table tr td{width:10%;}
0
 
LVL 3

Author Comment

by:colinspurs
ID: 33666789
CS not your cup of tea? :)

Thanks for:
  • analysing the problem
  • pointing out the missing </tr>
  • not reminding me to validate before I post
Interesting.  I made it 5% to ensure the markup was accepting it, with the intention to change to 10% or 11%.  5% seems to have the same effect as 10%.  

Results:
  • FF 3.6.9:  No discernible change.
  • IE8 (with or without compatibility view):  Columns all same width, wherever cursor goes; column headings centered (side effect!)
With both browsers, white space in table cell text is treated differently after "de-hover".  Eg when page is first loaded, I get (25 Sept, 1st XI)...

Forest Hill
Park
(H)

With hover, it stays unchanged, until I move the cursor away, then...

Forest Hill
Park(H)

I think that's the underlying problem...now how to fix it?






   
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 400 total points
ID: 33667624
Hi Colin,

It's actually nothing to do with your CSS. It's your HTML and Javascript. Your Javascript injects a DIV into each of your .tooltip span's and when you de-hover, it removes it using $(this).children().remove();

The problem is that remove() removes all children from your .tooltip span, and this includes the <br>'s you're using for line breaks.

So before you hover, your text looks like:
Forest Hill Park<br>(H)<br>
and after you de-hover, and the children are removed it looks like

Forest Hill Park (H)
which is why the (H) moves up alongside Park - there's no longer a line break.

You can specify a selector with remove() to target only specific items for removal. You know you're adding a div with a class of "toolTipWrapper", so it makes sense to only remove a div with a class of toolTipWrapper.

In your upcoming_z.js file, about line 48, change the remove line to include the selector.

$(this).children().remove('div.toolTipWrapper');
I don't have jQuery to test this, but that's the general idea.







0
 
LVL 3

Author Comment

by:colinspurs
ID: 33670525
Chris, you're a genius. No, wizard...errr...guru?!!

Yup that nailed it.  My first jquery venture, you'd never guess.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

746 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

8 Experts available now in Live!

Get 1:1 Help Now