seo Question posted in
Some basic information to get you started with this can be found here.

Small line of certain color displaying below images in anchor tags – SEO

So I have uplodaded two graphics as nav buttons to my webpage. A small line of the same color as the buttons appears below and in between the two buttons. Here is a picture showing the problem.

http://imgur.com/ikYjLUE

These buttons were created in fireworks and then I saved them and linked to them in my webpage. This isnt a line that has come from a defect in one of the graphics. Spreading out the graphics with padding does not fix it as shown below:

http://imgur.com/rUX7fvI

Nor does trying to put a CSS value for the border remove it in case it was a small piece of border for some reason. I know it isnt a defect in the graphics because the two images alone on seperate webpages produce no line, sadly I can’t post screenshots of that here due to a lack of reputation (no more than 2 links).

So I do not know how to remove this annoying line when they are next to each other. This is only two buttons alone for now but it will be developed into a full webpage eventually. These buttons will act as the nav bar so I need them close and this line to be gone! These buttons have an opacity increase and decrease effect when rolled over which was created in jQuery. I viewed these buttons in Chrome for the screenshots and I havent tried other browsers but I need this line to be removed from all browsers. Here is all my webpage code below: 

$(document).ready(function(){
	$(".nav_btn").mouseenter(function(){
		$(this).fadeTo(100, 1.0);
	});
	$(".nav_btn").mouseleave(function(){
		$(this).fadeTo(100, 0.75);
	});
});
.nav_btn{
	opacity: 0.75;
}
<!DOCTYPE html>
<html>
	<head>
		<base href="C:/Users/Adasli199/CGC project/"; target="_self">
		<link rel="stylesheet"; type="text/css"; href="code/stylesheet.css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script type="text/javascript"; src="code/jQuery.js"></script> 
		<link rel="shortcut icon" href="Assets/CGC icon.ico"/>
		<title> CGC | Template </title> 
	</head>
	<body>
		<div id="nav_bar">
			<a href="Pages/Home.html">
				<img class="nav_btn"; id="home_btn"; src="Assets/Home button.png"/>
			</a>
			<a href="Pages/SEO.html">
				<img class="nav_btn"; id="SEO_btn"; src="Assets/SEO button.png"/>
			</a>
		</div> 
	</body>
</html>

If anyone could help I would be very greatful! Thanks!

Tags:

2

Answers


  1. 0

    Add font-size: 0 to your CSS rule. The problem is your a tag is expecting there to be some kind of text, and their isn’t save for the whitespace present around your image tag. So it helpfully adds an underline to your whitespace for you. You obviously don’t want that, but there you go.

    Alternatively, you might be able to remove all the whitespace between the a tag and the img tag, but font-size:0 will save your code readability.

    Login or Signup to reply.
  2. 0

    It’s default anchor underline
    You can ‘fix’ it by removing text-decoration from your navbar links

    #nav_bar > a {
  text-decoration: none;
}
    <div id="nav_bar">
    <a href="Pages/Home.html">
      <img class="nav_btn" id="home_btn" src="Assets/Home button.png" />
    </a>
    <a href="Pages/SEO.html">
      <img class="nav_btn" id="SEO_btn" src="Assets/SEO button.png" />
    </a>
  </div>

    You also don’t need the semicolons to separate img attributes

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search