Member Avatar for w33n

I have both download pdf and a return to top button on a page of my site. They work perfectly in every browser except Internet Explorer. The strange thing is, if I use simply text, it works in IE. What's the deal??? Can anybody help me? My code is as follows:

CSS

.return_to_top{
float:inherit;
margin: auto;
padding-bottom:5px;
}

HTML for the button:

<div class="return_to_top"><a href="#wrapper"><input type="button" value="Return To Top" /></a></div>

HTML for the text:

<div class="return_to_top"><a href="#wrapper">return to top</a></div>
  • 3 Contributors
  • 2 Replies
  • 66 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by dipak_passion

Dani AI

Generated

Short version for : the wrapped input is the culprit. Wrapping an interactive control (like input or button) inside an a tag is not reliable across browsers, and Internet Explorer often prevents the link behavior when the inner control handles the click. Good catch , and pointed the right direction — use an element whose semantics match the action and style it if you need a button look.

A practical, compatible pattern:

  • If the goal is navigation to #wrapper, use a plain link and style it with CSS so it looks like a button.
  • If the goal is an action (scroll, AJAX, etc.), use a button and handle the action with JavaScript.

Example CSS + HTML (anchor-as-link styled like a button):

a.top-link {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #999;
  background: #eee;
  text-decoration: none;
  color: #000;
  cursor: pointer;
}
<a href="#wrapper" class="top-link">Return to top</a>

For a JS-driven smooth scroll instead of a hash jump, attach a click handler and call scrollIntoView (or fall back to location.hash for older IE). See Element.scrollIntoView() for browser support and options: Element.scrollIntoView(). For markup validity, run your page through the W3C validator: W3C Markup Validation Service.

Quick troubleshooting checklist: validate the HTML, confirm id="wrapper" exists, test behavior with and without the nested control, and inspect event handlers in IE's dev tools.

Recommended Answers

All 2 Replies

Member Avatar for mick_sp

The button will fire preventing the <a>-tag to fire.
If you want a button look: use CSS to create one and use this as a class in the <a>-tag
Hope this helps
Michael

Member Avatar for dipak_passion

Instead of button just use A tag and stylize that like a button through CSS. Thats the best way here.

regards

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.