Solved

html table movement

Posted on 2010-09-13
4
380 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 43

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

713 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