Currently working with a website, and I'm running into a weird issue. The code at fault is this:
The style sheet behind the <ul>, <b>, and <li> tags looks like so:
ul.secretariat {
list-style-type: none;
font-style: italic;
font-size: 12pt;
text-align: center;
}
li {
margin-bottom: 25px;
}
<ul class="secretariat">
<li><b>Item one</b> Faculty Advisor</li>
<li><b>Item two</b> Secretary-General</li>
...
</ul>
I am well aware that the majority of those don't affect the text; I included them to show that the CSS isn't the culprit (I don't think so, anyway. I'm no expert on HTML, someone just asked me for a favor). The issue I'm having is that in the webpage, the first item in the list has a background color that I can't get rid of. If I inspect element, I find something even stranger; a style has appeared in the <li>! I don't know where it's coming from. I've Ctrl+F'ed ever file in the site and can't find that text anywhere. Overwriting with style = "background: none" doesn't seem to do anything, (I don't know if that's valid, I can't find much documentation for creating an empty background) so I would really appreciate any help I could get on this small but annoying issue.
In order to find the code that is messing with your elements style attribute, you can:
Select the element in chrome dev tools
Toggle Break on Attribute Modification
Refresh the page
Execution will pause in the violating code
Since your question is very broad it is very difficult to see where the change is taking place, however this JQuery should fix the issue, add it to the bottom of the page, right before the closing </body> tag, see fiddle http://jsfiddle.net/c5moax9h/1/
<script>
$(document).ready(function() {
$('.secretariat > li').each(function() {
$(this).css('background-color', 'inherit');
});
});
</script>
Related
In Blazor razor page if I place an HTML anchor such as
My Text
the text doesn't show until the mouse is moved over it.
I have worked around this by making it a Button.
Is there any solution to this or or better linkage component to use?
I cannot reproduce this in a new project.
The behaviour seems to suggest this might be a CSS problem. To confirm this, try giving your a an id and set a specific style
#tester {
visibility: visible;
display: inline-block;
color: white;
background-color: red;
font-size: 1rem;
}
Then
<a id="tester" href="http://example.com">My Text</a>
When you run the app you should now hopefully see the link. Right-click it, and select "Inspect Element", then look down the CSS rules for that element for anything that has a strike-through font (meaning it has been overridden by a more specific rule).
One of these should be something hiding your element. Once you've found the culprit, kill it :)
We have had a site re-designed by a company who also maintains and hosts it, as well as providing us with our CRM system. The issue I am facing is they add a bit of a backlink to the footer, which I am unable to edit as its not part of the page until the server generates it.
I would like to use On Page CSS to style this to white, or completley remove it. Either is fine
<span style="width: 100%; text-align: center; display: block; color: #999999; font-family: verdana; font-size: 7pt;margin-bottom:4px;">Powered by <a style="color: #999999;" href="http://www.prospectsoft.com/ecommerce" target="_blank">ProspectSoft eCommerce</a> and <a style="color: #999999;" href="http://www.prospectsoft.com/crm" target="_blank">CRM</a></span>
The above is the code I can see when I look at the source of the page in Firefox. I cannot see this code in the editor they provide, however I can edit the css files.
Is it possible to use on page CSS to style this out?
Well in my mind with pure CSS, no since there doesn't seem to be something unique to reference it by.
Alternate Solution:
If you can use Jquery it should be relatively easy though.
Do following in head:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$().ready(function () {
$('footer').child().hide();
});
</script>
Depending on the build of the page you should be able to isolate that HTML element. For instance, if that span is the only element in the
<footer>
tag, you could simply use:
$('footer').hide();
Note: They may already be referencing jquery, which means you could just do the code.
One More:
$().ready(function () {
$("a:contains('ProspectSoft eCommerce')").parent().hide();
});
Will delete all parents of anchor tags that contain that text though, so be careful.
EDIT:
$("span:contains('Powered by')").hide();
In line CSS will typical override stylesheets declared in the document head.
If you find certain properties remain stubbornly unaffected, try using the "!important" modifier.
Example:
color: #ff0000 !important;
Beyond this, I can't give you any further advice given that you haven't specified exactly what your problem is.
Not good looking but works:
div span, span a { color: #FFF !important; }
Bad thing is you would have to set the color to all other similar nests "div span" and "span a"
I have this blog which I give support from time to time for a client. It uses those dynamic views from blogger. My task was to change the blog's header and insert my client's logo.
I know how to do it and it is working just fine, EXCEPT that sometimes the images from the headers just don't get loaded and some elements are showed without style. The CSS for that block is not loaded for some reason. There is a similar question here: Images are SOMETIMES there . I've got the exact same behavior: The first time I open the site the header styles are there. If I reload the page, it goes away and reappears randomly as I continue to reload the page.
This happens in any browser - IE, Chrome, Firefox.... you name it. And it seems that this issue is around there since 2009, It would be nice if Google could get rid of it someday. Until there, does anyone have a clue about how to work around this problem??
Somethings to note:
There is no console errors.
The blog views work, despite of this issue.
Thanks in advance.
Edit:
How the image was inserted:
A blog post was created and the logo was uploaded in it.
I copied the link from this post.
Custom CSS was inserted using the "Add CSS" option, in MODELS->ADVANCED->ADD CSS. (this is a literal translation, I'm getting it from a language other than English)
The <h1> was edited in order to hide the text and show the logo as a background image. Like so:
background: transparent url('http://1.bp.blogspot.com/-IWokMKhUVbg/UaCJ_ZULa2I/AAAAAAAAAs4/908V5umDsLM/s1600/myfakelogo.png') no-repeat scroll 13px 5px;
float: left;
margin-left: 73px;
margin-top: 10px;
text-align: left;
text-indent: -99999px;
width: 420px;
The <h3> tag was hidden using display: none;
Note that this is not a CSS problem because it actually works. The issue here is that it SOMETIMES FAILS. So a workaround would be, perhaps, changing the way I upload the Image. Or maybe not because the styles are not being loaded either, not only the images...
Go to Dashboard, select Template from the pulldown menu, and Edit HTML. Then scroll down until you see the following lines at the bottom of the template:
<script language='javascript' type='text/javascript'>
setTimeout(function() {
blogger.ui().configure().view();
}, 0);
</script>
</body>
</html>
Change the timeout value from 0 to 1000:
<script language='javascript' type='text/javascript'>
setTimeout(function() {
blogger.ui().configure().view();
}, 1000);
</script>
</body>
</html>
Credit for this trick
It's an easy question and I've done it several times before, but for some reason, it's not working this time. I have an image and when a user hovers it, a description should show.
HTML:
<div class="description custom">
<a class="description_help_text" href="">
<img src="../../misc/help.png">
<span>Bla bla bla.</span>
</a>
</div>
CSS:
div.description a.description_help_text span {
display: none;
}
div.description a.description_help_text a:hover span {
display: block;
}
But for some reason, it's not working. I'm guessing some kind of stupid syntax I'm overlooking right now.
And a second question, is it possible to use a a-tag without linking it? So a user can click on it as much as he wants, but with no actions from the browser?
I think the latter CSS block should be
div.description a.description_help_text:hover span {
display: block;
}
For the links without action I recommend using
link
Your CSS should work fine, so my guess is that you have a parent class somewhere which is affecting it. Try looking through the ascendent styles in Firebug.
Re. your second question, you can supply no href value to an anchor element, but this may still cause the page to jump when the link is clicked, and IIRC it is not valid HTML. An alternative is to link to javascript:void(0);, although this is rather ugly IMO.
The only way to fully prevent any link behaviour is to create a link handler for the element in javascript and place event.preventDefault(); within it.
This seems to work for me: http://jsfiddle.net/qVK6f/
to answer your second question at least, try:
click
Edit: closing anchor fixed. This issue exists when testing on the following browsers:
Google Chrome
Firefox 3.5
Safari
Works with no problems on IE 8
I'v a really weird problem here. In short, take a look at the following html:
<a href="login_page.html" class="img">
<span class="img_holder">
<img src="images/columnists/mike_zeisberger248.jpg" onerror="this.src='default.jpg'"/>
</span>
<span class="btn">track him</span></a>
Here's the img_holder css class:
.img_holder{
border: 1px solid #c8c8c8;
display:block;
background:#fff;
height: 100px
}
and the img class:
.img{
_margin:0 12px 12px 0;
}
Now, the problem is that clicking the image nested inside the anchor tag doesn't take you to its href link (thought, the href link shows in the status bar when hovering over the image, and opens perfectly fine when opening in new tab).
Any ideas?
Some browsers have issues with anchors that are display: inline (the default) containing elements that are display: block.
Add display: block to the ruleset with the .img selector.
Also see http://validator.w3.org/ — it makes a good first pass to find the low hanging fruit of QA issues. Your sample code seems to have some errors that it would pick up.
Well, there area few obvious problems that spring out; one is the / before your onerror, and the second is that the <a> in question doesn't seem to be closed.
Apart from that, there doesn't seem to be any obvious reasons why it wouldn't work; perhaps a more complete post of source code is in order?