?
Solved

Odd graphic or character appearing in mouseover of navigation

Posted on 2014-04-25
6
Medium Priority
?
176 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
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 2000 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 61

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 61

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

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.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

616 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