Solved

html table movement

Posted on 2010-09-13
4
387 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
[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
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: 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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

728 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