[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 392
  • Last Modified:

html table movement

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
colinspurs
Asked:
colinspurs
  • 2
2 Solutions
 
s8webCommented:
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
 
colinspursAuthor Commented:
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
 
Chris StanyonCommented:
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
 
colinspursAuthor Commented:
Chris, you're a genius. No, wizard...errr...guru?!!

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

Featured Post

Independent Software Vendors: 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!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now