4 Replies Latest reply on Apr 11, 2010 11:21 AM by Nancy OShea

    Black Line under Linked Image

    MediocreNinjaStudios

      Hey, I have started another website for my portfolio, consisting of many pages. Anyway, I'm mainly using CSS, but there is a little HTML for the navigation.

       

      Heres the question: When I linked the top banner image to go to the Home page (index.html), there is a random black line under the image. I gave the image and ID tag in CSS and made sure that border:0;

       

      Please respond, I desperatly need this for a school project and it will look random if there is a weird line in the middle of the page. Thanks in advance!

        • 1. Re: Black Line under Linked Image
          John Waller Adobe Community Professional & MVP

          There are so many possibilities that we can't really help you without seeing the page.

           

          Can you provide a link?

          • 2. Re: Black Line under Linked Image
            MediocreNinjaStudios Level 1

            Uh, sorry, I don't have an actual domain. It's just for a project. If you know a good website to host files for free, I can post it there. Thanks for the reply

            • 3. Re: Black Line under Linked Image
              Nancy OShea Adobe Community Professional & MVP

              Try adding this to your CSS code.

               

              a img {border:none}

               

              If that doesn't help, you'll need to post a URL to your test page.  Ask your internet service provider if free webspace comes with your account.

               

              Otherwise, post your HTML and CSS code into a reply.  Use double arrows >> syntax highlighting > plain.

               

              This is what code looks like
              

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              • 4. Re: Black Line under Linked Image
                MediocreNinjaStudios Level 1

                Here is the CSS code

                @charset "utf-8";
                /* CSS Document */
                html {
                     background-color: #F1D66B;
                     background-image: url(../Images/Background.png);
                     font-family: "Showcard Gothic", "Cooper Std Black", Calibri, serif;
                     word-spacing: 6px;
                }
                body {
                     background-color: #F9ECB9;
                     margin: 0 auto;
                     width: 700px;
                     padding: 20px;
                     word-spacing: 0px;
                }
                h1 {
                     font-size: 38px;
                     text-decoration: underline;
                     font-variant: small-caps;
                     font-weight: bold;
                     margin-bottom: 40px;
                }
                h2 {
                     font-size: 28px;
                     text-decoration: underline;
                     font-variant: small-caps;
                }
                h3 {
                     margin-top: 20px;
                     font-size: 16px;
                     background-color: #F1D66B;
                     padding: 15px;
                     padding-top:40px;
                     padding-bottom:40px;
                     text-align: center;
                     margin-top: 100px;
                     word-spacing: 0px;
                     font-family: Georgia, "Times New Roman", Times, serif;
                     font-weight: bolder;
                     font-variant: small-caps;
                }
                h4 {
                     font-size: 50px;
                     text-decoration: underline;
                     font-variant: small-caps;
                     font-weight: bolder;
                     margin-left: 0px;
                     margin-right: 0px;
                     margin-top: 20px;
                     margin-bottom: 20px;
                     text-align: center;
                }
                p {
                     font-size: 20px;
                     font-family: Georgia, "Times New Roman", Times, serif;
                     text-indent: 40px;
                     margin-bottom: 70px;
                }
                ul {
                     font-family: Georgia, "Times New Roman", Times, serif;
                     font-size: 20px;
                }
                strong {
                     font-weight: 1200;
                }
                a {
                     text-decoration:none;
                }
                a:link {
                     color: #000;
                     text-decoration: underline;
                }
                a:visited {
                     color: #000;
                     text-decoration: underline;
                }
                a:hover {
                     color:#846B0D;
                     text-decoration: underline;
                }
                div{
                     bakcground-color: #7C9614;
                     text-decoration: underline;
                }
                #logo{
                     border-bottom: 10px;
                }
                h5 {
                     text-align: center;
                     margin: 0 auto;
                }
                a img{
                     border: none;
                     text-decoration: none;
                }
                

                 

                And here is the HTML for my index.html page

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Spinoff - Home</title>
                <link href= "CSS.css" rel="stylesheet" type="text/css" />
                <script type="text/javascript">
                <!--
                function MM_preloadImages() { //v3.0
                  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
                }
                
                function MM_findObj(n, d) { //v4.01
                  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                  if(!x && d.getElementById) x=d.getElementById(n); return x;
                }
                
                function MM_nbGroup(event, grpName) { //v6.0
                  var i,img,nbArr,args=MM_nbGroup.arguments;
                  if (event == "init" && args.length > 2) {
                    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
                      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
                      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
                      nbArr[nbArr.length] = img;
                      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
                        if (!img.MM_up) img.MM_up = img.src;
                        img.src = img.MM_dn = args[i+1];
                        nbArr[nbArr.length] = img;
                    } }
                  } else if (event == "over") {
                    document.MM_nbOver = nbArr = new Array();
                    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
                      if (!img.MM_up) img.MM_up = img.src;
                      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
                      nbArr[nbArr.length] = img;
                    }
                  } else if (event == "out" ) {
                    for (i=0; i < document.MM_nbOver.length; i++) {
                      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
                  } else if (event == "down") {
                    nbArr = document[grpName];
                    if (nbArr)
                      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
                    document[grpName] = nbArr = new Array();
                    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
                      if (!img.MM_up) img.MM_up = img.src;
                      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
                      nbArr[nbArr.length] = img;
                  } }
                }
                //-->
                </script>
                </head>
                
                <body>
                <h4><a href="index.html"><img src="../Images/Logo.jpg" name="logo" width="700" height="200" border="0" id="logo" /></a></h4>
                <table border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="230"><a href="gameshome.html" target="_top" onclick="MM_nbGroup('down','group1','Games','',1)" onmouseover="MM_nbGroup('over','Games','','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Games.jpg" alt="" name="Games" border="0" id="Games" onload="" /></a></td>
                    <td width="230"><a href="videoshome.html" target="_top" onclick="MM_nbGroup('down','group1','Videos','',1)" onmouseover="MM_nbGroup('over','Videos','','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Videos.jpg" alt="" name="Videos" border="0" id="Movies" onload="" /></a></td>
                    <td width="219"><a href="photoshome.html" target="_top" onclick="MM_nbGroup('down','group1','Photos','',1)" onmouseover="MM_nbGroup('over','Photos','','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Photos.jpg" alt="" name="Photos" border="0" id="Photos" onload="" /></a></td>
                  </tr>
                </table>
                <h2>Welcome!</h2>
                <p>Welcome to the home page of <strong>Spin-Off</strong> media! Hey, thanks for coming! As you can see, we have many games, videos and photos for you! We hope you enjoy your stay, and come back! Well, what are you waiting for? Get clicking!</p>
                <h2>Submissions</h2>
                <p>We welcome your submissions here at spin-off! Got a game you want other people to play? Think some people will get a good laugh at your home video? Have a photo you think some people will get a kick out of? Send it to us HERE and we will review it before posting. Please, put the file in the attachment, as well as any title and description you want in the body.</p>
                <p><strong>*NOTE* </strong>Any submissions that do not pass will not be notified, in fact, nobody will be notified. If you see it on the site, congratulations, you have something ahead of you kid. If not, keep trying!</p>
                <h3>Not-So-Copyrighted - Spinoff Media<br />
                  <a href="index.html">[home]</a> <a href="gameshome.html">[games]</a> <a href="videoshome.html">[videos]</a> <a href="photoshome.html">[photos]</a><br />
                  <a href="mailto:eric-bentley@hotmail.com?subject=Spin-Off">[contact]</a> <a href="legal.html">[legal]</a> <a href="mailto:eric-bentley@hotmail.com?subject=Submission">[submit]</a> <a href="about.html">[about]</a><br />
                NSFW? Tell us <a href="mailto:eric-bentley@hotmail.com?subject=NSFW">HERE</a> and we will respond</h3>
                </body>
                </html>
                

                 

                The little black line happens right under the first h4