Question

I’m developing a prototype responsive wordpress theme version of my homepage. I’m running into issues with the fader on the homepage.

http://dev.epicwebdesign.ca/epicblog/

When the image switches, it uses position:absolute to overlay the pictures, then goes back to position:relative.

I need to make the absolute be relative to the bottom left corner of the menu instead of the top left corner of #wrap so it doesn’t overlap.

I tried putting it in a container div like this: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Absolutely-positioned-box-inside-a-box-with-overflow:-auto-or-hidden but that doesn’t seem to work.

Any ideas?

There are major CSS compatibility issues in IE, try it in chrome. It should look similar to http://epicwebdesign.ca. When the browser window is shrunk horizontially, the whole theme compensates.

Answer 1

Your main content is floating upwards and so to fix this issue, I would expand both the navigation and content to 100% and float them left to keep them from overlapping.

For your element with id “navigation”, add a style of float:left.

Then, for your element with id “wrapper”, add a style of float:left and width:100%.

I only tested this in Firefox so you may have to tweak some other styles for it to work in all browsers correctly.