none
Iframe Image link border problem. RRS feed

  • Question

  • I have an Iframe calling a random image from a gallery page. Example here, random image is in right hand sidebar. http://retiredgreyhounds.info/site_new/default.html

    Image is called into the Iframe via a php script

    <?php @readfile('http://hovedogs.co.uk/gallery/gallery2/main.php?g2_view=imageblock.External&g2_blocks=randomImage&g2_show=title&g2_linkTarget=_top&g2_link=http://retiredgreyhounds.info/site_new/gallery/available.html'); ?>
    
    This is designed to open the gallery to view the specific album which works fine.
    
    The only issue I have is that within IE8 and probably other versions the images in the Iframe are rendered with a hyperlink border that I want to get rid of. It does not seem to be the case when viewing in other browsers such as Safari, Opera or Mozilla. Has anyone any ideas please why this is happening.
    

     


    Sunday, December 4, 2011 6:06 PM

Answers

  • I finally found the solution. Which incidentally was never mentioned here.

    The Iframe is calling a php script. http://retiredgreyhounds.info/site_new/imageblock.php

    Adding the css into this file itself like so provided the remedy that eluded so many.

    <html>
    <head>
    <style type="text/css">
    .giThumbnail {border: none;}
    </style>
    </head>
    <body><?php @readfile('http://hovedogs.co.uk/gallery/gallery2/main.php?g2_view=imageblock.External&g2_blocks=randomImage&g2_show=title&g2_linkTarget=_top&g2_link=http://retiredgreyhounds.info/site_new/gallery/available.html '); ?>
    </body>
    </html>
    

     

    Friday, December 9, 2011 10:09 PM

