Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 178
  • Last Modified:

Odd graphic or character appearing in mouseover of navigation

On this test page:
http://www.berksfoods.com/test

Mouseover the Family Fun button in the main navigation. There is a small line appearing towards the bottom-right of the button (see attached screenshot). I cannot tell what this is, or why it is appearing. Tried to use Firebug and other browser inspectors, but wasn't able to focus on that element.

Would appreciate any advice figuring out what that thing is, so I can remove it?

Thank you!
1.jpg
0
Brad Bansner
Asked:
Brad Bansner
1 Solution
 
dimmergeekCommented:
The line is is every one of your menu options except the last one. Which style sheet has the styles for that menu structure?
What changes were made to that styling between live and test versions?
0
 
jtwcsCommented:
That line is the background image applied by the following declaration.  Line 902 of style.css

.navigation li a {
	color: #50575E;
	padding: 15px 18px 35px 18px;
	text-align: center;
	font-family: "Open Sans";
	font-size: 12px;
	font-weight: 500;
	background-image: url(assets/img/navigation_divider.png);
	background-repeat: no-repeat;
	background-position: center left;
	display: block;
	transition: all 0.3s;
	-webkit-transition: all 0.3s; /* Safari */
	*text-transform: uppercase;
}

Open in new window

0
 
Dan CraciunIT ConsultantCommented:
Seems to be font-related. If you change
body{font-family: franklin_gothic_fsMdCn;}

to
body{font-family: Arial;}

the line disappears.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Julian HansenCommented:
The problem is on line 902 of styles.css
Remove this line
background-image: url("assets/img/navigation_divider.png");

Open in new window

From here
.navigation li a {
  background-image: url("assets/img/navigation_divider.png");
  background-position: left center;
  background-repeat: no-repeat;
  color: #50575E;
  display: block;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 500;
  padding: 15px 18px 35px;
  text-align: center;
  transition: all 0.3s ease 0s;
}

Open in new window

0
 
Julian HansenCommented:
My above post mostly repeats jtwcs' comment here 40022927
0
 
Brad BansnerWeb DeveloperAuthor Commented:
Awesome, thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now