Solved

Odd graphic or character appearing in mouseover of navigation

Posted on 2014-04-25
6
166 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 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 34

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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 54

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 54

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
alert before form submission 6 41
Host asp.net pages 5 35
Menu Selected on Chrome for Windows 13 19
Show tab when enter div and change underline color 3 36
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

803 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