Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Position Absolute + float Right

    In the past it seems i have run into this issue a couple times. Here is the run down.

    I would like to have a cell when hover over it a layer (information box [div]) appears a little to the right and a little above the cell, the cells are not always the same size and the information box that hovers up is also not always the same size.

    In ie 7 there is no issue I can float and position the cell as I please, in Firefox I can only float the cell right if I use position "relative" this however creates a issue in every browser where the width of the cell is relative to the width of the information box.

    Below is a simple example of the issue, I broke it down for you all. Test it in IE7 and Firefox3

    <body style="margin:50px;">

    <table>
    <tr valign="top">
    <td style="height:300px; width:300px; background:#00FF00;">
    <div style="background:#FF0000; float:right; position: absolute; width:450px; margin-top:-30px;">float right + absolute</div>
    <div style="width:150px; height:30px; background:#CCFF00; float:left;">container div</div>
    <br />
    <br />
    <br />
    Full Cell</td>
    <td style="height:300px; width:300px; background:#00FF00;">
    <div style="background:#FF0000; float:right; position: relative; width:450px;">float right + relative</div>
    <div style="width:150px; height:30px; background:#CCFF00; float:left;">container div</div>
    <br />
    <br />
    <br />
    Full Cell</td>
    </tr>
    </table>

    </body>

    Any help is appreciated, thanks
    Joe

  • #2
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have removed the float right and i still have the desired effect in ie 7, firefox is still messed up...

    <body style="margin:50px;">

    <table>
    <tr valign="top">
    <td style="height:150px; background:#00FF00;">
    <div style="background:#FF0000; position:absolute; width:450px; margin-top:-30px;">absolute</div>
    <a href="#" style="width:150px; height:30px; background:#CCFF00; float:left;">container div</a></td>
    <td style="height:300px; background:#00FF00;">
    <div style="background:#FF0000; float:right; position: relative; width:450px;">float right + relative</div>
    <a href="#" style="width:150px; height:30px; background:#CCFF00; float:left;">container div</a></td>

    </tr>
    </table>

    </body>

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    As always, Firefox is right in your first instance. Positioning absolute removes the element from the normal flow. Floating it will have no effect since ap negates that. Relative positioning lets you position it relative to where it was floated. IE, as always, gets it wrong.

    IE has a lot of problems with floats. You should never refer to IE for how things should work.

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the advice, but im looking for a solution.

    here is the live example so you guys know what im talking about, because idont think you do at the moment.

    http://betonbabes.com/nfl-lines/parlay-error.htm


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •