Please have a look at the following JSFiddle: http://jsfiddle.net/33wRk/1
I know that this is not strict HTML, since I have a block <div> inside of an <a>.
As you can see, the <div> inside the <a> gets red if the <a> becomes the active link.
However, it stays red, even after another <a> gets active.
How can multiple <a>'s be :active at the same time?
If the problem comes from the fact that I have invalid HTML, how can I change it to become correct?
It looks like a Chrome bug to me. I can't reproduce it in Firefox.
You can fix it by setting a { display: block; }
since I have a block <div> inside of an <a>.
That's fine in HTML 5, the content model was changed to transparent instead of inline.
Related
I am very new to working with cross-browser HTML/CSS. I'm trying to create a page with DIVs that have embedded DIVs.
I want to create a page that looks something like this:
http://www.tennantco.com/am-en/equipment
Where I have a DIV with a background picture and also a "header" DIV within the DIV that contains a background-color and text. Something like this:
<div>
<div>
<a/>
<div>
<h3/>
</div>
</div>
</div>
which is how the above referenced website seems to do it.
But I can't get it to work in Chrome & Firefox. It does work on IE8 (which is the version of IE - the only version - I need to support). The above referenced website does work in Chrome & Firefox, so I know I'm doing something wrong.
The problem is that on Chrome and Firefox the header part does not show up. I've created a fiddle:
http://jsfiddle.net/03ddL05k/
This is probably very simple, but I can't figure out what I'm doing wrong. I apologize for asking such an inane question.
Thanks for your help.
You have opacity: 0; defined (inlined) for your anchor tags.
opacity specifies the transparency of an element. The value applies to the element as a whole, including its content, the element and its contained children as well. 0 is fully transparent, meaning invisible.
I updated your fiddle for your review http://jsfiddle.net/yongchuc/03ddL05k/4/.
Working with Bootstrap I wanted to make a replica of http://spring.io/projects; a grid of links that are each a bordered panel (might not be the right word...) with some words an a picture inside. I've come to a conclusion, that Bootstrap's Thumbnail component should be right for me.
Having tried to use it, however, I ran into a problem.
If I want the entire panel to be clickable, I have to apply the thumbnail class to an anchor tag (wrapping the anchor into a div with thumbnail doesn't seem to work). Then, inside the anchor tag I've got a div tag with the class caption in it to store some text whose styling I don't want to change upon hovering on the panel.
What this caused is this: the text regained normal colour (as compared to the link colour when used without the caption class, however hovering over the panel causes the text to get underlined, and I'd prefer if that was not the case: it doesn't look very good and the highlight of the border upon hover is already a good indicator of that it is indeed a link.
I was about to just get my css hat out and modify the caption class to not do this, but it doesn't seem like the right course of action; I can't imagine it being desirable behavior for captions to get highlighted like this, and I'd like to use as little custom code as possible (since sticking to standards means I won't have to maintain this code every time I update bootstrap).
So my question is: where am I going wrong? Is it actually bad practice to want the entire thumbnail panel to work as a link? Or should I go ahead and manually scrape the underlining off? Or am I maybe applying wrong classes to wrong tags? Or is the thumbnail component not a right component for me to use altogether in such a case?
EDIT:
Forgot to include the code.
The thing I'm currently using:
<a class="thumbnail text-center" href="#">
<div class="caption">
<h3>Potato</h3>
<p>Some short description of what this exact potato really is about.</p>
</div>
</a>
EDIT 2:
Adding an image of what is currently occurring:
This is with the mouse hovering over it; as you can see, the text is underlined, which is not ideal.
Really weird that you ask this question because I just read a thread on this not so long ago and still have my solution which I have turned into a FIDDLE for you.
If I understand your question correctly, you want the entire panel / div to be a link, which can be accomplished like this: (This is the OP's steps, cant remember them word for word)
Make your Div position: Relative;
create a link
put span tags into that link <span></span>
Style the empty span tag with
CSS:
{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index: 1;
/* edit: fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
I think that's all there is to it. Like I said... There is a thread somewhere on this, but I cant remember what it was called.
Hope this can help.
EDIT: So after a long debate, we can forget about the above AND we came to the conclusion that this is possibly what you are after? :)
Add a tiny bit more CSS to your solution and you are sorted...
a.thumbnail:link {
text-decoration:none;
cursor:pointer;
}
Here is an updated fiddle
The solution is to add on the top of your style sheet:
a:hover {
text-decoration: none;
}
I have a div with an anchor tag inside it. I want to set the display of just the "a" tag as none. How would I go about doing it? It looks like-
<div id="upper">
Hide Me!
<p>Not to hide this text </p>
</div>
I tried doing -
#upper a {display:none;}
However this does not work for some reason. What am I doing wrong?
If someone suggests, don't #upper a {display:none !important;} as this introduce more issues in the future than it would sove immediately.
#upper a {display:none;} would work unless there is a more specific rule overriding it somewhere, this can be inspected with firebug or Chrome inspector etc.
I have long text that gets hidden if it exceeds 300 characters. Hiding is done with a <span> that has style="display:none;" set.
Basically, after the 300th caracter the rest of the content in wrapped inside that display:none span.
The algorithm is clever enough not to break text in the middle of a tag, so the invisible span will always occur after ending a tag.
The problem I have only happens in Mozilla and that's when the 300th caracter happens to be in the middle of a UL or OL. The rest of the browsers behave properly, hiding the part of the list that's outside the span and showing the other part, but Mozilla doesn't.
Any idea how I can fix this please?
UPDATE:
Code:
<ul><li>a</li><li>b</li><li><span style="display:none;">c</li></ul></span>
I know it's invalid markup because of the overlapping tags.
Thank you.
Fix your markup. If you properly close the span tag inside the <li>, it should work correctly.
<ul><li>a</li><li>b</li><li><span style="display:none;">c</span></li></ul>
Closing the <span> outside the list may be convenient, but for the browser to properly parse it, you need to use proper markup where possible. If you can't figure out how to close it within the <li>, maybe you need to re-think your code.
It looks like a button, but it is not an input element. How can such an element be created?
Maybe it is a button element? Or img element with a image of a button?
it can be a <button>
It can be anything with the right border
it can be an image.
You could use an image, or you could style a div (or other block level element) around some text. You could then make it behave a bit more "buttony" with javascript effects. Quite why you'd want to do that is beyond me though.
They're normally created by adding CSS styling to a standard hyperlink, sometimes in combination with javascript. Check out Top 10 CSS buttons tutorials.