[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

html table movement

Posted on 2010-09-13
4
Medium Priority
?
391 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 400 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 44

Accepted Solution

by:
Chris Stanyon earned 1600 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

Industry Leaders: 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!

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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 rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

656 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