Hi Jennifer, You have certainly been busy in creating a professional looking page. I like the muted tones. The Google Search Box can be included as the last item in the list, e.g. <li id="search"><span> <script> (function() { var cx = '016502207605957074646:kbbydb_ba1u'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:searchbox-only></gcse:searchbox-only> </span> </li> ... and the associated styles are:- /* Changes to Google Search Box */ #search { background:#eee; width:300px; height:43px; float:right; } #search span { display:block; margin:6px 5px -6px 5px; } The spaces in the icons showing at the bottom of the page are caused by the mark-up. Easily fixed by changing to:- <figure> <a href="#"> <img src="" alt=""> </a> </figure> I'll have a look at the other issues shortly, Barry ------------------------- On 21/11/2015 04:43, Jennifer McKemie via wrote: > Hi, > > I revamped my portal page and pretty much have done so through lotsa > cut > and paste and trial and error and Google is my very best friend. > However, I > cannot figure out how to fix two bothersome details. > Second, at the bottom of the page are these tiny little lines between > the > social media icons. I think they are residue from the padding? I > don't > know, but I like how the icons are laid out, so left the formatting > that > really was designed to go with images with captions, even though it > kinda > doesn't "fit" the way I've used it. So, can some lovely soul explain > why > these lines are there and then maybe teach me how to get rid of them?

Barry! Thank you so much for you kind words about the page. To be honest, I love learning this stuff, though I think I am a perpetual "beginner". Its amazing to me that a few letters and numbers can turn a blank screen into something so very useful. Anyway.. I had absolutely NO IDEA I could make that search script into a <li>. That is fantastic. Thank you, its exactly how I wished it would look. And the little lines between, that was because the anchor needed to be before the figure? (the figure is a container? is that the right term? is this why?)..that's good to know. I won't make that mistake again. Thank you again for your kind words and efforts on my behalf. Jen On Fri, Nov 20, 2015 at 3:57 PM, Barry Carlson via < [email protected]> wrote: > Hi Jennifer, > > You have certainly been busy in creating a professional looking page. I > like the muted tones. > > The Google Search Box can be included as the last item in the list, > e.g. > > <li id="search"><span> > <script> > (function() { > var cx = '016502207605957074646:kbbydb_ba1u'; > var gcse = document.createElement('script'); > gcse.type = 'text/javascript'; > gcse.async = true; > gcse.src = (document.location.protocol == 'https:' ? 'https:' : > 'http:') + > '//cse.google.com/cse.js?cx=' + cx; > var s = document.getElementsByTagName('script')[0]; > s.parentNode.insertBefore(gcse, s); > })(); > </script> > <gcse:searchbox-only></gcse:searchbox-only> > </span> > </li> > > ... and the associated styles are:- > > /* Changes to Google Search Box */ > #search { > background:#eee; > width:300px; > height:43px; > float:right; > } > #search span { > display:block; > margin:6px 5px -6px 5px; > } > > The spaces in the icons showing at the bottom of the page are caused by > the mark-up. > > Easily fixed by changing to:- > > <figure> > <a href="#"> > <img src="" alt=""> > </a> > </figure> > > I'll have a look at the other issues shortly, > > Barry > > ------------------------- > On 21/11/2015 04:43, Jennifer McKemie via wrote: > > Hi, > > > > I revamped my portal page and pretty much have done so through lotsa > > cut > > and paste and trial and error and Google is my very best friend. > > However, I > > cannot figure out how to fix two bothersome details. > > > Second, at the bottom of the page are these tiny little lines between > > the > > social media icons. I think they are residue from the padding? I > > don't > > know, but I like how the icons are laid out, so left the formatting > > that > > really was designed to go with images with captions, even though it > > kinda > > doesn't "fit" the way I've used it. So, can some lovely soul explain > > why > > these lines are there and then maybe teach me how to get rid of them? > > > ------------------------------- > To unsubscribe from the list, please send an email to > [email protected] with the word 'unsubscribe' without > the quotes in the subject and the body of the message > -- Jennifer McKemie www.mckemie.org

Jennifer, The <a> link needs to be around the <img> tag, and the <figure> tag is the outer container. I also noted a similar problem associated with the email image; though this was caused by line-breaks between the <a> and <image> tags. Just put them inline to fix it. While on the subject of the images, I noted some odd behaviour, i.e. the right side becoming hidden when a:hover {transform:scale(1.1)} came into play. But I'll start by suggesting you remove the <center></center> tags from around the first <div class="col1"> and replace as below:- <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1" style="text-align:center"> In the styles add after img:hover - a.two img { margin-left:-25px; } ... this will correct the existing right-hand offset of images. Now, go back down to your email image tag and change the content to:- <p><a class="two" href="mailto:[email protected]"><img src="http://freepages.genealogy.rootsweb.ancestry.com/~mckemie/graphics/mckonsgmail.png" style="width:300px;height:50px;margin:5px 10px -10px 15px" title="Drop me an email to say hi!"></a> ... which will position the image correctly. If you want to, try adding after the #search CSS, the following:- #search:hover { background:#669594; } ... the color I chose is that of the center image text, to differentiate the Search Box from the links on the same line. Barry --------------------- On 21/11/2015 13:50, Jennifer McKemie via wrote: > > And the little lines between, that was because the anchor needed to > be > before the figure? (the figure is a container? is that the right > term? is > this why?)..that's good to know. I won't make that mistake again. >