#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    10
    Rep Power
    0

    Help - Problem with CSS when nesting absolute positioned elements in mozilla


    Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Span test</title>
    <style TYPE="text/css">

    .submenu {
    background-color: #FFFFFF;
    color: #D4BA6B;
    border-top: 0px solid #000000;
    border-left: 0px solid #000000;
    border-right: 0px solid #000000;
    border-bottom: 0px solid #000000;
    position: absolute;
    margin: 0px;
    padding: 0px;
    min-width: 100px;
    visibility: visible;
    z-index: 1;
    }


    .submenuItem {
    background-color: #FFFFFF;
    color: #000000;
    border-left: 2px solid #ff0000;
    border-right: 2px solid #ff0000;
    border-bottom: 2px solid #ff0000;
    border-top: 2px solid #ff0000;
    font-family: "arial narrow", arial, verdana, sans-serif;
    font-weight: normal;
    font-size: 12pt;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 5px;
    padding-left: 5px;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    cursor: hand;
    }


    </style>
    <SCRIPT LANGUAGE="javascript">
    function getWidth() {
    oSpan = document.getElementById("testSpan");
    iWidth1 = oSpan.offsetWidth;
    alert ("Width1 = " + iWidth1);
    }
    </SCRIPT>
    </head>
    <body onload="getWidth()">
    <div class="submenu">
    <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span>
    </div>
    </body>
    </html>
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    if you change the divs position from absolute to relative.
    it works,
    it aslo works if you set a width to the div, like width:100%;

    the problems occure because of the position:aboslute takes the element out of the normal flow,
    the span's style is confined to the min-width of the div.



    btw, you can use the shorthand version border: applies to whole box
    border:2px solid #ff0000;

    same with padding/margin :
    padding: 2px 5px; /* top&bottom left&right */
    padding: 2px 5px 2px; /* top left&right bottom */
    padding: 2px 5px 2px 5px; /* top right bottom left */
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    10
    Rep Power
    0

    Thanks for reply


    Thank you for the reply, Akh.

    Unfortunately, in my real application, I need the absolutely positioned elements and I just want to have the sizing automatically adapted to the text content. Note how in the original page, the text extends outside the bounds of the span element in the Mozilla browser (IE adapts correctly). Even if the absolute positioning takes the element out of the normal flow, shouldn't the size of the element be a function of its contents? Is this a bug in the Mozilla browser, or am I doing something wrong in the CSS coding?
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    the text extends outside the bounds of the span element in the Mozilla browser (IE adapts correctly).
    Actually, Mozilla et al. renders correctly. IE improperly extends the container to cover the overflow. Look at this example in Mozilla for the correct rendering and then in IE for the incorrect. IE's misunderstanding of CSS positioning can cause some nasty surprises.

    It is unusual for an inline element such as span to be made position:absolute. Perhaps if you would tell us what you are trying to accomplish, rather than how you want to do it, an alternate approach might be found. More often than not, if a method seems to be creating new problems, it's not the best method.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    10
    Rep Power
    0
    kk5st

    Thank you for the example that shows that IE expands a container beyond the css specification to accomodate the contents of that container.

    With the Mozilla browser, if I leave the width out of the outer div, then the inner span width shrinks even more. If I make either the outer div or inner span relative positioned, they appear to adjust to the content text properly. Unfortunately, in the application I have to position each of these elements to get the layout that I desire. I am using javascript to do the positioning, but I need the browser to set the element widths.

    What I am doing is building a menu system. I have nested menus. The div represents one of the menus, and there are several spans with individual menu items on that menu. Each of the spans is aligned by the javascript, and they are all set at a width that equals the largest of the individual spans. However, because the span widths are not being set to contain the text in the Mozilla browser, the menu doesn't work properly. I've tried setting the width to "auto" in the css, hoping that the "auto" setting would allow the div and span widths to be controlled by the text, but that didn't work either. I'm at a loss as to why the problem occurs and why changing the positioning for either element alters the behavior to adjust to the text length.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    10
    Rep Power
    0

    Another test


    Here is another simple test page that demonstrates that only when the span is contained in an absolutely positioned div does it not adjust to its content. The behavior seems strange
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    Originally Posted by webmaster_frank
    Here is another simple test page that demonstrates that only when the span is contained in an absolutely positioned div does it not adjust to its content. The behavior seems strange
    You forgot to include the example I agree the behavior seems strange, but if what you're doing doesn't work, stop doing it.

    The question I have is why would you use spans? The semantically and structurally correct element would be a list. The list is a block element and sizable, positionable and any other -able you're looking for.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    10
    Rep Power
    0
    Sorry that the sample page didn't appear in my last post. It was getting late and my brain must have been fried.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <title>Span test</title>
    
    </head>
    <body>
    <span STYLE="position: absolute; border:2px solid #FF0000; top:0px; left:0px;">This is a span that is absolutely positioned.</span><br>
    <div STYLE="position: absolute; border:2px solid #0000FF; top:100px; left:10px;">This is a div that is absolutely positioned.</div>
    <div STYLE="position: absolute; border:2px solid #0000FF; top:200px; left:20px;"><span STYLE="position: relative; border:2px solid #FF0000;">This is a relatively positioned span in an absolutely positioned div.</span></div>
    <div style="position: relative; border: 2px solid #0000ff; top:300px; left:30px;"><span STYLE="position: absolute; border: 2px solid #FF0000;">This is an absolutely positioned span in a relatively positioned div.</span></div>
    <div STYLE="position: absolute; border:2px solid #0000FF; top:400px; left:40px;"><span STYLE="position: absolute; border: 2px solid #FF0000;">This is an absolutely positioned span in an absolutely positioned div.</span>
    </div>
    </body>
    </html>
    Thanks for your help!

IMN logo majestic logo threadwatch logo seochat tools logo