I was wondering if there's anyone having an idea how to tackle with the following problem in IE7:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE7 absolute positioning bug</title>
<style type="text/css">
#panel { position: relative; border: solid 1px black; }
#spacer { height: 100px; }
#footer { position: absolute; bottom: 0px; }
</style>
<script type="text/javascript">
function toggle() {
var spacer = document.getElementById("spacer");
var style = "block";
if (spacer.style.display == "block" || spacer.style.display == "") {
style = "none";
}
spacer.style.display = style;
}
</script>
</head>
<body>
<div id="panel">
<button onclick="toggle();">Click me</button>
<br /><br /><br />
<div id="spacer"></div>
<div id="footer">This is some footer</div>
</div>
</body>
</html>
When you run this in IE7 you'll see that the "footer" element stays after modifying the CSS for "panel". The same example tested in IE8, FF and Chrome behaves exactly as expected.
I've already tried updating the element's class but this does not work if the browser's window has been opened maximized and no further size changes were made to the window (which is about 90% of the use cases we have for our product.... :( )
I'm stuck with a CSS-based solution however I think that I can make an exception in this case if it can easily be made IE7-specific (which means that other browsers will behave in a standard way with this).
Please help!
This is related to the "hasLayout bug" of IE. The relatively positioned #panel parent doesn't have layout and hence IE forgets to redraw its children when it get resized/repositioned.
The problem will go if you add overflow: hidden; to the relatively positioned #panel parent.
#panel { position: relative; overflow: hidden; border: solid 1px black; }
In depth background information about this IE bug can be found in the excellent reference "On having layout" and then for your particular problem specifically the chapter "Relatively positioned elements":
Note that position: relative does not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload, window sizing and scrolling, selecting. With this property, IE offsets the element, but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).
The overflow property triggers the element to have layout, see also the chapter "Where Layout Comes From":
As of IE7, overflow became a layout-trigger.
This solution doesn't necessarily have anything to do with dynamic content, but it worked for me (at least made the page borked to a manageable degree): specify dimensions.
I only noticed IE7 thought a div didn't have a width when using the crappy 'Select element by click' tool (ctrl+B) in IE tools.
I have created my function to trigger redraw. Maybe it is not a right solution, but it works.
// Script to fix js positon bug on IE7
// Use that function, recomended delay: 700
function ie7fixElementDelayed(elements, delay) {
window.setTimeout(
function () {
if(navigator.appVersion.indexOf("MSIE 7.") != -1) {
ie7fixElement(elements);
}
},
delay
);
}
function ie7fixElement(elements) {
elements.each(function(i) {
var element = $(this);
var orginalDisplayValue = element.css("display");
element.css("display", "none");
element.css("display", orginalDisplayValue);
});
}
Sample usage:
ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);
Related
I am almost done with a simple 2-page website for my registered domain names.
Unfortunately I have one small issue I can't seem to fix: a jumpy header when a Twitter Bootstrap modal opens and closes.
On mobile devices there's no problem. The problem only occurs in larger viewports like desktops and laptops.
How to recreate
Open http://www.domains.cloudlabz.nl/domains in a webbrowser and make sure you get a vertical scrollbar by lowering the viewport height.
Click on one of the blue 'more info' buttons.
Notice the jumping header and disappearing scrollbar once the modal opens.
Close the modal and notice the header jumping back and the scrollbar reappearing.
Check the following image (same result in Opera, Safari, Firefox and Chrome):
What I'd like
I'd like the header to stop jumping when opening/closing a modal. The fact the scrollbar disappears is not an issue. Actually, I would like it to stay like that.
Update
I noticed the jumping header only occurs with fixed position elements such as my header (added Bootstrap class navbar-fixed-top). It even occurs on the Bootstrap website itself: http://getbootstrap.com/javascripts. Go to the 'Modals > Optional Sizes' area on a desktop and click one of the buttons. You'll see the right side menu jumping back and forth.
When the modal opens, the class .modal-open is added to the body element (thanks for pointing that out #Pred). It adds a padding of 15px to the right, which is the same width as the scrollbar gutter. This prevents the body from jumping back and forth.
Unfortunately this padding apparently does not apply to fixed elements.
Bootstrap adds class="modal-open" and padding-right: 15px; to body when the modal is shown. To remove the right shift and keep the scroll bar add this to your css:
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
Tried in bootstrap 3.3.4
I seemed to have found a quick fix for my issue. It uses a piece of javascript to add extra style to the header (15px padding-right) to prevent it from jumping.
This might not be the best solution but for now it works just fine.
Since there were no issues on viewports smaller than 768px (mobile) this piece of code only adds the extra 15px to larger viewports such as desktops and laptops
<script>
$(document).ready(function(){
// Dirty fix for jumping scrollbar when modal opens
$('#requestModal').on('show.bs.modal', function (e) {
if ($(window).width() > 768) {
$(".navbar-default").css("padding-right","15px");
}
});
$('#requestModal').on('hide.bs.modal', function (e) {
if ($(window).width() > 768) {
$(".navbar-default").css("padding-right","0px");
}
});
});
</script>
If you know a better solution (preferably CSS3 only), please let me know.
Thanks for all the help!
As you usually put Bootstrap navbar as a direct child of the body container:
<body>
<nav class="navbar navbar-fixed-top">...</nav>
</body>
You can use the body padding-right value, calculated in the Bootstrap core code to prevent it from "jumping" when opening a modal window, to fix the navbar issue as well . A pure CSS solution is below:
.navbar-fixed-top {
padding-right: inherit;
}
Easy as that.
When the modal opens, the "modal-open" class is added to the HTML <body> element which hides overflow. You can change this by over-writing the "modal-open" class with overflow: inherit. This will keep the scrollbar in view, just as it is when the modal is closed. Keep in mind that this will change the overflow option whenever any modal is opened on the page. Hope this helps. Good luck!
All this happens because of this part of code in bootstrap.js:
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
That annoying problem happens in Firefox 32.0 (Gecko/20100101) and Chromium Version 37.0.2062.94 (Webkit 537.36) (Ubuntu 14.04). Not happens in QupZilla Version 1.6.6 (WebKit 537.21).
For me, the dirty fix is to comment the conditional line, after that it works in all browsers I tested (including some android's browsers).
NOTE: if you comment that line, you should be careful with the size of your modals since bootstrap will not create enough space for the new scrollbar.
Regards.
Another solution is to add:
.modal-open .navbar-fixed-top {
overflow-y: scroll;
}
to prevent its content from jumping. Again, easy as that.
This one only works if you know your page content is longer than the viewport (so any long scrolling page). You can just add the following to your CSS -
html {
overflow-y: scroll;
}
.modal-open {
padding-right: 0!important;
}
I came around same issue and I solved it as follows
just add
body.modal-open {
position: fixed;
overflow: scroll;
width: 100%;
padding-right: 0!important;
}
I manually change bootstap.js:
before change
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', '')
}
after change:
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
var headerPad = parseInt(($('.navbar-fixed-top').css('padding-right') || 0), 10)
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
if (this.bodyIsOverflowing) $('.navbar-fixed-top').css('padding-right', headerPad + this.scrollbarWidth)
}
Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', '')
$('.navbar-fixed-top').css('padding-right', '')
}
I have a structure:
<html>
<body>
<nav class="navbar navbar-fixed-top">...</nav>
<section>
<div class="container">...</div>
</section>
<section>
<div class="container">...</div>
</section>
<footer>...</foter>
</body>
</html>
I'm using this CSS:
body.modal-open {padding-right: 0 !important}
body.modal-open nav,
body.modal-open section,
body.modal-open footer {padding-right: 17px !important}
Add the following to your CSS:
body {
overflow: inherit;
padding-right: 0 !important;
}
For Bootstrap 4 sticky-top, use the following snippet. Tested all the CSS solutions on this page but none worked for Bootstrap 4.
<script type="text/javascript">
$('body').on('show.bs.modal', function () {
$('.sticky-top').css('margin-left', '-=0px');
});
$('body').on('hidden.bs.modal', function () {
$('.sticky-top').css('margin-left', 'auto');
});
</script>
My page design was as follows
<header class="container">
<div class="row">
</div>
</header>
<div class="container sticky-top">
<nav class="navbar navbar-expand-lg">
This div jumped/shifted 17px to the right when opening a modal
</nav>
</div>
In my case, it can be solved by adding comments or remove these two lines right: 0; and left: 0; in bootstrap.css file:
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
/* right: 0;
left: 0; */
z-index: 1030;
}
Note: I use bootstrap v3.3.7
In 4.5, the following code solved my issue of the fixed header sliding left.
body.modal-open {
position: fixed;
overflow-y: scroll;
width: 100%;
padding-right: 0!important;
}
.modal-open .fixed-top {
padding-right: inherit!important;
}
I made a simple way to display help text that looks like a popup window using only CSS. It works good except by default the popup window is left justified. I would like the window to be closer to the icon itself like what (in my example) "left: 360px;" would show. Since the position of the hover icon may change, does anybody know of a way of setting the position of the popup window based on the position of the hovered over icon? We use jQuery and Prototype but I'd prefer to use only CSS so the same code could be used on either type of page. Thanks.
Here's my example:
EDIT: This was already answered but here's the fixed code in case anybody else is looking for an easy way to display a popup message when hovering over an icon. Also, here's an example of it on jsfiddle.net so you can easily try it out: http://jsfiddle.net/zDADW/
By the way, if anyone knows why someone would rank this down one (as of this writing someone clicked the down arrow for this question), please let me know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show help text when hovering using CSS</title>
<style type="text/css">
#help:hover #help_popup {
/*If you hover over the help icon, show the help_popup span*/
display: block;
}
#help {
/*This is the part I was missing*/
position: relative;
}
#help_popup {
/*Normally, hide this span*/
display: none;
position: absolute;
width: 15em;
padding: 10px;
background: #CFF;
color: #000;
border: 3px solid;
text-align: center;
left: 10px; /*this is still needed even if it's 0*/
}
</style>
</head>
<body>
<div>
This shows a popup window using CSS when you mouse over an image.
<div>
Hover over the question mark for a popup help window.
<span id="help">
<img src="questionmark.png" alt="[?]"/>
<span id="help_popup">
This is the normally hidden help text.
<br/>It only shows up when you hover over the question mark.
</span>
</span>
</div>
</div>
</body>
</html>
Add #help { position: relative; } to your CSS. This will allow the absolutely positioned element to calculate it's position relative to the #help element. You'll probably find that you want to decrease the left property once you make this change.
jsFiddle demo
I've the following mark up
<div class="row-fluid">
<div class="span4">
<ul class="test">
<li>Arun</li>
<li>Krishna</li>
<li>Soundar</li>
</ul>
</div>
</div>
And css
.test {
height: 500px;
margin-top: 10px;
overflow-y: auto;
padding: 10px 4px 70px;
}
And script
$('.test li').draggable({
revert: 'invalid'
})
If you drag the items to the right side, it disappears, I don't know why it is behaving so.
If the overflow-y: auto; style is removed from .test it works fine.
Demo: Fiddle
You may have to increase the width of the preview tab because of the responsive css to replicate the issue in the fiddle
I know this is an old question, but I think I found an answer. The reason the list disappears is because you drag it off the edge of the div and it begins to auto scroll. So, you you just remove it from the flow of the page when it is clicked on, like so:
$('.test li').draggable({
revert: 'invalid'
}).mousedown(function() {
var that = $(this);
//create div to fill the vacated space
$div = $('<div></div>');
$div.width(that.width());
$div.height(that.height());
$div.insertAfter(that);
//remove from flow of the page, set a different background color to see it work
that.css({'position':'absolute'});
});
New fiddle here
The problem with the CSS on bootstrap-combined.min.css. It sets some width due to that it causes the issue.
So remove bootstrap-combined.min.css and try.
Refer LIVE DEMO
UPDATE:
Add border: 1px solid; to your .test class then you will see the actual difference, why it is working if you comment overflow
If you debug on firebug, you will see below CSS class (that is from bootstrap-combined.min.css) is causing your issue
.row-fluid .span4 {
width: 31.4917%;
}
All you required was, the 'min-width:1100px', and 'width:100%;'
I have updated fiddle for you
Fiddle Link : http://jsfiddle.net/br57F/5/
Its working fine. overflow works with content, while draggable, will not add content to parent div. it will just change position in run time of the element.
I hope this will do :)
Just during drag, wrap dragged element by a div include position:absolute style.
So instead this code:
$('.test li').draggable({
revert: 'invalid'
})
Use this one:
$('.test li').draggable({
revert: 'invalid',
start: function(event, el){
$(el.helper[0]).wrap( "<div style='position:absolute;'></div>" );
},
stop: function(event, el){
$(el.helper[0]).unwrap();
}
});
Live Demo
I cannot get z-index working on a iframe that contains a pdf file with IE8. It works with Google Chrome.
Example (JSFiddle):
HTML
<div id="div-text">
<div id="shouldBeOnTop">my text that should be on top</div>
</div>
<div id="div-frame">
<iframe src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"/>
</div>
CSS
#div-text{
position:relative;
left:210px;
top:20px
}
#shouldBeOnTop{
position:relative;
right:60px;
background-color:red;
width:100px;
z-index:2;
}
#div-frame{
position:relative;
z-index:1;
}
Update: Matthew Wise has a really clever alternative solution which you should consider—especially if you're having trouble with my approach or dislike ugly hacks!
There is a way to cover windowed elements in IE with other elements, but you're not going to like it.
Background: windowed and windowless elements
Legacy IE categorises elements into two types: windowed and windowless.
Regular elements like div and input are windowless. They are rendered by the browser itself in a single MSHTML plane and respect each other's z-order.
Elements rendered outside of MSHTML are windowed; for example, select (rendered by the OS) and ActiveX controls. They respect each other's z-order, but occupy a separate MSHTML plane that is painted on top of all windowless elements.
The only exception is iframe. In IE 5, iframe was a windowed element. This was changed in IE 5.5; it is now a windowless element, but for backwards compatibility reasons it will still draw over windowed elements with a lower z-index
In other words: iframe respects z-index for both windowed and windowless elements. If you position an iframe over a windowed element, any windowless elements positioned over the iframe will be visible!
What this means
The PDF will always be painted on top of the regular page content—like select elements were until IE 7. The fix is to position another iframe between your content and the PDF.
Demo
jsFiddle: http://jsfiddle.net/Jordan/gDuCE/
Code
HTML:
<div id="outer">
<div id="inner">my text that should be on top</div>
<iframe class="cover" src="about:blank"></iframe>
</div>
<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>
CSS:
#outer {
position: relative;
left: 150px;
top: 20px;
width: 100px;
z-index: 2;
}
#inner {
background: red;
}
.cover {
border: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
#pdf {
position: relative;
z-index: 1;
}
Support
This has been tested and should work in IE 7–9. If you feel persnickety about it showing up in the DOM for other browsers, you can add it with JavaScript or wrap it in an IE-only conditional comment:
<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->
The workaround with the additional IFRAME does work in simple cases but I have spent a morning trying to get the overlay to respect transparency. Basically our application has modal popups whereby a full-window overlay behind the popups is rendered 'greyed out' (background colour black, opacity 0.25) to indicate to the user that the pop-ups are modal. With the workaround, the embedded PDF view never gets greyed out with the rest of the window so still looks 'active' and indeed you can still interact with the PDF viewer.
Our solution is to use Mozilla's pdf.js library: https://github.com/mozilla/pdf.js/ - embedding an IFRAME pointing at the test URL http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf works straight out of the box respecting z-index, transparency, the lot, no hacks required! Seems that they use their own rendering engine which generates standard HTML representing the content of the PDF.
I Had been trying to fix the same issue and my scenario was similar. I was trying to render a youtube Video on my page and on top of the video i wanted to place some div with some information.
But the youtube video being contained into an iframe wasn't letting me do that. Irrespective of thez-index that i gave to the elements.
Then this post helped - https://stackoverflow.com/a/9074366/1484384
Basically its about the wmode. Check the above post to see how to work with it.
Here is some code from that post:
<iframe title="YouTube video player" width="480" height="390 src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent">
Or
//Fix z-index youtube video embedding
$(document).ready(function (){
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
For those who are using jQueryUI, I came up with the following solution.
Add the following function and call it from the open event of your dialogs. If your browser is IE it will insert an iFrame into the Modal overlay or else add it to the dialog background.
// Simple IE Detection.
var isIE = Object.hasOwnProperty.call(window, "ActiveXObject");
// Fix IE bug where an iFrame from below will cover a dialogs contents.
function dialogIFrameFix(event /* object */) {
setTimeout(function () {
if (event && event.target && isIE) {
var $dialog = $(event.target.parentElement);
// Get the modal overlay if found.
var $fixTarget = $dialog.next('.ui-widget-overlay');
// Use the dialog body if there is no overlay.
if (!$fixTarget || !$fixTarget.length)
$fixTarget = $dialog;
// Add as first child so it is covered by all of the other elements
$fixTarget.prepend('<iframe class="iFrameFix" src="about:blank" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>');
}
}, 10);
}
You would then call it as follows..
.dialog({
open: function (event, ui) {
dialogIFrameFix(event);
}
});
I have a <div> block with some fancy visual content that I don't want to change. I want to make it a clickable link.
I'm looking for something like <div> … </div>, but that is valid XHTML 1.1.
Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.
For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.
In essence it's this:
Build your panel using normal CSS techniques and valid HTML.
Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
Inside that link, put an empty span tag (<span></span>, not <span /> - thanks #Campey)
give the panel position:relative
apply the following CSS to the empty span:
{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
/* fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
It will now cover the panel, and as it's inside an <A> tag, it's a clickable link
give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link
You can't make the div a link itself, but you can make an <a> tag act as a block, the same behaviour a <div> has.
a {
display: block;
}
You can then set the width and height on it.
This is an ancient question, but I thought I'd answer it since everyone here has some crazy solutions. It's actually very very simple...
An anchor tag works like this -
EVERYTHING IN HERE TURNS INTO A LINK
Sooo...
<div id="thediv" />
Although I'm not sure if this is valid. If that's the reasoning behind spoken solutions, then I apologise...
Requires a little javascript.
But, your div would be clickable.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
This option doesn’t require an empty.gif as in the most upvoted answer:
HTML:
<div class="feature">
</div>
CSS:
div.feature {
position: relative;
}
div.feature a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
As proposed at http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/
This is a "valid" solution to achieving what you want.
<style type="text/css">
.myspan {
display: block;
}
</style>
<span class="myspan">text</span>
But most-likely what you really want is to have an <a> tag displayed as a block level element.
I would not advise using JavaScript to simulate a hyperlink as that defeats the purpose of markup validation, which is ultimately to promote accessibility (publishing well-formed documents following proper semantic rules minimizes the possibility the same document will be interpreted differently by different browsers).
It would be preferable to publish a web page that does not validate, but renders and functions properly on all browsers, including ones with JavaScript disabled. Furthermore, using onclick does not provide the semantic information for a screen reader to determine that the div is functioning as a link.
The cleanest way would be to use jQuery with the data-tags introduced in HTML. With this solution you can create a link on every tag you want. First define the tag (e.g. div) with a data-link tag:
<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>
Now you can style the div however you want. And you have to create also the style for the "link"-alike behavior:
[data-link] {
cursor: pointer;
}
And at last put this jQuery call to the page:
$(document).ready(function() {
$("[data-link]").click(function() {
window.location.href = $(this).attr("data-link");
return false;
});
});
With this code jQuery applys a click listener to every tag on the page which has a "data-link" attribute and redirects to the URL which is in the data-link attribute.
Not sure if this is valid but it worked for me.
The code :
<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
<p style='display:inline;color:#ffffff;float:left;'> Whatever </p>
<a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>
To make thepeer's answer work in IE 7 and forward, it needs a few tweaks.
IE will not honour z-index if the element is has no background-color, so the link will not overlap parts of the containig div that has content, only the blank parts. To fix this a background is added with opacity 0.
For some reason IE7 and various compatibility modes completely fail when using the span in a link approach. However if the link itself is given the style it works just fine.
.blockLink
{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
z-index: 1;
background-color:#ffffff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
<div style="position:relative">
<some content>
<a href="somepage" class="blockLink" />
<div>
you could also try by wrapping an anchor, then turning its height and width to be the same with its parent. This works for me perfectly.
<div id="css_ID">
</div>
An option that hasn't been mentioned is using flex. By applying flex: 1 to the a tag, it expands to fit the container.
div {
height: 100px;
width: 100px;
display: flex;
border: 1px solid;
}
a {
flex: 1;
}
<div>
Link
</div>
This worked for me:
HTML:
<div>
WHATEVER YOU WANT
<a href="YOUR LINK HERE">
<span class="span-link"></span>
</a>
</div>
CSS:
.span-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 9999;
}
This adds an invisible element (the span), which covers your entire div, and is above your whole div on the z-index, so when someone clicks on that div, the click is essentially intercepted by your invisible "span" layer, which is linked.
Note: If you're already using z-indexes for other elements, just make sure the value of this z-index is higher than anything you want it to rest "on top" of.
why not? use <div></div> works fine in HTML5
This example worked for me:
<div style="position: relative; width:191px; height:83px;">
</div>
This post is Old I know but I just had to fix the same issue because simply writing a normal link tag with the display set to block does not make the whole div clickable in IE. so to fix this issue far simpler than having to use JQuery.
Firstly let us understand why this happens: IE wont make an empty div clickable it only make the text/image within that div/a tag clickable.
Solution: Fill the div with a bakground image and hide it from the viewer.
How?
You ask good questions, now listen up.
add this backround style to the a tag
> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"
And there you have it the whole div is now clickable. This was the best way for me cause Im using it for my Photo Gallery to let the user clik on one half of the image to move left/right and then place a small image as well just for visual effects. so for me I used the left and right images as background images anyway!
Just have the link in the block and enhance it with jquery. It degrades 100% gracefully for anyone without javascript. Doing this with html isn't really the best solution imho.
For example:
<div id="div_link">
<h2>The Link and Headline</h2>
<p>Some more stuff and maybe another link.</p>
</div>
Then use jquery to make the block clickable (via web designer wall):
$(document).ready(function(){
$("#div_link").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
});
Then all you have to do is add cursor styles to the div
#div_link:hover {cursor: pointer;}
For bonus points only apply these styles if javascript is enabled by adding a 'js_enabled' class to the div, or the body, or whatever.
This is the best way to do it as used on the BBC website and the Guardian:
I found the technique here:
http://codepen.io/IschaGast/pen/Qjxpxo
heres the html
<div class="highlight block-link">
<h2>I am an example header</h2>
<p>This entire box links somewhere, thanks to faux block links. I am some example text with a custom link that sits within the block</p>
</div>
heres the CSS
/**
* Block Link
*
* A Faux block-level link. Used for when you need a block-level link with
* clickable areas within it as directly nesting a tags breaks things.
*/
.block-link {
position: relative;
}
.block-link a {
position: relative;
z-index: 1;
}
.block-link .block-link__overlay-link {
position: static;
&:before {
bottom: 0;
content: "";
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 0;
}
&:hover,
&:focus {
&:before {
background: rgba(255,255,0, .2);
}
}
}
<div> … </div>
Actually you need to include the JavaScript code at the moment,
check this tutorial to do so.
but there is a tricky way to achieve this using a CSS code
you must nest an anchor tag inside your div tag and you must apply this property to it,
display:block;
when you've done that,it will make the whole width area clickable (but within the height of the anchor tag),if you want to cover the whole div area you must set the height of the anchor tag exactly to the height of the div tag,for example:
height:60px;
this is gonna make the whole area clickable,then you can apply text-indent:-9999px to anchor tag to achieve the goal.
this is really tricky and simple and it's just created using CSS code.
here is an example: http://jsfiddle.net/hbirjand/RG8wW/
This work for me:
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
You can give a link to your div by following method:
<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
cursor:pointer;
width:200px;
height:200px;
background-color:#FF0000;
color:#fff;
text-align:center;
font:13px/17px Arial, Helvetica, sans-serif;
}
</style>
You can make surround the element with a href tags or you can use jquery and use
$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});
This is the simplest way.
Say, this is the div block I want to make clickable:
<div class="inner_headL"></div>
So put a href as follows:
<a href="#">
<div class="inner_headL"></div>
</a>
Just consider the div block as a normal html element and enable the usual a href tag.
It works on FF at least.
I pulled in a variable because some values in my link will change depending on what record the user is coming from.
This worked for testing :
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
and this works too :
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>
While I don't recommend doing this under any circumstance, here is some code that makes a DIV into a link (note: this example uses jQuery and certain markup is removed for simplicity):
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[href]").click(function () {
window.location = $(this).attr("href");
});
});
</script>
<div href="http://www.google.com">
My Div Link
</div>
If you can use bootstrap, one simple solution is to use bootstrap .stretched-link.
https://getbootstrap.com/docs/4.3/utilities/stretched-link/
Sample Code
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
Soviut's answer was not sufficient for me. I had to use
a { display: inline-flex; }
to remove baseline artifacts, when using just a img in the a.
Enclosing your div inside an anchor tag <a href></a> works like charm:
<a href="">
<div>anything goes here will turn into a link</div>
</a>
My smarty pants answer:
"Evasive answer to: "How to make block level element a hyperlink and validate in XHTML 1.1"
Just use HTML5 DOCTYPE DTD."
Didn't actually hold true for ie7
onclick="location.href='page.html';"
Works IE7-9, Chrome, Safari, Firefox,
if just everything could be this simple...
#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}
#logo a {padding-top:48px; display:block;}
<div id="logo"></div>
just think a little outside the box ;-)