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.
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.
Turns out I’m an idiot and was setting position:relative on the wrong element via the most annoying typo ever. (.rslider instead of .rslides)