Cross Browser Problem

HTML & CSS
1

Hi,

My gnarly problem I’ve been stuck on is the following:

We have landing pages with thumbnails and links to access sub-pages on our site. Here’s one example:
http://www.tepapa.govt.nz/WHATSON/Pages/default.aspx
In an accessibility presentation, I was told that it is best to have only one link tag around both the image and the title. Problem is: I never manage to make it look ok across all browsers, especially around the hover behaviour.
Is it possible to achieve the same look and feel and behaviour as we have currently, while having only 1 a tag?

Thanks a million!
Florence Liger

2

I don’t know about the only one a tag thing but you can add a title attribute to all of your images, I notice your using asp.net so you can always place the the title variable into the title attribute of the image tag… just a thought.

3

Hi,

If I understand correctly you can move the image to the side quite easily from within the title of the section.

I would do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.events {
	margin:0 auto;
	padding:0;
	list-style:none;
	width:450px;
	font-size:80%;
}
.events li {
	clear:both;
	overflow:hidden;
	width:350px;
	padding:10px 0 10px 100px;
 border- bottom : 1px dotted #ccc;
	margin:0 0 10px;
	background:#f4f4f4;
}
.events li img {
	float:left;
	width:83px;
	height:110px;
	border:1px solid #ccc;
	margin:0 0 12px -95px;
	position:relative;/* old ie likes this when negative margins used */
	display:inline;/* ie6 double margin fix*/
}
.events li a { text-decoration:none }
.events li a:hover span { text-decoration:underline }
</style>
</head>

<body>
<ul class="events">
		<li>
				<h3><a href="#"><img src="img.gif" alt="info text" width="83" height="110" > <span>Heading Title goes here</span></a></h3>
				<p>Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here </p>
				<p><strong>Bold text</strong> with <a href="#">link</a></p>
		</li>
		<li>
				<h3><a href="#"><img src="img.gif" alt="info text" width="83" height="110" > <span>Heading Title goes here</span></a></h3>
				<p>Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here </p>
				<p><strong>Bold text</strong> with <a href="#">link</a></p>
		</li>
		<li>
				<h3><a href="#"><img src="img.gif" alt="info text" width="83" height="110" > <span>Heading Title goes here</span></a></h3>
				<p>Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here </p>
				<p><strong>Bold text</strong> with <a href="#">link</a></p>
		</li>
		<li>
				<h3><a href="#"><img src="img.gif" alt="info text" width="83" height="110" > <span>Heading Title goes here</span></a></h3>
				<p>Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here Lorem ipsum text goes here </p>
				<p><strong>Bold text</strong> with <a href="#">link</a></p>
		</li>
</ul>
</body>
</html>

The main section is moved to the right by padding on the container and then the image is dragged back into the padding space with a negative margin. As the image is in the anchor of the heading it will still obey the link destination.