All replies

  • Unless you style them otherwise, hyperlinked images have the default styling for a link - that border is the equivalent of an underline.

    If you drag an image onto your page, select it and click the hyperlink button, and add a hyperlink to it, you'll see that EW automatically adds an inline style to the image (which it doesn't do if you don't hyperlink it) to take care of this:

     

    style="border-width: 0px"

     

    Add a style to the CSS for your iframed page(s) to set a zero border for images.

     

    Sunday, December 4, 2011 7:52 PM
  • Hi Kathy, Many thanks for the reply,

    I tried adding style="border-width:0px" to my php script like this but it has made no difference whatsoever.

    <a style="border-width:0px"></a><?php @readfile('http://hovedogs.co.uk/gallery/gallery2/main.php?g2_view=imageblock.External&g2_blocks=randomImage&g2_show=title&g2_linkTarget=_top&g2_link=http://retiredgreyhounds.info/site_new/gallery/available.html'); ?> 
    
    
    

     

    Monday, December 5, 2011 12:18 AM
  • You need to understand basic HTML and CSS.  You added a border style to an empty link, which does nothing and is not what I said.

    You need to apply it to the images.  Create a style for all images on the page(s) and put it in the CSS file attached to the page.  Do you know how to create a style that applies to the img element?

    Monday, December 5, 2011 12:23 AM
  • That does not really help I am afraid, all the images are drawn randomly from a gallery page that is constantly changing, perhaps it is not possible in this instance.
    Monday, December 5, 2011 12:28 AM
  • That the images are drawn randomly is not the issue.  What is an issue is if you don't control the CSS for the display.  The style would apply to the page.  I'm not talking about an inline style for each image.
    Monday, December 5, 2011 12:33 AM
  • I have a css file for the actual Gallery that the images are being drawn from, am I right in guessing this is where I should be looking to add some code?

    /* ********************************************************************************
     * Building blocks
     * h2, h3, p, etc        Standard html tags
     * div.gbBlock           Sidebar or content section with style for contained lists
     * ul.gbBreadCrumb       List of links/path elements
     * table.gbDataTable     Table for data/form elements with styles for shading rows
     */
    
    #gallery h2, #gallery h3, #gallery h4, #gallery form {
        margin: 0;
        padding: 0;
    }
    
    #gallery p {
        margin: 0.6em 0;
        padding: 0;
    }
    
    .gbBlock {
        padding: 0.7em;
        border-width: 0 0 1px 0;
        border-style: inherit;
        border-color: inherit;
        /* IE can't inherit these */
        border-style: expression(parentElement.currentStyle.borderStyle);
        border-color: expression(parentElement.currentStyle.borderColor);
    }
    
    .gbBlock ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    
    .gbBlock ul ul {
        margin: 0 0 0.5em 1.0em;
    }
    
    .gbBlock li {
        padding: 6px 0 0 0;
    }
    
    #gallery .gbBlock h3 {
        margin-bottom: 0.5em;
    }
    
    #gallery .gbBlock h4 {
        margin-top: 0.5em;
    }
    
    
    #gsNavBar div.gbBreadCrumb {
        margin: 0;
        padding: 4px 8px;
    }
    
    table.gbDataTable {
        padding-bottom: 4px;
    }
    
    table.gbDataTable th, table.gbDataTable td {
        padding: 4px;
    }
    
    
    .giBlockToggle {
        padding: 0 0.4em 0.1em;
    }
    .giBlockToggle:hover {
        cursor: pointer;
    }
    
    
    .gbMarkupBar {
        margin: 4px 0;
    }
    
    #gallery .gbMarkupBar input {
        margin: 0;
        padding: 0;
    }
    
    
    /* ********************************************************************************
     * Sections
     * body.gallery     Page body in G2 standalone (doesn't apply to embedded)
     * #gallery         Page container
     * #gsNavBar   Top bar with breadcrumb and other links
     * #gsSidebar       Sidebar
     * #gsContent       Main content
     */
    
    body.gallery {
        margin: 0;
        padding: 0;
    }
    
    #gallery {
        padding: 8px;
    }
    #gallery.rtl {
        direction: rtl;
    }
    
    #gsNavBar {
        border-top-width: 1px;
        border-bottom-width: 1px;
    }
    
    #gsNavBar div.gbSystemLinks {
        padding: 4px 6px;
    }
    
    #gsNavBar div.gbSystemLinks span {
        padding: 0 4px;
    }
    
    #gsSidebar {
        border-right-width: 1px;
        width: 175px;
        overflow: hidden;
    }
    #gsSidebarCol {
        width: 1%; /* Expand to fit content ("0" bad4 firefox, "1px" bad4 opera) */
    }
    
    td.giAlbumCell, td.giItemCell {
        padding: 1em;
        text-align: center;
    }
    
    #gallery td.giAlbumCell select, #gallery td.giItemCell select {
        margin-top: 0.8em;
    }
    
    /* So imageframed thumbs can be centered */
    td.giAlbumCell table, td.giItemCell table {
        margin: auto;
    }
    
    #gsPages span {
        padding: 0 0.3em;
    }
    
    #gallery #gsSidebar ul {
        font-size: 1em;
    }
    
    /* ********************************************************************************
     * Matrix Theme for Gallery 2
     * by Ross A. Reyman, Jon Huang, and Chad Kieffer
     * updated by Alan Harder
     */
    
    /* ********************************************************************************
     * Building blocks
     * #gallery              Default font/color settings
     * .gcBackground1,2..    Palette of backgrounds
     * .gcBorder1,2..        Palette of borders
     * a, h2, h3, etc        Standard html tags
     * .giTitle, .giSubtitle, .giDescription, .giInfo, .giSuccess, .giWarning, .giError
     *                       Palette of text styles
     * div.gbBreadCrumb      List of links/path elements
     * table.gbDataTable     Table for data/form elements with styles for shading rows
     * div.gbTabBar          UI component for selectable tabs
     * .autoComplete*        Styles for autoComplete popup lists
     */
    
    #gallery {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 62.5%;
        color: #333;
        background-color: #fff;
    }
    body.gallery {
        background-color: #fff;
    }
    
    .gcBackground1 {
        background-color: #eee;
    }
    
    .gcBackground2 {
        background-color: #e7e7e7;
    }
    
    .gcBorder1 {
        border: 0 solid #ccc;
    }
    
    .gcBorder2 {
        border: 0 solid #888;
    }
    
    #gallery a {
        font-weight: bold;
        text-decoration: none;
        color: #6b8cb7;
    }
    #gallery a:hover {
        text-decoration: underline;
        color: #f4560f;
    }
    #gallery a:active {
        text-decoration: none;
        color: #f9c190;
    }
    
    #gallery img {
        border-width: 0;
    }
    
    #gallery h2, #gallery h3, #gallery h4 {
        font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
    }
    
    #gallery input:focus, #gallery textarea:focus {
        background-color: #ffc;
        color: #000;
    }
    
    #gallery input.inputTypeSubmit, #gallery input.inputTypeButton {  /* No input[type=submit] in IE */
        color: #333;
        background-color: #eee;
        border-width: 2px;
        border-style: solid;
        border-color: #e7e7e7 #666 #666 #e7e7e7;
    }
    
    #gallery select {
        font-size: 1em;
    }
    
    .giTitle, #gallery h2, #gallery h3, #gallery h4 {
        font-size: 1.3em;
        font-weight: bold;
    }
    
    #gallery pre, #gallery tt {
        font-family: Courier New;
        font-size: 1.2em;
    }
    
    .giSubtitle {
        font-size: 0.9em;
        font-weight: normal;
        vertical-align: text-bottom;
    }
    
    .giDescription {
        font-size: 1.1em;
        line-height: 1.4em;
    }
    
    .gbEmptyAlbum {
        height: 400px;
    }
    
    .giDescription h3.emptyAlbum {
        line-height: 4.0em;
        text-align: center;
    }
    
    .giInfo {
        font-size: 0.9em;
        color: #888;
    }
    
    .giSuccess, .giWarning, .giError  {
        font-weight: bold;
    }
    
    .giSuccess { color: #5c0; }
    .giWarning { color: #c50; }
    .giError { color: #a44; }
    
    .giNew, .giUpdated {
        border-width: 2px;
        border-style: ridge;
        padding: 0 6px;
        line-height: 1.9em;
    }
    
    #gsNavBar div.gbBreadCrumb {
        font-size: 1.1em;
        font-weight: bold;
    }
    
    #gsNavBar div.gbBreadCrumb a, #gsNavBar div.gbBreadCrumb span {
        padding: 0 0 0 14px;
        background: url('images/icon_path_separator.gif') no-repeat left;
    }
    
    #gsNavBar div.gbBreadCrumb a.BreadCrumb-1 {   /* no :first-child in IE */
        padding-left: 0;
        background-image: none;
        white-space: nowrap;
    }
    
    #gsThumbMatrix {
        width: 100%;
    }
    
    #gallery.IE div.gbBreadCrumb span {
        display: inline-block;   /* IE loses padding-left on wrapped inline nowrap element */
        padding-right: 4px;      /* IE has less space at right of each span */
    }
    
    #gsNavBar div.gbBreadCrumb span.BreadCrumb-1 {   /* no :first-child in IE */
        padding-left: 0;
        background-image: none;
    }
    
    #gsNavBar div.gbSystemLinks {
      float: right;
    }
    
    table.gbDataTable th {
        text-align: left;
        background-color: #e7e7e7;
    }
    
    .gbEven {
        background-color: #fff;
    }
    
    .gbBusy {
        background-color: #78D478 !important;
    }
    
    .gbOdd {
        background-color: #eee;
    }
    
    
    div.gbTabBar {
        font-size: 0.9em;
        font-weight: bold;
        margin: 0.8em 0 0;
        padding: 6px;
        background: url('../matrix/images/tab_bg.gif') repeat-x bottom;
        white-space: nowrap;
    }
    
    div.gbTabBar span.o {
        padding: 6px 0 5px 8px;
        background: url('../matrix/images/tab_left.jpg') no-repeat left top;
    }
    #gallery.IE div.gbTabBar span.o {
        display: inline-block;   /* IE loses padding-left on wrapped inline nowrap element */
        margin-bottom: 1px;      /* ..and then adds padding differently with inline-block.. */
    }
    /* IE may clip off the right end of a long set of tabs, so allow IE to wrap them */
    #gallery.IE div.gbTabBar { padding-bottom: 0; white-space: normal; }
    #gallery.IE div.gbTabBar span.giSelected { margin-bottom: 0; }
    
    #gallery div.gbTabBar span span {
        padding: 6px 12px 5px 4px;
        background: url('../matrix/images/tab_right.jpg') no-repeat right top;
    }
    
    #gallery div.gbTabBar a {
        color: #777;
        text-decoration: none;
    }
    
    #gallery div.gbTabBar a:hover {
        color: #333;
    }
    
    #gallery div.gbTabBar span.giSelected {
        padding-bottom: 6px;
        background-image: url('../matrix/images/tab_left_on.jpg');
    }
    
    #gallery div.gbTabBar span.giSelected span {
        color: #333;
        padding-bottom: 6px;
        background-image: url('../matrix/images/tab_right_on.jpg');
    }
    
    .autoCompleteShadow {
        background-color: #a0a0a0 !important;
    }
    
    .autoCompleteContainer {
        border-color: #404040 #404040 #080;
        background-color: #fff;
    }
    
    .autoCompleteContainer li.yui-ac-highlight {
        background-color: #eee;
    }
    
    #gallery .gbMarkupBar input {
        font-size: 1.1em;
    }
    
    .giSearchHighlight {
        font-weight: bold;
        background-color: #ff6;
    }
    
    
    /* ********************************************************************************
     * Sections
     * #gallery         Page container
     * #gsNavBar   Top bar with breadcrumb and other links
     * #gsSidebar       Sidebar
     * #gsContent       Main content
     */
    
    #gsNavBar div {
        margin-top: 0.1em;  /* Align system links with breadcrumb */
        font-weight: bold;
    }
    
    #gsSidebar div ul {   /* no > in IE */
        font-size: 1.1em;
        font-weight: bold;
    }
    #gsSidebar div ul ul { font-size: 1.0em; }
    
    #gsSidebar ul span {
        color: #999;
    }
    
    div.gbNavigator div.next-and-last {
      float: right;
    }
    div.gbNavigator div.next-and-last.no-previous {
      float: none;
      text-align: right;
    }
    
    div.gbNavigator a.first {
      padding-left: 27px;
      background: url('images/nav_first.gif') left no-repeat;
    }
    
    div.gbNavigator a.previous {
      padding-left: 27px;
      background: url('images/nav_prev.gif') left no-repeat;
    }
    
    div.gbNavigator a.next {
      padding-right: 27px;
      background: url('images/nav_next.gif') right no-repeat;
    }
    
    div.gbNavigator a.last {
      padding-right: 27px;
      background: url('images/nav_last.gif') right no-repeat;
    }
    
    div.gbNavigator div.first-and-previous img {
      vertical-align: middle;
      padding-right: 0.5em;
    }
    div.gbNavigator div.next-and-last img {
      vertical-align: middle;
      padding-left: 0.5em;
    }
    
    #gallery.rtl div.gbNavigator div.next-and-last {
      float: left;
    }
    #gallery.rtl div.gbNavigator div.next-and-last.no-previous {
      float: none;
      text-align: left;
    }
    #gallery.rtl div.gbNavigator div.first-and-previous {
      text-align: right;
    }
    /* Both IE and Gecko have bugs with omitting padding on rtl inline content */
    #gallery.IE.rtl div.gbNavigator a {
      display: inline-block;
    }
    #gallery.gecko.rtl div.gbNavigator a {
      display: -moz-inline-box;
    }
    
    #gallery.rtl div.gbNavigator a.first {
      padding: 0 27px 0 0;
      background: url('images/nav_last.gif') right no-repeat;
    }
    #gallery.rtl div.gbNavigator a.previous {
      padding: 0 27px 0 0;
      background: url('images/nav_next.gif') right no-repeat;
    }
    #gallery.rtl div.gbNavigator a.next {
      padding: 0 0 0 27px;
      background: url('images/nav_prev.gif') left no-repeat;
    }
    #gallery.rtl div.gbNavigator a.last {
      padding: 0 0 0 27px;
      background: url('images/nav_first.gif') left no-repeat;
    }
    #gallery.rtl div.gbNavigator div.first-and-previous img {
      padding: 0 0 0 0.5em;
    }
    #gallery.rtl div.gbNavigator div.next-and-last img {
      padding: 0 0.5em 0 0;
    }
    
    div.block-search-SearchBlock a.advanced {
      display: block;
      padding: 3px;
    }
    
    div.block-core-ItemLinks {
      margin: 3px 0;
    }
    div.block-core-ItemLinks a {
      padding: 3px;
    }
    div#gsSidebar div.block-core-ItemLinks a {
      display: block;
    }
    
    div#gsSidebar div.block-core-PeerList a {
      display: block;
      padding: 3px;
    }
    
    div#gsSidebar div.block-core-PeerList span {
      font-weight: bold;
      display: block;
      padding: 3px;
    }
    
    div#gsSidebar div.block-core-PeerList span.current {
      color: #0b6cff;
    }
    
    /* ***************************************************** */
    /*                   Dynamic blocks                      */
    /* ***************************************************** */
    
    div.block-comment-ViewComments {
      margin: 5px;
    }
    
    div.block-comment-ViewComments div.one-comment {
      border: 1px solid #e7e7e7;
      padding: 5px;
      margin-bottom: 5px;
    }
    
    div.block-comment-ViewComments h3 {
    }
    
    div.block-comment-ViewComments span {
      padding-right: 5px;
    }
    
    div.block-comment-ViewComments p.info {
      font-style: italic;
      text-align: right;
      font-size: 0.95em;
    }
    
    div.block-core-GuestPreview {
      float: right;
    }
    #gallery.rtl div.block-core-GuestPreview {
      float: left;
    }
    
    span.block-core-SystemLink {
    }
    
    div.block-exif-ExifInfo {
      margin: 5px;
    }
    
    span.bsw_ButtonDisabled {
      color: #999;
    }
    
    span.bsw_ButtonEnabled {
      color: #000;
      cursor: pointer;
    }
    
    table.bsw_ParamTable {
      width: 100%;
      border: 1px solid #999;
      border-collapse: collapse;
    }
    
    tr.bsw_ParamHeaderRow {
      background-color: #EEE;
    }
    
    tr.bsw_ParamHeaderRow td {
      font-weight: bold;
      text-align: center;
      border: 1px solid #999;
    }
    
    td.bsw_BlockCommands {
      white-space: nowrap;
      text-align: center;
    }
    
    #gsFooter {
      padding-top: 4px;
    }
    
    /* ********************************************************************************
     * Rating module style fix for Matrix
     */
    .giRatingUI {
        margin: 10px auto; /* Required to center default rating module star images */
    }
    #gsThumbMatrix .giRatingAverageContainer {
        margin: auto;
    }
    
    

     

    Monday, December 5, 2011 12:42 AM
  • Posting the CSS doesn't tell me anything.  No need to do that, please.

    If you mean this CSS applies to the gallery site page itself (that you do have control over that), and you are iframing a page from the gallery site, then, yes, put the img style in that CSS.  If you mean it applies to your main page, not to the iframed page, then, no, it won't work.

    Monday, December 5, 2011 12:51 AM
  • Sorry but your condescending comments( I presume you understand the meaning) are of little help. I understood this was a forum for all users of Expression Web to get help. I am a novice user with basic understanding of html and css, who is trying to build a charity site.

    I do have control over the css file I posted from the gallery site page and have tried to put the image style in there previously but unfortunately it had no effect so If anyone can help with the correct code I would be grateful.

    Monday, December 5, 2011 1:13 AM
  • I have not been condesending, but since you are reading it that way, I'll let others try and help you.

    Monday, December 5, 2011 1:42 AM
  • Without seeing all the code (please, don't post it here), I do not know what is contained in main.php that makes the hyperlink active on a gallery item. But I suspect it is there. Simply removing the &g2_link=... section of the php code above still allows a link to the gallery.

    I would investigate making a copy of main.php, naming it main2.php or the like, edit it to remove the link to the gallery proper and use it for your iFrame.

    Take care, Mike

    Monday, December 5, 2011 2:18 AM
  • I have not been condesending, but since you are reading it that way, I'll let others try and help you.
    I think I'll pass, too. After reviewing all of the posts in the thread so far, looking, unsuccessfully, for Kathy's condescending comments, I figure that any help I might offer would occasion even greater "injury" on the part of the OP.

    I will note before leaving that the OP's self-estimation of a "basic understanding of html and css" is more than a little exaggerated, as such a level of understanding would have enabled him to understand her responses and follow her instructions, neither of which has he evinced any capability of doing.

    You can have this sandbox to yourself, Mike. You might want to avail yourself of the free training resources in the Learning Resources and Reference Sites section of the Forum FAQs and Guidelines, and maybe grow a little thicker skin, while waiting for someone else who knows what s/he's talking about to try to work with you on resolving this issue. Good luck with that...


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Monday, December 5, 2011 2:28 AM
  • As has been pointed out, the problem is on the Gallery page, where the images in the gallery don't have any border styling and are therefore showng with borders in some browsers. (And this may vary from user to user, depending on their browser settings).

    To solve this add the following style to the available.html page:

    #homegallery img {border:0}

    It can go in the style block below .style1

    HTH


    Ian Haynes

    EW V4 Add-Ins
    EW resources, hints and tips
    Monday, December 5, 2011 10:41 AM
  • I finally found the solution. Which incidentally was never mentioned here.

    The Iframe is calling a php script. http://retiredgreyhounds.info/site_new/imageblock.php

    Adding the css into this file itself like so provided the remedy that eluded so many.

    <html>
    <head>
    <style type="text/css">
    .giThumbnail {border: none;}
    </style>
    </head>
    <body><?php @readfile('http://hovedogs.co.uk/gallery/gallery2/main.php?g2_view=imageblock.External&g2_blocks=randomImage&g2_show=title&g2_linkTarget=_top&g2_link=http://retiredgreyhounds.info/site_new/gallery/available.html '); ?>
    </body>
    </html>
    

     

    Friday, December 9, 2011 10:09 PM
  • Adding the css into this file itself like so provided the remedy that eluded so many.

    Including you, for a week. How much time do you actually expect volunteers to put into drilling down through multiple files and scripts for you to find a solution? Speaking of solutions, did you even try Ian's solution, posted five days ago? Since http://retiredgreyhounds.info/site_new/gallery/available.html is the gallery from which the images are pulled, I would seem to be the appropriate place to add the styling. So, did you implement it? What was the outcome?


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    • Edited by paladyn Saturday, December 10, 2011 7:46 PM
    Saturday, December 10, 2011 7:45 PM
  • Adding the css into this file itself like so provided the remedy that eluded so many.

    Including you, for a week. How much time do you actually expect volunteers to put into drilling down through multiple files and scripts for you to find a solution? Speaking of solutions, did you even try Ian's solution, posted five days ago? Since http://retiredgreyhounds.info/site_new/gallery/available.html is the gallery from which the images are pulled, I would seem to be the appropriate place to add the styling. So, did you implement it? What was the outcome?


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.


    Actually, the images are being pulled from, http://hovedogs.co.uk/gallery/gallery2/main.php

    The link you mentioned is a hyperlink the Iframe redirects users to view the whole gallery page.

    Yes I tried everyones kind suggestions but since this is in an iframe, it's not going to use any of the css on the parent page that's calling the iframe. Only the solution I posted provided the remedy.

    (Incidentally #homegallery img has no relation to the Iframe or Gallery, Ian pulled that from another element on the page that displays Images at the top)

    Finally the very point they are volunteers means they only have to volunteer information if they wish to. That is why I frequent help forums in the hope that someone with a bit more savvy than me might be able to offer a solution and in the future provide the answer when someone else might run into the same problem.

     


    Sunday, December 11, 2011 4:32 PM