Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have a two-pronged question.

First: SEO Concerns aside, should I be concerned about using iFrames on my site as far as viruses etc go? I am using skydrive to host my images and it provides an iFrame embed code that's almost exactly what I am looking for. Since it's just hosting images, I am not worried about SEO, but I am worried about any vulnerabilities this might open me or my users to. Have iFrames been completely abandoned by the web community due to safety concerns, or are they okay to use again? (*Using img src is simple enough, I just don't want to have to tap out all of the dimensions since skydrive provides me the code.)

Second: If I do use the iFrame code, how do I add a modifier to have the text wrap next to the image? I have two lines with two pics, then one line with one pic but the text begins at the base of the image instead of the top, thus leaving only one line of text instead 238px. To my knowledge, align = left | right | center wouldn't work.

Here's what I have from skydrive:

<iframe title ="Preview" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="width:320px;height:238px;padding:0;background-color:#fcfcfc;" src="http://[blah-blah.com/img].jpg"></iframe>

(*Unfortunately I am unable to use the direct URL http://[blah-blah/img].jpg as it is popping broken images, likely a permissions for linking thing)

share|improve this question

1 Answer 1

up vote 3 down vote accepted

I think you mean you want to float the Iframe not align it.

<style>
iframe{float:left;}
</style>

As for using iFrames, it's discouraged and people using ad-blockers may not see your images. Most AD's use iframes to host their images and content so it's often ignored on websites when an adblocker is turned on.

Cool trick though just between you and me, you can place content inside the iFrame tag that will be displayed if the iFrame is rejected by an Ad-Blocker.

<iframe title ="Preview" scrolling="no" marginheight="0" marginwidth="0"
frameborder="0" style="width:320px;height:238px;padding:0;background-color:#fcfcfc;" 
src="http://[blah-blah.com/].jpg">
Sorry but Ad Blocking software may have disabled your ability to see this content. 
Please disable your Ad-Blocking software to see this content.</iframe>
share|improve this answer
    
The non-compatible browser text comes up? Cool. Sucks that I would have to add some snarky line about white-listing my site though to each snippet. –  mfg Oct 28 '10 at 15:50
    
Just make it generic about ad-blockers. Not everyone uses ad-blockers, so really this is only for those people that do if you really care about them seeing the content or understanding why they aren't seeing it. To them it'll appear as if an Ad was blocked, not that legitimate content was blocked. –  XOPJ Oct 28 '10 at 15:52
    
oh I just meant the 'manually adding' part was sucky. Anyway, If I have multiple iframes in one post per multiple post page, where do I insert the '<style></style>' tags; before and after the embed code? –  mfg Nov 7 '10 at 15:42
    
You only need to define the style once if you're applying it to the iFrame element as I have listed above. If you want some to float right, and others to float left, then you would probably want to do this with CSS classes. You could also apply the styling as an inline code to the individual iFrames. It's really going to depend on how your code is laid out and what you're trying to accomplish. Before anyone harps on me for suggesting inline code, this is sometimes easier to work with for someone just starting out to keep track of till you're ready for a centralized source for CSS. –  XOPJ Nov 9 '10 at 11:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.