i am using table for displaying my dynamically generated data depend upon the user input the html structure is looks like below:
<table> <tr> <td>.....</td> <td>.....</td> <td style="position:relative;"> //like this i set for all td in table <div style="position:absolute">//like this i set for all div in table <contents> </div> </td> <td>.....</td> <td>.....</td> </tr> </table>
Here the div is goes to top corner of the body.all these above styles are applied throght the javascript and its working fine in chrome,IE,but not in FF like the image below.
if we change the position of the div to absolute to relative it will align correctly but i am make a hover effect while the user hover the div's for that the positions are important and this issue happens only in firefox
for your very quick reference check out the jquery http://www.malsup.com/jquery/hoverpulse/
i need like this have to be implemented inside the table in FIREFOX which means
Each images placed inside a td//<td style="position:relative;">
if the user hover on a td the image should pulse(Zooming effect).
The table structure is already given above.
Fixed. The fixed value is similar to absolute as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling.
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Position Absolute: When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
Positioning of table cells is problematic. The usual solution is to leave the style of the td
alone, and put a div
in it which you make position:relative
. Then place the content inside that div.
<td> <!-- no style at all --> <div style="position:relative;"> <div style="position:absolute"> <!-- original div --> <contents> </div> </div> </td>
Edit:
I don't know which effect you're after, but here's a jsFiddle demonstrating the problem: http://jsfiddle.net/ygP7k/5/
It has a table with little absolutely positioned divs in each table cell, that are supposed to align to the bottom right corners. It works in all browsers except Mozilla ones.
But here is an updated one with the extra divs as I mentioned: http://jsfiddle.net/ygP7k/7/
This works exactly the same, except that it also does the trick in Firefox.
Can you work with this? Does this answer your question?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With