Click on the link that surrounds an inline-block span in Internet Explorer

Question

Click on the link that surrounds an inline-block span in Internet Explorer

In Chrome and Firefox, the following code works fine and makes the container clickable. However, in Internet Explorer, only the inner div changes the cursor to indicate that it's clickable, not the span.

I could use cursor:pointer to fix this issue, but the more important problem is that it doesn't allow for right-clicking to open a new tab.

Is there any solution to this problem? Thank you!

<html>
  <head>
    <style type="text/css">
       span{display:inline-block;width:100px}
    </style>
  </head>
  <body>
    <a href="/">
      <div>
        <div>title</div>
        <span>text</span><span>text</span>
      </div>
    </a>
  </body>
</html>

internet-explorer html css

Answer 1

Answer №1

Your HTML may not be valid, but don't worry - browsers will still render it correctly. However, it's important to strive for validation.

If you want to make a div clickable, jQuery can help you achieve that:

$(function (){
    $("#clickme").click(function(event) {
        event.preventDefault();
        window.open('http://www.example.com');
    });
});

Check out this example for reference.

Answer 2

Your HTML may not be valid, but don't worry - browsers will still render it correctly. However, it's important to strive for validation.

If you want to make a div clickable, jQuery can help you achieve that:

$(function (){
    $("#clickme").click(function(event) {
        event.preventDefault();
        window.open('http://www.example.com');
    });
});

Check out this example for reference.

Answer 3

Answer №2

Internet Explorer 6 (at least, I am unsure about newer versions) does not have compatibility for inline-block on elements that are originally inline like span. You may want to consider using block elements in those cases instead.

Additionally, it's worth noting that unless you are working with HTML5, block elements should not be placed inside aelements as this could cause issues on browsers that do not yet support it.

Answer 4

Internet Explorer 6 (at least, I am unsure about newer versions) does not have compatibility for inline-block on elements that are originally inline like span. You may want to consider using block elements in those cases instead.

Additionally, it's worth noting that unless you are working with HTML5, block elements should not be placed inside aelements as this could cause issues on browsers that do not yet support it.

Answer 5

Answer №3

You cannot place a block-level element inside an inline-level element.

However, in IE8, you can resolve this issue by adding a doctype to your page. I have utilized the html5 doctype, but other doctypes may work as well:

<!doctype html>
<html>
  <head>
    <style type="text/css">
       span{display:inline-block;width:100px}
    </style>
  </head>
  <body>
    <a href="/">
      <div>
        <div>title</div>
        <span>text</span><span>text</span>
      </div>
    </a>
  </body>
</html>

Additionally, it is acceptable to use the a tag in the manner you have in html5.

Answer 6

You cannot place a block-level element inside an inline-level element.

However, in IE8, you can resolve this issue by adding a doctype to your page. I have utilized the html5 doctype, but other doctypes may work as well:

<!doctype html>
<html>
  <head>
    <style type="text/css">
       span{display:inline-block;width:100px}
    </style>
  </head>
  <body>
    <a href="/">
      <div>
        <div>title</div>
        <span>text</span><span>text</span>
      </div>
    </a>
  </body>
</html>

Additionally, it is acceptable to use the a tag in the manner you have in html5.

Answer 7

Answer №4

If you want to create a clickable banner for your website header, here is a way to do it. By setting the background image of the header and adjusting the size of the h1 link, you can display additional paragraphs over the banner if needed. This approach can help achieve the desired outcome.

<!DOCTYPE html>
<html>
  <head>
    <title>Clickable Banner Example</title>
    <style type="text/css">
      #header {
        background-image: url('header_banner.jpg');
      }

      h1 a {
        display: block;
        height: 120px;
        width: 500px;
        text-indent: -9999; /* hides the displayed text */
      }
    </style>
  </head>
  <body>
    <div id='header'>
      <h1><a href="/">Click here for the header link.</a></h1>
      <p>Additional text content.</p><p>More text content.</p>
    </div>
  </body>
</html>

By following this method and using HTML5 validation, you can have a clickable header banner with various elements such as links integrated seamlessly within the header section.

Answer 8

If you want to create a clickable banner for your website header, here is a way to do it. By setting the background image of the header and adjusting the size of the h1 link, you can display additional paragraphs over the banner if needed. This approach can help achieve the desired outcome.

<!DOCTYPE html>
<html>
  <head>
    <title>Clickable Banner Example</title>
    <style type="text/css">
      #header {
        background-image: url('header_banner.jpg');
      }

      h1 a {
        display: block;
        height: 120px;
        width: 500px;
        text-indent: -9999; /* hides the displayed text */
      }
    </style>
  </head>
  <body>
    <div id='header'>
      <h1><a href="/">Click here for the header link.</a></h1>
      <p>Additional text content.</p><p>More text content.</p>
    </div>
  </body>
</html>

By following this method and using HTML5 validation, you can have a clickable header banner with various elements such as links integrated seamlessly within the header section.

Click on the link that surrounds an inline-block span in Internet Explorer

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating multiple nested ng-repeats in an AngularJS table

Tips for creating a margin on an HTML button's background color

Exploring Javascript parameters with the power of jquery

Error occurs when SRCSET loads the wrong size because "sizes" parameter is missing

How to use image source and mouse hover effects in CSS3

Attempting to store the output of a function in a variable

Eliminating white space - A CSS and HTML page with no room for gaps

Element that moves in conjunction with scroll (without using position:fixed)

Using jQuery and HTML to create numerous links that direct to a solitary iframe

A single image with dual clickable areas managed by an interactive image map

Set the first link in a menu to be highlighted as active using jquery

Center user input within a div element

Introducing an alternative solution for handling tasks linked to the completion of CSS3 animations

Guidelines for accessing a specific object or index from a dropdown list filled with objects stored in an array

When using CSS3 flex, the input box has a specified width but is still overflowing

Guide to transforming plain text into HTML format using Angular 4

"Short-term" variation not appearing within the Material-ui Drawer component

What is the best way to determine the value of margin-left in inline CSS using jQuery?

basic php websocket demonstration

Initiate the preloader function with a GIF loading image to display while my PHP script processes and retrieves data