Weird little lines between images in a widget
-
Hi
So I have five social media icons at the top of my sidebar and the links are working. The only problem is between two of them there are these grey lines and was wondering if anyone know how to remove them.
Thanks for your help. Tried a few different things and I’m kind of stumped.
Here’s the code im using:
<img alt=”Twitter” src=”http://ariannasrandomthoughts.files.wordpress.com/2012/02/ico-social-twitter.png” />
<img alt=”Facebook” src=”http://ariannasrandomthoughts.files.wordpress.com/2012/02/ico-social-facebook.png” />
<img alt=”LinkedIn” src=”http://ariannasrandomthoughts.files.wordpress.com/2012/02/ico-social-linkedin.png” />
<img alt=”Contact Me” src=”http://ariannasrandomthoughts.files.wordpress.com/2012/02/email_32.png” />
<img src=”http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png” width=”156″ height=”26″ alt=”Follow Me on Pinterest” />
The blog I need help with is: (visible only to logged in users)
-
Hi ariannasrandomthoughts: these thin grey dotted lines are nothing to worry about as you will see this on a lot of websites.
They are just the cropped boundaries of that image or icon, or they are possibly a web design term called slices, which is where a basic flat image/design, say your website for example has been separated into certain sections, so when it comes to the coding side of things.
Certain parts can be coded to react different or to be linked or hyperlinked with certain coding or to correspond with certain links or other websites, for example the lines around the Facebook icon is so it can be hyperlinked with Facebook, so when it is clicked on by the viewer, they should be directed to facebook.com, twitter icon to be linked with twitter.com and so-fourth with other sections of your website, the same technique also usually applies with buttons and navigation menus etc. on a website!
This is nothing to worry about as probably a large percentage of todays modern websites would have most likely have been designed by using the same technique, as websites in the past were designed by creating table layouts, as in the tables you would usually see in electronic word documents e.g : Microsoft Word etc. But the table trend started to die out years ago as design and technology processes improved!
This is just a basic explanation on what your dotted lines are and what their purpose is, if you would like to know more about the slice tool I refered to earlier. just type into Google.com, Adobe Photoshop or Adobe Illustrator tutorials on using the slice tool (” which its primary use is for elements of web design / to make the make the web designer task more efficient and prompt”), visit a few of these sites to gain a better understanding of this very useful and powerful tool.
While you are visiting these sites, navigate and explore your way through them a little and you will probably notice these little grey dotted lines in some of the design aspects of their websites as well or other websites you may visit!
If you are wondering how I know all this? Well, I’m a 38yo Freelance Graphic/ Web Designer who has been using Photoshop and Illustrator for about 7-8 years now, and have used this tool numerous times in this period
I hope this helped and I did not bore you too much!
SEE YA MARKAS -
@ariannasrandomthoughts
Please replace the code you have in that widget with this and we shall see if the dashes are gone:
<div><a href="http://twitter.com/arandomthoughts" target="_new"> <img src="http://ariannasrandomthoughts.files.wordpress.com/2012/02/ico-social-twitter.png" alt="Twitter" /></a> <a href="http://www.facebook.com/ariannasrandomthoughts" target="_new"> <img src="http://ariannasrandomthoughts.files.wordpress.com/2012/02/ico-social-facebook.png" alt="Facebook" /></a> <a target="_new"> <img src="http://ariannasrandomthoughts.files.wordpress.com/2012/02/ico-social-linkedin.png" alt="LinkedIn" /> </a> <a href="http://ariannasrandomthoughts.com/contact/" target="_new"> <img src="http://ariannasrandomthoughts.files.wordpress.com/2012/02/email_32.png" alt="Contact Me" /></a> <a href="http://pinterest.com/arandomthoughts/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" alt="Follow Me on Pinterest" width="156" height="26" /></a></div> -
@easterdesigns – Thanks so much that does make a lot of sense. I will go look the slice tool. I’m really getting interested in web and graphic design. You didn’t more me at all. I really appreciate the help.
@timethief – I just entered it – it took away one line but there is still one still there. Thanks so much for your help.
-
Hi again,
Hopefully this will do it for you. (I am visually challenged).
<div><a href="http://twitter.com/arandomthoughts" target="_new"> <img src="http://ariannasrandomthoughts.files.wordpress.com/2012/02/ico-social-twitter.png" alt="Twitter" /></a> <a href="http://www.facebook.com/ariannasrandomthoughts" target="_new"> <img src="http://ariannasrandomthoughts.files.wordpress.com/2012/02/ico-social-facebook.png" alt="Facebook" /></a> <a target="_new"> <img src="http://ariannasrandomthoughts.files.wordpress.com/2012/02/ico-social-linkedin.png" alt="LinkedIn" /></a> <a href="http://ariannasrandomthoughts.com/contact/" target="_new"> <img src="http://ariannasrandomthoughts.files.wordpress.com/2012/02/email_32.png" alt="Contact Me" /></a> <a href="http://pinterest.com/arandomthoughts/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" alt="Follow Me on Pinterest" width="156" height="26" /></a></div> -
-
- The topic ‘Weird little lines between images in a widget’ is closed to new replies.
WordPress.com Forums 