images have black borders in explorer

  • 1
  • Question
  • Updated 5 years ago
  • Answered
When I open my site in explorer, images have a black border around them, any idea why? http://www.davidlilburn.ie/work.php, this doesnt happen in firefox
Photo of irishshogun

irishshogun

  • 33 Posts
  • 1 Reply Like

Posted 5 years ago

  • 1
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello irishshogun,

Are you still having the problems with the borders? I just viewed the page in the URL you posted in Firefox and Internet Explorer and did not see black borders in either.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi irishshogun

I'm seeing the same as Crystal, I'm using Internet Explorer 10. Could you please let us know which version of Internet Explorer you are using? Or has this problem sorted itself out in the meantime?
Photo of irishshogun

irishshogun

  • 33 Posts
  • 1 Reply Like
Hi,
Its internet explorer 9, I realised this only happened with images added through the text widget and not the image widget, the page you're looking at has had the images replaced now. I sometimes need to add images in a text box such as this http://www.davidlilburn.ie/recent-pro... to easily make links to additional pages.

Thanks

PAul
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Paul

I'm afraid that this is working as designed because Internet Explorer doesn't seem to understand an underlying code to not display any borders around images while Firefox and Chrome do.

To avoid this, can I suggest that you add your images using the Picture Widget? When I look at the way you arranged your three images at the top of your text, they could be added using two Column Divider Widgets and a Picture Widget, too. Let me know if you'd like to try this and need any assistance with it.
Photo of irishshogun

irishshogun

  • 33 Posts
  • 1 Reply Like
Hi Stefan,

I tried that but the client is very specific about layouts (artists!!) is there any coding that can be added/adjusted to account for this in explorer. I've altered the images to be displayed with picture widgets when possible.

Thanks

Paul
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Paul

I'm afraid there isn't a workaround for this at the moment. The Column Divider Widgets allow you to achieve the desired layout. To make three columns, you will need to add a second Column Divider Widget into one of the columns of the first Widget, and then drag the lines until you have three equally-sized columns. You could also use a 3 over 1 column Layout setting.
Photo of irishshogun

irishshogun

  • 33 Posts
  • 1 Reply Like
Hi Stefan,

It works ok, but for 5 images its four layers deep and fiddly to setup, I'll use it if forced to, thanks for the suggestion,

Best,

Paul
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Paul

How did you get to 4 layers? To create five columns, you'd just need 3 Column Diver Widgets: A first one with two columns, then you place a second one into both columns = 4 columns, then you place another on into one of the columns = 5 columns. You can then adjust the middle lines.

I agree that it could get a bit squashy when adding 5 pictures, but it's the best solution at the moment. I will discuss this with our specialists to find out if there is any solution for this on the long term.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Paul

I must correct myself: Until we fix this in general, there is a workaround to remove the borders displayed by Internet Explorer. You will need to work with a little bit of code editing to achieve this.

So after you've added your pictures to a Text Widget, click into the widget and then on the HTML icon in the Text Editing Toolbar above to open the HTML Editor of your Text Widget. Your images will be represented by the < img > tags, so scroll there and add this to the style attribute of the < img > tag:
border: none;
Your < img > tag should look like this now:
<img src="..." style="... border: none;">
It works best if you add it in Firefox or Chrome and view the live site in Internet Explorer after republishing because for some reason IE changes your code "border: none" to "border: currentColor".

However, the result will be that linked pictures will not display any border in IE any more – at least I can say that for IE10. You will need to edit the code for every picture added, so for each < img > tag.