SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem in IE with an inline search results list

    Hello

    I'm doing something like Facebook quick search, you type in and a results list appear below the text field.

    I have a created a DIV to contain the results, this div has a position:absolute; so that it floats above everything. Now this works perfectly in Firefox, but when trying it in IE, the div is appear to the right of the text field instead of below it.

    How to work it around?
    Thank you

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Code? Who did you set as the nearest positioned ancestor? Do you even have one?

  3. #3
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Who did you set as the nearest positioned ancestor? Do you even have one?
    Do you mean top and left?

    CSS
    Code:
    .div_search {
    	width: 150px;
    	border: 1px solid #000000;
    	position:absolute;
    }
    In action

    Code:
    <tr><td><input type='text' name='myName'> <div class='div_search' style='display:none'></div></td></tr>
    The display is set to none, then later changed using jQuery .show() or .slideDown() when data is available to be added..

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have set the div to absolute position, but not told the browser where to position it absolutely - set the x and y coordinates.

    Looking at your html snippet, why is this in a table?

  5. #5
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have set the div to absolute position, but not told the browser where to position it absolutely - set the x and y coordinates.
    Well mine isn't exactly like Facebook's, I meant the idea is the same.. but it wont be placed at the same place, and it is available in different pages, at different positions, some at the top some in the middle of the page some on the left others on the right, it depends, this is why i couldn't use top and left because it doesn't have a global fixed location.

    Looking at your html snippet, why is this in a table?
    Because it a part of a table, it is usually a row in some table..

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have to set a global location. The div(s) will be positioned relative to some parent element (for instance the table cell), so give that parent element relative position and the div can have x & y coordinates defined - otherwise the browser has to guess where it is to go.

  7. #7
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have to set a global location. The div(s) will be positioned relative to some parent element (for instance the table cell), so give that parent element relative position and the div can have x & y coordinates defined - otherwise the browser has to guess where it is to go.
    Your suggestion works fine.
    The only problem i'm facing is that the div is appearing below the content in the next table row, and i tried to higher the z-index, but nothing happened.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Could you post the code? Is the <td> (I assume) that holds the div positinoed also with a z-index?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you post the code? Is the <td> (I assume) that holds the div positinoed also with a z-index?
    No the td does not have a z-index.
    The code is the same posted above.. however the css class now has top and left values, and the td has a position:relative;

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ok the div has
    Code:
    .div_search {
    	width: 150px;
    	border: 1px solid #000000;
    	position:absolute;
    top:0;left:0;
    }
    A link to the live site would be veryyy helpful!!!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .div_search {
    	width: 150px;
    	border: 1px solid #000000;
    	position:absolute;
            top:30px;
            left:1px;
    }
    Code:
    <tr><td style="position: relative;"><input type='text' name='myName'> <div class='div_search' style='display:none'></div></td></tr>
    <tr><td style="position: relative;"><input type='text' name='myName2'> <div class='div_search' style='display:none'></div></td></tr>
    <tr><td style="position: relative;"><input type='text' name='myName3'> <div class='div_search' style='display:none'></div></td></tr>
    The site is not online, it is only local host...

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!doctype html>
    <html>
    <head>
    <title>sexy</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .div_search{position:absolute;
    top:23px;
    left:0;
    height:40px;
    width:150px;
    background:blue;
    }
    </style>
    </head>
    <body
    <table>
    <tr><td style="position: relative;"><input type='text' style="position:relative;" name='myName'> <div class='div_search'></div></td></tr>
    </table>
    
    </body>
    </html>
    Working just fine for me over here...some slight vertical alignment issues but that's no big deal.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you try with the multiple rows as I posted in my previous post...

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!doctype html>
    <html>
    <head>
    <title>sexy</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .div_search{position:absolute;
    top:23px;
    left:0;
    height:40px;
    width:150px;
    background:blue;
    }
    </style>
    </head>
    <body
    <table>
    <tr><td style="position: relative;"><input type='text' style="position:relative;" name='myName'> <div class='div_search'></div></td></tr><br />
    <tr><td style="position: relative;"><input type='text' style="position:relative;" name='myName'> <div class='div_search'></div></td></tr><br />
    <tr><td style="position: relative;"><input type='text' style="position:relative;" name='myName'> <div class='div_search'></div></td></tr><br />
    </table>
    
    </body>
    </html>
    I had to insert <br /> to get it on the next line. All 3 rows appeared on the same line for somem reason. Still now?..(if this isn't waht you are seeing try adding position:relative;z-index:0; to the input and then add a z-index to the div.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Already tried adding z-index to the td but still the same issue.
    No I'm not having the problem which you have encountered.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zeez View Post
    Your suggestion works fine.
    The only problem i'm facing is that the div is appearing below the content in the next table row, and i tried to higher the z-index, but nothing happened.
    You would need to use a descending z-index for IE on each subsequent row. You can't set the td to position:relative because most browsers ignore that anyway. You would need to nest an inner element.

    Something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .div_search {
        width: 150px;
        border: 1px solid #000000;
        position:absolute;
        top:15px;
        left:5px;
        z-index:99;
        background:red;
    }
    </style>
    </head>
    <body>
    <table>
        <tr>
            <td><div style="position: relative;z-index:10">
                    <input type='text' name='myName'>
                    <div class='div_search'>testing 1</div>
                </div></td>
        </tr>
        <tr>
            <td><div style="position: relative;z-index:9">
                    <input type='text' name='myName2'>
                    <div class='div_search'>testing 2</div>
                </div></td>
        </tr>
        <tr>
            <td><div style="position: relative;z-index:8">
                    <input type='text' name='myName3'>
                    <div class='div_search'>testing 3</div>
                </div></td>
        </tr>
    </table>
    </body>
    </html>
    Using absolute positioning from within a table has always been a bone of contention as the specs aren't clearly defined. Positioning within the same cell is no problem but tying to position outside of the current cell will always cause problems in various browsers.

  17. #17
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn, that's a rule of thumb!
    this wont work for me for one important reason, by default i'm planning to give users 2 input rows, from which they will search for files to be moved, then select them. However, i want to the give them the option to add more inputs inline (using js), so there will be more rows, and I can't use the method above if there is no specific set of row.

  18. #18
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I thought the "browsers" who didn't support that was just one group: Gecko-based.

    They say, "the specs are undefined" and then choose to let that mean, don't let regular positioning work in tables like it can in every other freakin' element in existence like in every other browser in existence. : (

    See, proof that "designers" are not writing the CSS specs, not at all. I have a few pages where FireFox users simply miss out on stuff because of this "bug", while users of every other browser get nice tooltips etc. We're so used to doing this to IE users, so I guess the Mozilla fanboys get to have it slapped back in their faces, huh?

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Somme
    I thought the "browsers" who didn't support that was just one group: Gecko-based.
    Safari and Opera ignore position:relative on table cells also.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    td div {
    width: 150px;
    border: 1px solid #000;
    position:absolute;
    top:45px;
    left:5px;
    z-index:99;
    background:red;
    }
    </style>
    </head>
    <body>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <table>
    <tr>
    <td style="position: relative;z-index:10;background:blue"><div> testing </div>
    xxxx</td>
    </tr>
    </table>
    </body>
    </html>
    Visual formatting 9.3.1:
    Quote Originally Posted by w3c
    The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

    this wont work for me for one important reason, by default i'm planning to give users 2 input rows, from which they will search for files to be moved, then select them. However, i want to the give them the option to add more inputs inline (using js), so there will be more rows, and I can't use the method above if there is no specific set of row.
    Maybe a css layout solution would work better in this case if your data is not too complicated.

    Alternatively if your original was only breaking in IE the you could use margins to drag the element down/back under the text field rather than using top and left (assuming that IE was consistent with its mis-position. You could just use conditional comments to offer the alternative code.

    Note that IE's auto placement of absolute elements is affected by whether the text alignment of the parent is anything other than text-align:left. If you have text-align:right or text-align:center on a parent then the absolute element is shifted in that direction also.

  20. #20
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for drawing my attention to the margins, do you recommend removing the position relative of the td and then adding a negative left margin for the div to force moving it to the left instead?

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    do you recommend removing the position relative of the td and then adding a negative left margin for the div to force moving it to the left instead?

    Yes if the mis-position in Ie was always consistent then remove the position;relative from the td and use some Conditional comments to just target IE. You can use a negative left margin to drag the element to where you need it to be (and top margin if required). The element will still

    It may be a case of try it and see but you don't seem to have many options here I'm afraid.

  22. #22
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off-topic:
    Paul, I was referring to this "bug" which though listed, is only considered a bug by web developers (not Mozilla). Example 1, display: table, mozilla only and a table based on a page I had been trying to build.

    I don't think any of the browsers I tested could deal with a tr or a td being the positioned parent, but the Gecko issue is, anyone with display of table (including of course tables), positioning rules out the window. Which is frustrating. : (

    Since the OP was asking to make these inputs relative to the tr's or the td's either way, I was going too off-topic. I agree with the use of another element inside to hold the positioning; it has worked well before.

    So long as the inputs remain text, IE can be accomodated this way, but if later on anything like checkboxes, radio buttons, or select dropdowns get added, then IE6 will have trouble again by letting those elements always have an impossibly high z-index. I ended up using CSS hacks (you could use IE conditional comments) to place the positioned elements somewhere else, out of the way of these high elements.

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Paul, I was referring to this "bug" which though listed, is only considered a bug by web developers (not Mozilla). Example 1, display: table, mozilla only and a table based on a page I had been trying to build.
    Yes I've run into that issue before and ended up using another wrapper to accommodate the positioning.

    but if later on anything like checkboxes, radio buttons, or select dropdowns get
    That will always be a problem in IE6 and under and although windowed elements can be stacked with other windowed elements they can't exist on the same plane as windowless elements unless you use the iframe shim techniques. I have the iframe shim coded into some of my drop down menus to avoid this issue.

    Nothing is ever as simple as it should be

  24. #24
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I was unhappy to discover that while IE7 doesn't have the problem with the input types, it DOES act the same way when you have multiple fieldsets. The following-in-source fieldset also seems to be in the "new" page : (


Bookmarks

Posting Permissions

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