Ajax Content with images behaving strangely

[planb]

1) Script Title: Ajax Tabs Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axtabscontent/

3) Describe problem: I have just about given up and feel like putting my fist through the screen..

I can't seem to make Ajax dislay content with images in the 'contentarea div'.

1. The script is applied as directed.
2. The external pages HTML structure is identical to the ones used in the DD Examples pages HTML.
3. Text seems to display in the content area, but not the pages that contain images.

Test Page

Any help would be appreciated.

Cheers.

--Carlos

[jscheuer1]

Don't use absolute positioning for your images.

[planb]

John, Thanks very much, that works.

I am still puzzled though, I initially thought that the 'content area DIV' itself should not be 'ABSOLUTE' positioned as the external page is an independent element, I didn't think that the content area will apply the styling of the external document.. Not that it will be difficult to do, all I have to do is style my external pages without absolute positioning, am I right..?

Thanks again mate, this nearly cost me my screen (or my head, one or the other).

[jscheuer1]

Right. If you really want to use absolute positioning in the external pages, you can but, you see the result. However, a relatively positioned container will act as a positioning agent for absolutely positioned elements so you should be able to do this:

.contentstyle{
border: 1px solid gray;
width: 450px;
margin-bottom: 1em; padding: 10px;
position:relative;
}

and then get a different result with external absolutely positioned items. However, absolute positioning requires no layout space so the container's borders will still be overflown, just differently than before. An interesting page could be designed with no bottom border to the container as long as there were plenty of room below it and no negative top values for the absolutely positioned items. You could even go so far as:

.contentstyle{
border: 1px solid gray;
width: 450px;
height:275px;
overflow:auto;
margin-bottom: 1em; padding: 10px;
position:relative;
}

to make your container scrollable as needed to revel overflown content.

I cannot guarantee these effects as they are untested by me with Ajax content but, it should work. It does work with non-Ajax content.