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

Incorporate a pseudo class to a unique custom template or directive within an Angular project

Issue with event.preventDefault() in Jquery not functioning as expected

Having trouble resolving row border issues with CSS in DataTables?

Loading a form on the fly using jQuery

Implementing websocket functionality in Yii framework

Discover the magic of TransformToggle and slideToggle in Javascript, HTML, and CSS

The utilization of HTML in Laravel for generating PDF documents

Chrome causes Bootstrap to add an additional pixel

Special CSS rule for targeting an active state of a specific child element

How can I update the color of table rows after the ng-repeat has been implemented?

Angular Material: div not being filled by layout-fill

What is the process for closing the side menu by clicking on the dark area?

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Why do identical elements show different scrollHeights when overflowed and how can this discrepancy be resolved?

Issue with border rendering on triangles in CSS on IE8

placing one SWF file above another

CSS for Responsive Web Development: Adjusting the Height of Mobile Sliders

Issue with a child element that is malfunctioning because of the parent element

Animating SVGs in Internet Explorer (IE)

Unsuccessful conversion of JSON data to HTML using json2html in Python