Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Odd graphic or character appearing in mouseover of navigation

Posted on 2014-04-25
6
Medium Priority
?
173 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 60

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 60

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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

916 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