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 :)
Related
I'm new to CSS. I have copied a CSS from existing code and changed as below:
.feedback_h1 {
width: 100%;
float: left;
margin: 0px;
font-family: Arial;
font-size: 12px;
font-width: 400;
color: #000000;
margin-bottom: 15px;
}
<div Class="feedback_h1">
We will use only personal information. Our <a href="https://example.com" target="_blank">privacy
policy</a> agreed?
</div>
Right now I'm getting result as below:
We will use only personal information. Our
privacy policy
agreed?
However, I'm expecting a result like (in one line) :
We will use only personal information. Our privacy policy agreed?
I think, I need a right alignment (as left is aligned properly) OR
Am I missing something in CSS? What additional attribute can I consider in CSS to make this in a single line?
Is VS 2013 provides a designer view to align cshtml page?
It seems as though your <a> anchor element might have a display of block. This will cause the words wrapped between the anchor elements to have a width of 100% by default.
Try putting the following in your css
.feedback_h1 a {
display: inline-block;
}
<a> elements are display: inline by default, so not sure why it might be like this. But from the code, that seems to be the most obvious reason your code is having this result.
To figure out what's going on, I would suggest using your browser's inspector tools and directly inspecting the element. It usually helps with debugging to look at the CSS styles applied to an element, and test by unchecking them, or changing them, to see the live effect of this on your site.
I've made a sign up form with a submit button at the bottom. When deploying the code on the website, the button appears to have an unwanted grey background colour but only in a WordPress article. When tested outside WordPress, it appears fine. It seems WordPress changes it for some reason. Does anyone know why this might be?
This looks like an issue with specificity. In CSS, if you have not given style to your button element, it will inherit the style of the parent element. For example: If your "article" class contains a style for button elements...
.myArticle button {
background-color: #232323;
color: black;
}
Your button in that article, if not given its own id/class will receive that style. To change this, simply give your button its own id/class.
For example:
#myButton {
background-color: "color";
color: "color";
}
Furthermore, looking at the image you linked to. The reason the two buttons are styled differently may be to do with the input type. In CSS you can also select inputs by attribute. Example:
.myArticle input[type=submit] {
background-color: #232323;
color: black;
}
Either way, I would just consider giving the button you're having trouble with, an ID. From there you should be able to manually style it. ID's are one of the most specific selectors, no styles should overwrite that. Hopefully I've understood your question correctly, and this helps.
Why is the icon still visible even with display: none?
.toc.item {
display: none;
}
<a class="toc item"><i class="sidebar icon"></i></a>
In addition to #GCyrillus I want to suggest right clicking the icon and choose "inspect element" in the browser. Look for your code. If it's striked through something else is overwriting your code. Search for a display that's not striked through to see what is messing it up. If you can't find your code the css file is not properly linked.
If you're having trouble overriding the code that's overriding yours in the first place, you might want to add !important to your code.
display: none !important;
The code provided here works. (you can see that by clicking run snippet)
My guess is you have not posted the full contents of your .css file and that you have another css entry contradicting what you are doing here.
Nothing wrong with your code. Check if your CSS is correctly linked to your document or if another rule is overriding it.
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>
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