I had a link with text and an image. I don't want the image to have an underline under it but I do want the text to have an underline. Is there anyway to support this without breaking these down into two seperate links? Here is an example picture:
No, there is no way to achieve that without splitting the link into two parts.
The alternative is to put border-bottom: 1px solid #000 on to the element containing the text, however this will not behave in the same was as a native A element, with hover, active and visited states - at least not without the intervention of javascript.
You could easily do something structured like:
<a><span>text</span><img /></a>
You could then remove the underline from a and apply underlining to a span.
Demo here: http://jsfiddle.net/chrisvenus/pdrz9/
I should note that the following will not work:
img {
text-decoration: none;
}
Related
I am having a link, like the one below.
Name <sup>®</sup> title
One the screen the ® symbol also has the underline in superscript, which does not look good. Can I remove the underline just for the ® symbol and still have the same 'a' tag around both name and title?
You could remove the text decoration completely and place a border under it instead.
a {
text-decoration: none;
display: inline-block;
border-bottom: 1px solid black;
}
From a usability point of view, if you're going to place underlines under your links to denote them as links, the underline should be apparent under the entirety of the link. By removing the text decoration form the a element, declaring it as inline-block and placing a border under it, you achieve your desired results without the line floating under the ®. You can also spice up your links by changing the border to be dotted or dashed, or thickening/thinning on mouseover.
However, the most important part of this is you do not add extraneous markup for stylistic reasons.
Fiddle of it in action: http://jsfiddle.net/gs5jC/
Sadly, no, at least not with your current markup (see example). This is per the specification:
2.1. Text Decoration Lines: the ‘text-decoration-line’ property
...
Specifies what line decorations, if any, are added to the element. Values have the following meanings:
‘none’: Neither produces nor inhibits text decoration.
...
However, you can change your markup a bit to support this (example):
<span>Foo</span> <sup>®</sup>
a {
text-decoration:none;
}
a span {
text-decoration:underline;
}
I have an HTML form with a bunch of input fields (of type text and select). I am floating them such that there are two on each row. In all browsers (including IE7), everything works okay, but for some reason in IE8, whenever I click inside any of the fields or their labels, that field or a surrounding one vertically moves up or down. The position then returns to normal once I click away from the box, though then another nearby box might move. Also, not all of the textbox fields have this issue, and clicking the same textbox doesn't always cause this issue. Any ideas?
I had the exact same problem, and to fix it, I set
display:block
On the element that was jumping around and that fixed it. Hope that helps.
Problem is when you focus an input text element, your browser puts 2px border around it for focus which is shifting its position if it is contained in a tight container...
I think it is more related to having 2px border all the times. Use the same color border and your text field to have transparent borders...
Your problem is addressed on this question
StackOverflow Question when focusing an input field border 8270380
This is speculation, but since focusing in an element seems to trigger the shifting, you may have different styles applied to those focused elements. Increased margins or borders could be responsible.
Not a big deal just put:-
outline: none;
in input tags
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
display: block;
border-radius: 5px;
outline: none;
}
if you want to have a border of your own then put
input:focus {
border: 2px solid salmon;
color: #333;
}
I think your structure conflicting with your parent structure CSS (there may possible is you using third party plugin something like jQuery UI or else) do one thing just for confirmation cut or copy your conflicting code and paste out side of you parent structure or beginning of your body tag. you find the difference.
For proper help I want to review you code.
Thnx
I have a horizontal navigation bar that when one of the links are selected the link then becomes bold. However, when I click on one, the item to the right of it move position because the font gets larger thus making the width of the list item larger. Is there anyway to avoid this? I would like the text to stay in the same place. Thank you.
Two possible solutions:
Set a width on the a elements and make them inline-block.
a {
width: 100px;
display: inline-block;
}
You just have to make sure the width is wide enough allow the bolded text to show without breaking to two lines.
Second option: use a text shadow to make it look bold.
a.bolded {
text-shadow:0px 0px 1px black;
}
Here's a demo showing both. I have the second one on hover but you can add or remove the class using jQuery's .toggleClass()
There are two important events that you should target, when writing CSS for cases link this.
One is :hover and the other is :active.
They are called "Pseudo classes", and they give you the option to set the style of an element when you mouse-over it (:hover) and when you click on it (:active).
If you set the style of the a tag the same as active and hover (usually only hover is needed), then you should get the same results and the font size will stay the same.
Here's and example:
a, a:hover, a:active { font: normal 13px Arial; text-decoration: none; }
In a single CSS line, you could set all the styles to be the same.
Important note: you could use jquery, but there's no need for it (just saw you were using it on jsfiddle).
I am currently building a website and as soon as I added a link <a> tag to a <p> word, it becomes transparent. There are two links on the main page, both are coded exactly the same, but one of the links is transparent? The html passes validation and so does the css. If I add the old school <font color> html property within the <a> the color shows up, but the words break apart on different lines. I know this way is obsolete, but no CSS is working right now? Help?
Make sure that the background color is not the same as the hyperlink colors.
For kicks, try this: <font face="verdana" color="green">[your-entire-hyperlink-code]</font>
That's not how it should be done, but just to test it. If you see text, then your background color and hyperlink color are the same and need to be changed.
Try adding a CSS selector for <a> tags within <p> tags. Something like the following:
p a {
color: #000;
}
p a:hover {
color: #1c1c1c;
}
This should make any <a> black by default, and a dark grey on hover. If this doesn't work, try disabling all styles save for the default browser style-sheet (like Hakre said).
I'd like to know how to do something like this in CSS:
How is it possible to change the text color halfway through like that on an <input> tag ? I've done a View Source already, but it's hard to make sense of.
Google uses two divs which are absolutely positioned on top of the input box. The first div contains the word stackoverflow, and the text is styled in a light gray. The second dvi contains "stacko" and the text is black.
If you inspect the source, look for divs with class="gsfi".
First off, look into implementing autocompletion. This should give you another element [beneath the one the user types; probably another div] for styling.
its not purely a CSS thing, you need JS too.
Have a look at this autocomplete demo: http://www.pengoworks.com/workshop/jquery/autocomplete.htm
Now you could use CSS for styling text selections in that input to gray the text out.
like this:
::selection {
color: white;
background-color: red;
}
::-moz-selection {
color: white;
background-color: red;
}