span not stretching in Opera

[bigcheez]

A span with a background image is not stretching in Opera as it does in other browsers.The span is positioned absolute inside a div and only the top and bottom properties are set, not height.Doing this fills in extra space as expected, except in Opera.Checking it out with dragonfly it shows the computed top and bottom correctly.But it also shows a height of 30px, the height of the background image.How can I get this span with background image to stretch to fill the empty space?If more info is needed, I can copy the code to the fourm.A lot of the page involves php so it might be best viewed online.Also because this seems to be a browser issue, simply posting code might not be best.>> CLICK HERE TO VIEW PAGE IN QUESTION <<

[jeffman]

There are a bunch of spans on that page. Which one is broken? Does it have an ID or something?

[bigcheez]

There are a bunch of spans on that page. Which one is broken? Does it have an ID or something?

#fillerit is nested under the div #navbarwitch is nested under the div #wrapperbtw ... if you are able to view the page with Opera / Dragonfly, the gap is obvious

[jeffman]

What's really weird, when I inspect the DOM using Opera's developer tools, BOOM! the span fills up.I really don't know what's happening.But I will say that you could eliminate the problem if you structure this page in a more sensible way. Spacers, line breaks, non-displaying elements (?), and absolute positioning are not the way to lay things out. It looks like you've taken a lot of trouble to do something that can be accomplished with half the elements and no special positioning at all.Except for the corner, that navbar should be as simple as one container div and then a bunch of child divs, one for each link/graphic. #navbar should have the background gradient repeating vertically from top to bottom. The child divs (with the sprite backgrounds) would be positioned with top and bottom margins. You wouldn't need much else.

[bigcheez]

What's really weird, when I inspect the DOM using Opera's developer tools, BOOM! the span fills up.

If you update to the latest ver of Opera, the div shows up right away but does not grow beyond 30px, the height of the background image.

But I will say that you could eliminate the problem if you structure this page in a more sensible way. Spacers, line breaks, non-displaying elements (?), and absolute positioning are not the way to lay things out. It looks like you've taken a lot of trouble to do something that can be accomplished with half the elements and no special positioning at all.

I had a feeling I would be catching flack for my unconventional layout. I was attempting to create a page that would turn into a low-bandwidth text only page just by pulling the stylesheet. Load it in a browser and turn off stylesheets and you'll see what I mean. Don't get caught up on the name 'spacer', it's just what I called that block to fill in blank space with a background image. Everything should work fine because it follows all the rules even if it does not follow the convention. It looks like this 'extra stuff' brings out the quirks/bugs of some browsers. I am thinking instead of using the 'extra stuff' I will have to do more work with php to render a low-bandwith page with the same content.

Except for the corner, that navbar should be as simple as one container div and then a bunch of child divs, one for each link/graphic. #navbar should have the background gradient repeating vertically from top to bottom. The child divs (with the sprite backgrounds) would be positioned with top and bottom margins. You wouldn't need much else.

The #navbar is one container div with a bunch of, uh not divs, but spans. The background gradient could run behind the buttons but wouldn't be able to run all the way to the bottom. The gradient fades to transparent on the left edge and would look awkward at the bottom where a separate image caps it off.

[bigcheez]

Thinking about the 'extra stuff' comment in our conversation, I decided to set up a stripped down test page.I made this page very basic with an internal stylesheet only and a few rules to demonstrate this quirk in Opera.It seems Opera is computing the dimensions as if the divs had no text in them.Check out the #stretch div at http://bobbysshoestore.com/test_opera.html

[jeffman]

It seems that in one context, Opera computes the height of #leftside as 100% the height of its container. In the context of #stretch, it computes the height of #leftside as the min-height value, and this is the value used for computing the height of #stretch.Perhaps it is having problems understanding how to compute values when several absolutely-positioned elements are nested. This is probably a new experience for many people, since it's the kind of structure most of us would rarely use. I also suspect that because of market share, many of us only test in Opera as an afterthought. (jsg notwithstanding.)I understand your interest in having a low-bandwidth version. Since the real bandwidth gobbler is your images, maybe the overall structure could remain the same in both versions, and the only difference would be that the images would not be included, rather than wiping out all the CSS.