I am trying to fix the test page I created. Ive gotten a few quotes from developers, but I was wondering if it's simple to do myself. All of the code on this page is from copied and pasted from templates, so Im sure I'm mucking things up.

what I'm trying to do is:
1 - find a way t get the 5 icons to be lower on the page
2 - get the iframe content to start below the icons, not UNDER them

Ive tried every manner of margin-height, top, etc etc code I can find and nothings working.

I need to mention that the CSS that this page is pulling from is within a Wordpress site.

anyone have any ideas? (ps.. someone suggested an "include" not an iframe.. but that didnt work at all.



I think you will find the problem is that some of your css is using "absolute" positioning. If you can instead use "relative" positioning, it should eliminate elements overlapping each other.

If you still have problems I will take a better look later.

Thanks for that. I'm a bit lost at this.. and cant find the CSS that is absolute. Ill keep digging. I didnt see it in the iframe code.. so it must be in the style.css code somewhere??

Ok, so what I recommend is getting something like firebug for firefox. It will make this type of debugging a lot easier. I had a little play with the site, and the problem I see is that your "header" div is not containing the 5 thumbnails.

So what I mean here is that whist, they are inside the div tag, they are not positioned within the boundaries (which is set to height: 214px look at style-header.css).

As an experiment I changed this height value, and as expected it shifted the content below this boundary.

does this get you further?