I have an element like:
<a id='a_id' class='a_class'>Next</a>
The element shows in green, underlined.
When I hover over the element, it changes to a lighter green, not underlined (which is fine).
When I click, during the mouse button down nothing changes.
When I release the mouse button, the element changes briefly showing a green background and goes back to lighter green, not underlined.
How can I change the CSS to prevent the change when I release the mouse button?
I tried the following CSS:
.a_class {
cursor:pointer;
outline:none;
text-decoration:none;
background:#fff;
}
Thanks.
UPDATE #1 - using .a_class:active
I added the following CSS:
.a_class:active {
outline:none;
text-decoration:none;
background:#fff;
color:red;
}
I added the color:red to confirm the CSS was being applied.
When I press down the mouse button, the text color changes to red. And when I release the mouse button, the background flashes in green for a second.
Any other suggestion?
Thanks.
UPDATE #2 - adding full CSS of the link
When I inspect the page with firebug the element has the following CSS:
.a_class {
background:#FFFFFF;
cursor:pointer;
outline:none;
text-decoration:none;
}
a {
color:#24890D;
text-decoration:none; <- crossed out
}
.entry-content a, .entry-summary a, .page-content a, .comment-content a {
text-decoration:underline; <- crossed out
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0; <- crossed out
padding:0;
vertical-align:baseline;
}
Related
Hello I'm just starting with css and I see people in videos and such already have css code written before they write a single line of code like:
body {
padding:0;
margin:0;
}
this is like a really simple example they write like body,div,table..etc like the a:active and stuff like that but like in like really long code they even add a selected attribute so when you selected any words on the page the background and color changes I know this depends from one developer or another but is there a really basic piece of code that I can start with?
People prefer different ways of working with CSS, there is no right or wrong way. But there is certainly ways to get a good head start with your browser resets.
There are a few ways to play it, you can either use a reset or normalise your code to fit the different browsers.
A reset will make everything behave in streamlined way across each browser, whereas normalising your css will make browsers render all elements more consistently and in line with modern standards.
Rememeber there is no right or wrong way to approach this.
Eric Meyes CSS Reset
Normalize.css
it is all just style and opinion, but this is often used and resets just about everything (so you'd have to create all your styles yourself, instead of using browser defaults).
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
I understand about CSS specificity (a bit), but I can't seem to understand a problem I am currently having.
I have a CSS Reset file, which I include before any other CSS files in my page. This file contains the following
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
Then, in my own css file (which is added after the reset), I have the following
ol, ul {
margin-bottom: 20px;
padding-left: 25px;
}
"OL" and "UL" are both single elements in the reset and custom css files - that is, neither of them have any prefix - so I would expect my own css to override the css. For some reason it doesn't.
I have been temporarily appending !important to my custom CSS, but I need to do this for almost every rule I am writing.
What am I missing?
I would like to do something like this....
body{
display:none;
}
#signIn_form_section{
display:inline;
}
Of course this does not work but I am looking for something similar. Basically I want to whitelist tags that are allowed to display.
Added html in jfiddle....
Link
Basically I just want the form and non-hidden input fields to show up.
I have created a working CodePen example of how to do this. You need to be specific about the tag, such as section in this example, *:not does not work properly.
HTML:
<section>
<article>
<p>I am hidden</p>
</article>
</section>
<section class="display">
<article>
<p>You can see me</p>
</article>
</section>
CSS:
section:not(.display) {
display: none;
}
You probably mean:
* {
display: none;
}
#signIn_form_section{
display:inline;
}
However, I don't believe this is a good idea... Could you please develop your requirements? Why you need to do so?
You can add a class display to elements that you want to display and do this to hide all the ones that don't have that class:
*:not(.display) {
display: none;
}
However I would question why you want to do this.
It might make more sense to add a class hidden to elements you want to hide and do this instead:
.hidden {
display: none;
}
First Set
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { display:none; }
then make a class and set it to display:block; add this class to those elements you want to show.
On Wordpress after adding italic, bold, or hyperlink elements to text, the text becomes offset from the baseline of normal text. I'm using the Elegantica theme. Is there a solution for this?
My site: http://www.lfvaa-sample.com/
Examples of this problem can be found on the home page at the bottom with the hyperlinked text "Learn More" and on the LinkedFlow page under resources with the italicized text.
in the case of your "learn more" links at the bottom, the culprit appears to be
vertical-align: middle;
in your style.css
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-family: Helvetica,Arial,sans-serif;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: middle;
}
You can see when I turn that rule off in firebug, the text aligns properly. Tested with the italic on the other page and the same rule is affecting that text too.
Using html and css for IE7, how do I position a html table at the very top of the screen without the top border that is automatically generated?
I am developing in vs2008.
You are probably seeing the default margins of the document body.
Set the margin to 0 on the body, preferably using css.
I recommend using a reset css to set the default style for your pages in every browser, there are penty on the net. Sample:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
Remove the border on your table.
CSS approach:
table / #id-of-your-table / .class-of-your-table { border: 0; }
Inline style approach:
<table style="border: 0;"> ... </table>