This doesn't happen all the time. A bug is not a bug if cannot be reproduced!
First, I thought this was a mistake of my young programming skills but same error appears in my two sites, apparently under the same circumstances.
<a style="display:block;" href="link">
<div>text1</div>
<div>text2</div>
</a>
Sometimes, while browsing, links with divs inside them render strangely, duplicate elements appear on the page with no reason, text gets distributed between different links, a real mess.
Real screenshots:
http://cupacupelor.ro/img/help.jpg
http://www.carbroker.ro/img/help.jpg
Anyone faced this problem? Is there a solution? I'm not interested of fixes involving JavaScript!
I guess your divs in links cause inconsistency in some browsers (may be your css playing here).
"Semantics", valid markup are some buzz words.
So why would you want DIVs in an <A> tag. You can try someting like this
<a href="#">
<span class="divstyle">Text 1</span>
<span class="divstyle">Text 2</span>
</a>
then in CSS
.divstyle {
display: block; //and other styles etc
}
Check your page in a HTML validator. I'm 90% sure that you can't have a <div> element inside inline elements like <a>. Even though you've set the link to display:block, it's still not allowed and the browsers may be spitting their dummy.
What you can do is use spans instead, setting them to block:
<style type="text/css">
.link, .link span { display: block; }
</style>
<a class="link" href="example.com">
<span>text1</span>
<span>text2</span>
</a>
Related
According to this answer, I'm supposed to be able to style my anchor tag as follows.
<a href="#Url.Action("Index", "Home")"
style="background: no-repeat url(../../Images/Logo.png) 0 0"></a>
However, I noticed that it doesn't work as expected because the image doesn't appear on the screen. However, if I create an image tag inside, it does.
<a href="#Url.Action("Index", "Home")">
<img src="../../Images/Logo.png" />
</a>
I'd prefer using the second approach but I'm afraid that it's old-school and that today it's recommended to use styling for adding images and not mark-up. So, naturally I want to embrace the new ways.
What am I doing wrong?
You need to set the style to display: block; and give it a width and a height.
Example:
Hope this helps
Ensure your <a> tag is styled to be large enough to display the image. By default this tag is displayed inline and you have given no content between the <a> and </a> tags, so therefore the browser will allocate no screen space at all for this element.
I suggest adding some rules to your inline style attribute (well it is better still in a stylesheet to be honest):-
<a href="#Url.Action("Index", "Home")" style="
background: no-repeat url(../../Images/Logo.png) 0 0;
display: inline-block;
width: 30px;
height: 20px"></a>
Just replace the 30px and 20px with the actual dimensions of your image.
http://exfluor.com/productsMain.html
I can't seem to get the boundary of the clickable link area to stay within the bounds of the <div> it is making a link(11 buttons linking to product categories). Even with using a class to specify the width, it spans the entire width of the <td> it is in. I've run out of options.
<a href="bycategory.php?cat=anhydrides">
<div class="category" align="center">
Anhydrides<br><img src="images/cat/anhydrides.jpg" alt="">
</div>
</a>
Use block display:
.catTable a {
...
display: block;
}
To set element's witdth it must have block or inline-block display. Also consider setting overflow: hidden.
Add word-wrap: break-word property to your as. It will break your links appropriately. You should pay attention though: You will not get automatic hyphenation from this. For that you would have to look into some library like hypenator
See this fiddle as an example: http://jsfiddle.net/8Lrhr22u/
Your HTML is not valid. You can't put div into a (well you can but it's not reliable). Instead try to improve markup a little (span instead of div):
<a href="bycategory.php?cat=hydrofluorocarbons">
<span class="category" align="center">Hydrofluorocarbons<br>
<img src="images/cat/hydrofluorocarbons.jpg" alt="">
</span>
</a>
However it's not really necessary, since setting a to display: inline-block should fix the issue:
.catTable a {
display: inline-block;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Link into full div - html and css
I'm trying to construct CSS where the <a> tag covers an entire <div> block, so that anywhere on the <div> can be clicked.
Here's how the final div should look (image is 64×64px):
Here's the HTML:
<div>
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</div>
Any CSS guru's help?
May be you can write like this:
<a href="#">
<img src="" alt=""/>
<h3><span>On The Beach</span> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</a>
CSS
a{
display:block;
}
Note: as per html5 you can define block elements inside <a> tag
If you want have to anchor cover the whole block, your HTML should reflect that. While block-level anchors are a fresh idea from XHTML2/HTML5, they are working in nearly all modern browsers (even IE 7).
Just enclose all the DIV's contents with the anchor:
<div>
<a href="#nohref">
<img src="" alt="" />
<h3>On The Beach <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</a>
</div>
div a {
display: block;
}
See also: http://html5doctor.com/block-level-links-in-html-5/
Shiny, but not new
What’s also very interesting about this technique is that actually this isn’t new: you can do it now. […] That’s one of the interesting things about HTML 5—it documents existing browser behaviour. As the browsers already handle wrapping links around block-level elements, and there is an obvious use-case, there was no reason to artificially keep the structure as invalid.
Wrap with anchor tag
<div>
<a href="#" class="cont-wrap-link">
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
<a>
</div>
CSS
div a.cont-wrap-link
{padding:0px; margin:0px;
display:block;
text-decoration:none;
}
Seeing as your doctype is HTML5 you can wrap the entire block in an anchor:
<a href="yourURL">
<div>
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</div>
</a>
No need for any JS :)
Check out this Post
Remember: Ensure that the structure of the document still makes sense when CSS is not present.
Update
You can Achieve this using HTML5. Check this
While this probably could be done with somewhat hacky CSS I believe JS (jQuery) is easier in this case:
$('#the-div').click(function () {
$(this).find('a').eq(0).click();
});
Or something like:
var theDiv = document.getElementByID('the-div');
theDiv.onclick = function () {
window.location = theDiv.getElementsByTagName('a')[0].href;
};
I would suggest to add onclick="location.href='http://google.com';" style="cursor:pointer;" to your div tag.
I have got this div..:
<div id="logoCover" style="position: absolute;width: 341px;height: 100px;z-index: 9999;top: 0px;left: 0px;"></div>
The problem with the div, is that, it would only show in ie8, if i give it a background color.
Otherwise the div wont exist, which means the user cant click on it.. why is that behavior common in ie8 and how do I prevent it
UPDATE:
This is the element on which I try to place my div:
#logo {
float: left;
height: 93px;
}
logo is an image
FULL HTML:
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
<div> tags are not supported as content for <a> tags inside of standard HTML. Some browsers try to acommodate for this, but you really can't depend on every browser implementation to handle it the same way.
However, you can make an <a> tag a block element (it is an inline element by default) and move the style from the <div> tag to the <a> tag. This would also eliminate the need for the inner <div> tag in your example.
try adding display:block or insert a ' '
also, check that your relative div is also rendering right.
hope that helps.
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;background-image: url('images/emptyImage.png')" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
Solved the problem, What I had to do is to use a transparent image, as a background.
My Code:
<a id="entire" href="/check-appointment.php">
<div id="check_box">
<div id="check_content">
<a id="boxis" href="/check-appointment.php">I am a sales rep</a>
<br> making a request on behalf of the client.
</div>
</div>
</a>
CSS:
#check_box {
width:423px;
height:250px;
margin-left:100px;
margin-top:10px;
}
#check_content {
font-weight:bold;
font-size:37px;
}
Problem:
I am unable to make the work with the I am trying to get that entire div to be part of the
How can i make it work?
If you have an HTML5 DocType it should work, anything before that won't allow inline elements a to wrap block level elements div.
Even if you use an anchor unless you do some z-indexing then your inner link likely won't be seen how you are expecting...since it's the same link it shouldn't be a problem, but that then becomes repetitive.