Member Avatar for groundfresh

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.
http://www.kidcricket.com/store_monkeytoes2.php

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.

thanks,

James

  • 2 Contributors
  • 3 Replies
  • 89 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by sillyboy

Dani AI

Generated

— building on the troubleshooting already happening with , here are a few focused fixes you can apply right away that do not require major template surgery.

First quick check: confirm the iframe HTML appears after the icon container in the document flow. If the iframe element is inside the same wrapper as the icons, move it so it follows that wrapper. A minimal structure that avoids overlap looks like this:

<div class="icon-row"> ...icons... </div>

<iframe src="your-page.html" id="store-frame"></iframe>

If the icons are floated (common in small thumbnail layouts) the wrapper can collapse and let the iframe slide up underneath. Two non-destructive fixes: give the wrapper a clearfix or make it establish a block formatting context. Either of these will expand the wrapper to contain its children.

/* clearfix */
.icon-row::after {
  content: "";
  display: table;
  clear: both;
}

/* alternative: establish a BFC */
.icon-row { overflow: auto; }
/* or modern: */
.icon-row { display: flow-root; }

Finally, force the iframe itself to clear floats so it always starts below floated content:

#store-frame { display: block; clear: both; margin-top: 18px; }

A couple of quick troubleshooting tips: use the browser inspector to view the computed box model (margins/height/position) for the icon wrapper and the iframe, toggle rules on and off to see immediate effect, and keep a backup of the theme CSS before saving changes. For background reading on clearfix and flow-root, see the clearfix pattern and the CSS display docs: Clearfix and . These approaches solve most cases where icons overlap an iframe without rewriting the template.

Recommended Answers

All 3 Replies

Member Avatar for sillyboy

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.

Member Avatar for groundfresh

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??

Member Avatar for sillyboy

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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.