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

Dev Shed Forums Sponsor:

March 12th, 2004, 08:46 PM

webmaster_frank

Registered User

Join Date: Mar 2004

Posts: 10

Time spent in forums: < 1 sec
Reputation 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>

March 12th, 2004, 09:09 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,688

Time spent in forums: 4 Weeks 7 h 3 m 59 sec
Reputation Power: 600

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 */

March 12th, 2004, 09:52 PM

webmaster_frank

Registered User

Join Date: Mar 2004

Posts: 10

Time spent in forums: < 1 sec
Reputation 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?

March 13th, 2004, 01:20 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,589

Time spent in forums: 1 Month 2 Days 17 h 41 m 41 sec
Reputation Power: 662

Quote:

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.

March 13th, 2004, 02:05 AM

webmaster_frank

Registered User

Join Date: Mar 2004

Posts: 10

Time spent in forums: < 1 sec
Reputation 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.

March 13th, 2004, 03:28 AM

webmaster_frank

Registered User

Join Date: Mar 2004

Posts: 10

Time spent in forums: < 1 sec
Reputation 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

March 13th, 2004, 11:32 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,589

Time spent in forums: 1 Month 2 Days 17 h 41 m 41 sec
Reputation Power: 662

Quote:

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

March 13th, 2004, 11:49 AM

webmaster_frank

Registered User

Join Date: Mar 2004

Posts: 10

Time spent in forums: < 1 sec
Reputation 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!

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: