Solved

Odd graphic or character appearing in mouseover of navigation

Posted on 2014-04-25
6
168 Views
Last Modified: 2014-04-25
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
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 7

Expert Comment

by:dimmergeek
ID: 40022914
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
 
LVL 10

Accepted Solution

by:
jtwcs earned 500 total points
ID: 40022927
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
 
LVL 35

Expert Comment

by:Dan Craciun
ID: 40022942
Seems to be font-related. If you change
body{font-family: franklin_gothic_fsMdCn;}

to
body{font-family: Arial;}

the line disappears.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 56

Expert Comment

by:Julian Hansen
ID: 40022963
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
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 40022967
My above post mostly repeats jtwcs' comment here 40022927
0
 

Author Comment

by:bbdesign
ID: 40023021
Awesome, thank you.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question