SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross Browser Problem

    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. #2
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •