Skip navigation
jnwbr
jnwbr
Currently Being Moderated

Linked gif in DIV w/ Flash

Jul 30, 2012 1:14 PM

I have a DIV with a placed Flash instance. Underneath that instance I want a small gif file to contain a link. This setup worked fine when the layout was in tables. Converting to DIVs the link is not recognized (doesn't show as clickable) If I place it anywhere else on the page is works as it should. If I take the Flash instance out of the DIV, it works. So what is causing the link not to work with Flash in the DIV and what can I do to solve the issue?

 

Thanks.

562 Views   9 Replies   Latest reply: Nancy O., Jul 30, 2012 3:11 PM
 
Replies
  • John Waller
    Currently Being Moderated
    1. John Waller,
    Jul 30, 2012 1:20 PM   in reply to jnwbr
    Report

    Please post a link to the problem page so we can take a look in our browsers,

     
    |
    Mark as:
  • Jon Fritz II
    Currently Being Moderated
    2. Jon Fritz II,
    Jul 30, 2012 1:26 PM   in reply to John Waller
    Report

    I'm guessing some CSS z-index work may help or maybe some fixed pixel sizes for the divs. You probably have the larger div overlapping the link in one way or another.

     

    A link would be very beneficial, even to a temporary page.

     
    |
    Mark as:
  • jnwbr
    Currently Being Moderated
    3. jnwbr,
    Jul 30, 2012 2:06 PM   in reply to Jon Fritz II
    Report

    OK, here's a link. The litle orange box w/ arrow is what I want to have a link. Interestingly I created a version of the page without anything but the Flash and the gif file and the link worked! So there's something else on the page I'm posting that must be interfering.

    I think.

     

    http://goo.gl/IM6GN

     
    |
    Mark as:
  • Jon Fritz II
    Currently Being Moderated
    4. Jon Fritz II,
    Jul 30, 2012 2:13 PM   in reply to jnwbr
    Report

    The footer div is overlapping the section5flash div

     

    It's inheriting a padding-top:100px. If you set the padding-top to something much smaller in the footer css, it should fix it.

     

    EDIT: OOps, it's stacking the padding-top from the copyright and footer definitions

     
    |
    Mark as:
  • jnwbr
    Currently Being Moderated
    5. jnwbr,
    Jul 30, 2012 2:24 PM   in reply to Jon Fritz II
    Report

    OK, found it. The copyright class had a 100 padding. I tried to use that before I gave padding to the Footer. I'm still confused on when the class of something in a DIV takes presidence over doing the same thing with the DIV. For instance sometimes padding has no effect on an element but adding it to the DIV does. In this case padding to the copyright didn't move it at all, but adding padding to the DIV moved it down (then I took that amount out of the DIV height).

     

    Thanks a lot for the help!

     
    |
    Mark as:
  • Jon Fritz II
    Currently Being Moderated
    6. Jon Fritz II,
    Jul 30, 2012 2:46 PM   in reply to jnwbr
    Report

    From what I've been able to find applying top or bottom padding/margins wouldn't work because span tags are inline elements (that's what you have your copyright CSS affecting). You would have had to either float the span tag, or give it a display:block before the vertical padding would have appeared.

     
    |
    Mark as:
  • jnwbr
    Currently Being Moderated
    7. jnwbr,
    Jul 30, 2012 2:53 PM   in reply to Jon Fritz II
    Report

    So many variables. Head about to explode!

     
    |
    Mark as:
  • Jon Fritz II
    Currently Being Moderated
    8. Jon Fritz II,
    Jul 30, 2012 2:55 PM   in reply to jnwbr
    Report

    Nah, just use divs for all of your positioning work and you'll be fine..

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    9. Nancy O.,
    Jul 30, 2012 3:11 PM   in reply to Jon Fritz II
    Report

    Paragraphs and headings are block level by nature.  I would never recommend using a <span> tag to replace a <p>, <h1>, <h2>, <h3>, etc... 

     

    Headings and paragraphs impart semantic meaning to content.  Span tags impart no such meaning.   Spans are mainly used as hooks for when you need a special style within a line of text.

     

    Example:

    <p>Some normal text... <span style="font-size: 55px">Some really big text in a span</span> and some more normal text.</p>

     

    <p>Some normal text... <span style="color:red">Here is some red text in a span</span> and some more normal text.</p>

     

     

     

    Nancy O.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points