CODEWITHSUNDEEP
htmlfirefoxposition
Krish
Krish

Reputation: 2670

firefox position absolute inside a relative container issue

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.

enter image description here

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

The table structure is already given above.

Upvotes: 30

Views: 34769

Answers (5)

Andrea Romero
Andrea Romero

Reputation: 71

I solved the problem adding display: block; 

.table td div {
  position:absolute;
  display:block;
}

in your case:

<table>
<tr>
    <td>.....</td>
    <td>.....</td>
    <td style="position:relative;"> <!-- like this i set for all td in table -->
     <div style="position:absolute; display:block"> <!-- like this i set for all div in table -->
     <contents>
     </div>
   </td>
   <td>.....</td>
   <td>.....</td>
</tr>
</table>

Upvotes: 7

Ryan Walton
Ryan Walton

Reputation: 1127

I had a similar problem. I wrapped the problematic absolute div in an absolute div which fixed the issue:

    <div class="thumbnail" style="..position:relative;..">  
        <div style="position:absolute;">
        <div class="thumbnail-heart" style="..position:absolute;..">
            <img src="../image.png" style="float:right;position:relative;..">
            ...
        </div>
        </div>

Upvotes: 0

arttronics
arttronics

Reputation: 9955

I looked at the hoverplus jQuery plugin and the source file shows the method used:

// parent must be relatively positioned
this.parent().css({ position: 'relative' });

// pulsing element must be absolutely positioned
this.css({ position: 'absolute', top: 0, left: 0 });

Because of this plugin's requirements and your current design needs, I recommend using .transit() jQuery plugin that has powerful and easy to use Zoom features without such requirements.

I prepared two Table Examples, each with 9 Div's and as you can see by the markup, it can't be any easier!

jsFiddle DEMO of Zoomed Div's with Images in Tables

After you take a look at the jsFiddle I made for you, you can see all .transit() plugin features on the demo page HERE.

EDIT: The jsFiddle now has required CSS style for td tag of position:relative per your update.

Upvotes: 8

CSS Guy
CSS Guy

Reputation: 1984

you have to add 2 div in Table 1 with position:relative and 2nd with position:absolute

<td>
<div style="position:relative">
<div style="position:absolute">ddd</div>
</div>
</td>

your problem will be solved check fiddle

http://jsfiddle.net/rizwanabbasi/2hyE8/1/

Upvotes: 3

Mr Lister
Mr Lister

Reputation: 46619

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?

Upvotes: 42

Related Questions