I am trying to build a web app using as starting point the sample ASP.NET Web Application that VS2010 makes available in the Add Projects. Specifically, I am trying to use the tabbed menu, and change its behavior from the default. In particular, I am trying to change the tab colors. Well, this works in the designer. I can make the tab background white and the foreground red, but when I run the app it displays the tabs in the original drab colors. It is ignoring the changes I am making to the stylesheet, in other words. Or so it appears at least. Is there something I am missing here?
What I want is here:
This is what I get, despite my changes to stylesheet:
Here is the modified CSS element, which the designer is conforming to, but at run time is being ignored apparently:
div.menu ul li a, div.menu ul li a:visited
{
background-color: #ffffff;
border: 1px #4e667d solid;
color: #ff0000;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
I am stumped.
Have you tried refreshing the browser/ clearing the cache?
Related
Recent Posts Widget Extended (RPWE) generates the post title as a link. On one particular page I'd like to disable the link around the title text. No class is generated by the widget for the link but there's a rel, which should be specific enough. I've added the following CSS:
a[rel="bookmark"] {
pointer-events: none;
cursor: default;
text-decoration-line: none !important;
font-size: 18px;
color: #000000;
}
Everything worked except removing the underline. It looks like I'm not being specific enough?
To remove underline you can use
text-decoration: none!important;
if still doesn't work for a element could be the text-decoration is applied at a child you could try:
a[rel="bookmark"] *{
text-decoration: none!important;
}
If doesn't work means there is another rule with !important and you have to use the browser debugger tool.
Use the debugger tool in your browser to find why text-decoration:none; is being overridden. Usually there's a more specific selector being used. However in this case a wordpress style sheet was also using a border under all links:
box-shadow: 0 1px 0 0 currentColor;
and this needed disabling too by selecting the link and styling with
box-shadow: none;
I've added some custom CSS code to a Wordpress.com theme to alter link formatting. (I'm a beginner, but I attempted to research this and found some code that looked reasonable.)
Chrome is getting it about 90% right and FF about 10% right. Is this inevitable and I should revert to theme defaults, or is there something I can do differently to make this change work in common browsers?
To be more specific, "border: none" is working in both browsers, but the custom color for the link is usually missing in FF--which means no one but me can tell it's a link. Even in Chrome it's only usually the right color. And, the color I set for "active" isn't displaying at all. Meanwhile, the block quote change is rendering in both browsers.
All I added was this CSS (added in the edit window they provide which by definition means it's at the end of the total CSS for the page, so that should make it override or inherit, I thought).
div.entry-content a:link {
color: #2C60BA;
text-decoration: none;
border: none;
}
div.entry-content a:active {
color: #3A93BC;
text-decoration: none;
border: none;
}
blockquote {
float: none;
width: 24em;
margin-left: 2em;
}
Thanks for any comments.
Have you tried to remove the :link, and just have:
div.entry-content a {
color: #2C60BA;
text-decoration: none;
border: none;
}
Also, just in case your theme has overrides for visited links, you might also want to include a rule for visited as well to be sure:
div.entry-content a, div.entry-content a:visited{
color: #2C60BA;
text-decoration: none;
border: none;
}
Bryant provided the key insight in his first answer and my problem, after further experimenting, is now fully solved (see commments). I'm new here and not sure how to mark this resolved, but am guessing this is how to do it. Thanks again.
The superfish menu here does flicker when moving the mouse pointer along the border: http://www.kine-stammheim.ch/
The css file is here: http://www.kine-stammheim.ch/css/navigation/superfish.css
My guess was that the hover item would have a different size than the standard and this is why it would flicker. But I cannot find the issue...
Who can help?
The problem was being caused by the margin you had on the hover state.
This is what I changed
.sf-menu li {
margin: 0px;
padding: 5px; /* I added your 5px margin as padding to the li that contains the a. This gave the same effect without confusing the hover state */
list-style: none;
float:left;
background: #536bff;
}
.sf-menu a {
line-height: 35px; /* I removed 10px of line-height since the li now has a 5px padding */
padding: 0 15px;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
display: block;
}
body#home a#homeNav,
body#ikmethode a#ikmethodeNav,
body#uebermich a#uebermichNav ,
body#contact a#contactNav,
body#anwendung a#anwendungNav,
.sf-menu > li > a:hover,
.sf-menu > li.current > a,
.sf-menu > li.sfHover > a {
background: #8398ff url(../../images/bg-top-a-active.png) no-repeat center bottom;
height: 35px;
line-height: 35px;
border-radius: 5px;
text-decoration: none;
}
Here is a working JSFIDDLE to show you the end result.
Have you tried hoverIntent plugin?
Supports the hoverIntent plugin.
Superfish automatically detects the
presence of Brian Cherne’s hoverIntent plugin and uses its advanced
hover behaviour for the mouseovers (mouseout delays are handled by
Superfish regardless of the presence of hoverIntent). Using this is
only an option, but a nice one. The examples on this page are using
hoverIntent. If for some reason you want to use hoverIntent on your
page for other plugins but do not want Superfish to use it you can set
the option disableHI to true. Important note: As of v1.5.1 you must
use the updated version (r7) of hoverIntent which supports event
delegation.
hoverIntent is a plug-in that attempts to determine the user's
intent... like a crystal ball, only with mouse movement! It is similar
to jQuery's hover method. However, instead of calling the handlerIn
function immediately, hoverIntent waits until the user's mouse slows
down enough before making the call.
Why? To delay or prevent the accidental firing of animations or ajax
calls. Simple timeouts work for small areas, but if your target area
is large it may execute regardless of intent. That's where hoverIntent
comes in...
I am experiencing a very strange issue. I have developped an application locally and everything works file. But on the production server i have several problems. The most annoying is the Navigation Menu that changes from horizontal to vertical after login.
site.Master
<asp:Menu ID="NavigationMenu"
runat="server"
cssclass="menu"
EnableViewState="false"
IncludeStyleBlock="false"
Orientation="Horizontal"
StaticDisplayLevels="1"
staticsubmenuindent="10"
target="_blank"
MaximumDynamicDisplayLevels="1"
Enabled="False"
Visible="False">
Site.css
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:20%;
z-index:9999;
}
div.menu
{
padding: 4px 0px 4px 8px;
z-index:9999;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: 20%;
z-index:9999;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
z-index:9999;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
z-index:9999;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
z-index:9999;
}
The css i use is the default.
I searched the net but no solution is proposed. Is it a server issue?Is it my code?
There is this thread with the exact problem. http://forums.asp.net/t/1762140.aspx/1?Odd+menu+problem+after+deployment , which doesnt propose a solution for the problem
Thanks
In all likelihood, the javascript which adds the class is not running on the page
There could be a number of reasons
It wasn't deployed properly.
The path is incorrect on the live server (are you in a different directory layout - eg /JavaScript/ instead of /myapp/JavaScript/?
NoScript or another addon is blocking javascript (browser-specific)
Something in the JS breaks on live and prevents execution before it gets to the relevant code
To track the problem down - Go to the net tab in firefbug and look at the javascript - does it all load with an HTTP 200 (Ok) ? Any 404/500s?
Try disabling all addons in your browser / use different browsers - same problem?
Open up the Script tab in firebug or the JavaScript console (CTRL Shift K in Firefox)
Reload your page and see if any errors/warnings appear.
Edit your answer with the results of the above and we'll see what we can do.
EDIT:
With regards to the 403/Forbidden - WebResource.axd is where the .Net Control-specific JS lives so this is almost certainly your problem. To make it more fun, .axd's aren't usually real files - they're HTTP handling extensions - see here and here for more information. Check your web.config - did the appropriate handlers get set in Live? It should be something like...
<add path="WebResource.axd"
verb="GET"
type="System.Web.Handlers.AssemblyResourceLoader"
validate="True" />
If you've got an entry like that, can you edit your question to include it exactly? If not, try adding it
Possible fix here
Does the live server have the same version of the framework/controls installed as your development machine - Make sure it has!
Another thing to be aware of is that if you manually deploy a website, the files are usually owned by you, not the webserver - This can sometimes mean the webserver can't read the website to serve it. I doubt that's the problem here but it's something to be aware of in future. (To check, the website user is specified on the application pool for the site in IIS Manager).
This is a problem that I've been having for quite some time now. For some reason, the CSS rules for my links aren't working properly. As far as I can tell, when using Chrome's Inspect Element tools or FireBug, the links appear to be styled correctly, but are displayed improperly. I've added separate classes to make separate styles of links, and even tried separating a:visited, and this fixed the basic issue for each class, but the normal a tag still displays visited links the wrong color. the CSS for my links has been below.
a:link, a:hover, a:active
{
text-decoration: none;
color: #FF8C00;
background-color: transparent;
}
a:visited
{
text-decoration: none;
color: #FF8C00;
background-color: transparent !important;
}
a.search:link, a.search:visited, a.search:hover, a.search:active
{
font-family: helvetica-light;
font-size: 19px;
color: #999;
text-decoration: none;
background-color: transparent;
}
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover
{
text-decoration: none;
color: #E3E3E3;
font-family: helvetica-light;
font-size: 20px;
background-color: transparent;
}
For some reason, even though a:link/etc have "color: #FF8C00" they show up as black or dark gray when visited. Active, link and hover all work normally. All HTML is written as stuff
Have you tried changing;
color: #999;
Into;
color: #999 !important;
This will tell the CSS parser to overwrite the #FF8C00 color to #999.
Changing the order of the CSS blocks could also give you the expected result.
Sometimes getting the look you want might require some trial and error. :)
A couple of things you could try
clear your browser cache
Make sure no other css files are been called
Go to w3c html validation site
I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an "a:visted" declaration had ended up inline with an ID declaration and didn't break the CSS, but caused the links to not appear properly.