Member Avatar for theimben

Ive got a button which works fine in FF but not in IE.

All it is is a hyperlinked div. But IE users can't click the button.

Anyone know a work around for this. Im not very experienced in cross-browser coding :confused:

<html>
<head>
<style type="text/css">
	.partdiv {
	background-image: url('');
	padding-left: 75px;
	padding-top: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
        color: #000;
        text-decoration: none;
        width: 150px;
        height: 50px;
	}
</style>
</head>
<body>
<a href="{param}"><div class="partdiv">{option}</div></a>
</body>

</html>
  • 4 Contributors
  • 3 Replies
  • 110 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The problem comes from placing a block element inside an inline link. Firefox tolerated the invalid markup in the original post, but older versions of IE can ignore the anchor click area. HTML5 relaxed the rule and allows links to contain block elements, but pages served without a modern doctype (or in older HTML/XHTML) and old IE builds will still misbehave. See the HTML5 note on the anchor element for details: MDN — a element.

is correct about the block/inline mismatch. As suggested, the simplest modern fix is to make the anchor the clickable element and style it as a block. ’s overlay trick is a valid backward-compatible approach, but their CSS has a typo — use position:absolute, not display:absolute — and avoid empty anchors for accessibility.

Two practical, compatible options:

  1. Anchor styled as a block-level control (keeps correct semantics for navigation)
<a href="/target" class="big-link" role="button">Option Label</a>

<style>
.big-link {
  display:inline-block;
  padding:10px 16px;
  background:#eee url('/path/to/image.png') no-repeat 8px center;
  text-decoration:none;
  color:#000;
  font:700 18px/1 Arial,Helvetica,sans-serif;
}
.big-link:focus { outline:2px solid #06f; }
</style>
  1. Use a semantic button for action-like behavior (keeps keyboard/focus behavior consistent)
<button type="button" class="link-button" onclick="location.href='/target'">Option Label</button>

<style>
.link-button {
  border:0;
  background:transparent url('/path/to/image.png') no-repeat 8px center;
  padding:10px 16px;
  font:700 18px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
}
</style>

Extras: ensure a correct doctype (<!DOCTYPE html>) so IE doesn’t run in quirks mode, check with the browser dev tools for any overlapping element or z-index that might block clicks, and prefer visible focus styles for keyboard users. For reference on doctypes: MDN — Doctype.

Recommended Answers

All 3 Replies

Member Avatar for almostbob

<a class="partdiv" href="{param}">{option}</a>

Member Avatar for cmills83

yeah dont link divs, its not x-browser friendly,
add this:

.partdiv {
position:relative;
}
.partdiv a {
width:150px;
height:50px;
display:absolute;
top:0;
left:0;
display:block;
}

and the html

</head>
<body>
<div class="partdiv"><a href="{param}"></a></div>
</body>
</html>
Member Avatar for MidiMagic

Div is a block tag. A is an inline tag. You can't put block tags inside inline tags.

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.