I have a link wrapped around two divs which are animated on :hover. In Firefox the link works fine and jumps to the right anchor. But in Safari and Chrome the links only work if the first of the two divs inside the < a>-element is clicked.
<li>
<a href="#work" class="inaktiv">
<div class="work1">a</div>
<div class="work2">b</div>
</a>
</li>
Here is a working jsFiddle: http://jsfiddle.net/26HgM/6/
Could anyone tell me why it is not working properly? Thank you!
The problem is you're rotating the <a> so it's facing backwards which webkit is interpreting as no longer being a link that can be interacted with.
One thing you could do is instead of rotating the link itself, add a container div inside the link and rotate that.
http://jsfiddle.net/26HgM/6/
The problem is that <a> is an inline element, while <div> is a block-level element. Inline elements cannot contain block-level elements according to the HTML standard, but browsers try to do it anyway--so we get buggy implementations. You will have to:
put the links inside the divs, and have two links, or
make the container a div and make it clickable with Javascript
Here's more on block-level vs inline: http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
Related
the button are wrapped in a inline-block, but I want to make it align to right. when I do float: right, part of it disappeared
html:
<div class="card answer" id="answer4" href="#answer4">
<div class="btn-text-inline">
React Generated HTML
</div>
</div>
css:
.btn-text-inline {display: inline-block;}

before adding float:right
after float:right
I would advice to add a custom background-color css property to every single element on your website to actually be able to see how much space does each of the elements take. Maybe the buttons are hidden behind another element. In this case, probably behind 'add comment' element
If you know how to use developer tools in your browser, you can achieve the same by opening developer tools and hovering over the elements of interest.
My following app has a list of winners. It all works great on the desktop, but as soon as I resize to the mobile size, The winners don't seem to be clickable anymore.
https://religious-freedom.herokuapp.com/
I think some part of the css is not working very well.
I was my first big app, so all the codes are a little messy.
Can someone give me an insight on what is causing it?
Thanks
Your link elements are being covered by other div elements. I added the clearfix class to the following div and it "uncovered" your links.
<div class="silver col-lg-4 col-md-4 clearfix"...
See http://getbootstrap.com/css/#helper-classes-clearfix for more about clearfix class. It is common to add
It is very helpful to use the browser devtools to examine your page. As you mouse over elements in the devtools window pane it will show where your divs are positioned and if they may be unintentionally overlapping with other content.
I know why now. Check your html, the link is not properly included in your picture. If you move the pointer, it only works when you click the anchor tag not the image. So change your code, make sure it works for img clicking.
<a href="http://religiousfreedomandbusiness.org/global-awards/don-larson.html" target="_top">
<img src="http://s3.amazonaws.com/assets.my-bucket/candidates/avatars/000/000/006/medium/Don-Larson.jpg?1470198723">
<img src="../images/silver.png" class="medalsilver">
</a>
as far as I know there is no problem at all with browsers to render some markup like this:
<a href="link.html">
<h1> some headline </h1>
<p> some text </p>
<img src="someImage.png" alt="some image">
</a>
apparently IE 8 and IE 9 do have some issues. To an a-tag around those elements causes problems when I'm opening up the page. All elements are shifted and not on the position where they should be. Anything you know about that and how to fix the issue?
Thanks
I composed a quick demo which wraps the topic anchor in inline, inline-block, and block divs. Above, you'll see a comparison between Firefox (background) and IE8 (foreground). The inline div kind-of behaved as though it was floated left. I did not see any appreciable difference between IE8, Firefox, or Chrome.online demo: https://googledrive.com/host/0B8BLd2qPPV7XWG93OFhROGNSaEE/MeesterLeester.html
#supersize. Does this answer your question? Or, maybe you could tweak this demo to illustrate your concern.
If i click on anchor tag or img element in aspx page,that element will enclosed by dotted rectangular box. I am facing this problem in all anchor tags in IE browser and some times firefox and chorme also showing this problem.
How can i solve this problem? Is this browser side issue or our side issue?
Regards,
Karthik
This tutorial should help you remove focus borders, but there are usability issues to consider when doing this
For me this rectangular box encloses only anchors, not img (unless they are also anchors). Try setting outline of this elements to 0.
I have a simple horizontal menu which has <li> elements of different widths, when a user hovers over I would like to use the attached image to designate the hover, however I cannot work out the best way to do this.
the Image...
Can anyone post any code and suggest what I might need to do here.
Thanks
You would simply use the a:hover selector in your css, and add a background image. However, be aware, that stretching this image only works in modern browsers (IE9, Chrome, FF) that support CSS3.
This is how you make a menu;
http://jsfiddle.net/sg3s/49T6w/1/
When you style a menu it is important to make the anchors (a tags) display:block. That makes sure you have full power over their look and dimensions. Als if you use the anchors to make the menu it is backward compatible with older browsers that don't support :hover on block level elements (but do on anchors even if you make them a block since they're originally inline).
The background image is easy, just add it in the :hover class of the anchor. Gl