Small Grey dot on my Images

  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

I have some PNG images I am using as navigation buttons. The images have transparent backgrounds but when I view the html page they are one they have a small grey dot in the top right corner.

Is this something that needs to be fixed in my css? I've already added background:none; to their div tag.

I've never ran into this before. I'm viewing in chrome and my users will be using chrome specifically.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I am sure this is not the problem, but in the past when I had this issue, it was actually dirt on my screen ;)

Anyway could you post the link so that we can see, I could probably figure it out if I could see it happening. Does the small dot show in other browsers, or just Chrome?
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

Yeah, I just tested in IE and it shows there too. I was able to change the color of the dot with css but I don't think I've ever had this happen before. The application I'm making runs on an intranet and I have no web space I can access from here. I attached a screen shot of the navigation bar.

js:
Code: [ Select ]
function mynav (page) {
    
    var myPages = new Array("home","build","books","f.a.q");
    var myPageimg = new Array("images/home.png","images/build.png","images/books.png","images/faq.png");
    var myPageimg_active = new Array("images/home_active.png","images/build_active.png","images/books_active.png","images/faq_active.png");
    var myTooltip = new Array("Return to Homepage","Create a Book","Manage Books","Frequently Asked Questions");
    var pageLinks = new Array("index.php","build.php","books.php","faq.html");
    
for ( var i=0, len=myPages.length; i<len; ++i ){
        if (myPages[i]==page) {
            document.writeln(' <li class="current_page_item"><a href="'+ pageLinks[i] +'" target="_self"><img src="'+ myPageimg_active[i] +'" title="'+ myTooltip[i] +'" border="0"></a></li>');
        } else {
            document.writeln(' <li><a href="'+ pageLinks[i] +'" target="_self"><img src="'+ myPageimg[i] +'" title="'+ myTooltip[i] +'" border="0"></a></li>');    
        }
    }

}
  1. function mynav (page) {
  2.     
  3.     var myPages = new Array("home","build","books","f.a.q");
  4.     var myPageimg = new Array("images/home.png","images/build.png","images/books.png","images/faq.png");
  5.     var myPageimg_active = new Array("images/home_active.png","images/build_active.png","images/books_active.png","images/faq_active.png");
  6.     var myTooltip = new Array("Return to Homepage","Create a Book","Manage Books","Frequently Asked Questions");
  7.     var pageLinks = new Array("index.php","build.php","books.php","faq.html");
  8.     
  9. for ( var i=0, len=myPages.length; i<len; ++i ){
  10.         if (myPages[i]==page) {
  11.             document.writeln(' <li class="current_page_item"><a href="'+ pageLinks[i] +'" target="_self"><img src="'+ myPageimg_active[i] +'" title="'+ myTooltip[i] +'" border="0"></a></li>');
  12.         } else {
  13.             document.writeln(' <li><a href="'+ pageLinks[i] +'" target="_self"><img src="'+ myPageimg[i] +'" title="'+ myTooltip[i] +'" border="0"></a></li>');    
  14.         }
  15.     }
  16. }


html
Code: [ Select ]
<div id="nav">
    <div id="menu">
    <ul>
   <script type='text/javascript'>mynav('build');</script>
  </ul>
    </div>
</div>
  1. <div id="nav">
  2.     <div id="menu">
  3.     <ul>
  4.    <script type='text/javascript'>mynav('build');</script>
  5.   </ul>
  6.     </div>
  7. </div>


css:
Code: [ Select ]
#nav {
    background: #ccc; /* for non-css3 browsers */
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    /*background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    /*background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
    width:100%;
    height:60px;
    border-top:1px solid #242424;
    border-right:1px solid #242424;
    border-bottom:1px solid #242424;
    border-left:1px solid #242424;
}

/* menu */
#menu {
background: none;
font-weight:bold;
position:absolute;
top:85px;
padding-left:0px;
margin-left:-40px;
}
            
#menu ul li {
float:left;
}

#menu ul a {
float:left;
padding:10px;
}
  1. #nav {
  2.     background: #ccc; /* for non-css3 browsers */
  3.     /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
  4.     /*background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
  5.     /*background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
  6.     width:100%;
  7.     height:60px;
  8.     border-top:1px solid #242424;
  9.     border-right:1px solid #242424;
  10.     border-bottom:1px solid #242424;
  11.     border-left:1px solid #242424;
  12. }
  13. /* menu */
  14. #menu {
  15. background: none;
  16. font-weight:bold;
  17. position:absolute;
  18. top:85px;
  19. padding-left:0px;
  20. margin-left:-40px;
  21. }
  22.             
  23. #menu ul li {
  24. float:left;
  25. }
  26. #menu ul a {
  27. float:left;
  28. padding:10px;
  29. }
Attachments:
button_problems.jpg
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

Additionally. The images in that shot actually have a canvas background and not a transparent background, but the dot is there regardless. I'd changed the background to just a solid color and added a canvas because I thought it was due to transparency of the actual png file. I've also completely re-created the pngs on a new file which leaves me to think I have to clear this up with html/css so I posted the code that's handling those tags.
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

Actually I just changed some directories so my css didn't load on my page and so my images didn't go inline. I believe it's the bullets for the list tag. I've used this code for just inline text nav bars and the bullets just never appeared. I guess I've never used it with an img tag. Anyway how can make them disappear? Now that I know what the dot is, I should be able to get better web search results.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Thanks for all of the information, and I believe you are right, they are bullets. Please use this CSS and see if it goes away:

CSS Code: [ Select ]
#menu ul {
   list-style-type:none;
}
  1. #menu ul {
  2.    list-style-type:none;
  3. }
  • devilwood
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 436

Post 3+ Months Ago

Thank you. That simply got it fixed up. Maybe this thread will help someone in the future.

BTW, I wiped down my monitor just to make sure. :lol:

Thanks again for your help.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

When it comes to dots, I always wipe mine down first before I start concluding its my coding. It has happened before and it would be a waste of time to try to find a bug for an hour when it was just dirt on the screen, LOL ;)

Glad you are all fixed up!

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 64 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.