SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot yukimushu's Avatar
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this bad practise?

    Hey, just a quickie really. I'm working on a website which has 3 options.

    On these 3 options, I want to do a roll over the surround list so each option lights up - buy the anchor tags surrounding the header (h3) and paragraph tags is causing problems with validation (quite rightly so), yet the anchor tags are set to block so surely it shouldn't be a problem?

    You'll find both the html and css below, cheers!

    Code HTML4Strict:
     
    <ul id="opt_details">
    	<li>
    		<a href="/option-1">
    			<h3>Option 1</h3>
    			<p>&pound;10,000 + vat</p>
    		</a>
    	</li>
    	<li>
    		<a href="/option-2">
    			<h3>Option 2</h3>
    			<p>&pound;15,000 + vat</p>
    		</a>
    	</li>
    </ul>

    Code CSS:
    ul#opt_details {
    	margin: 0;
    	padding: 0;
    }
     
    #opt_details li {
    	margin: 0;
    	padding: 0;
    	border-bottom: 1px solid #cce3f2;
    	list-style: none;
    }
     
    #opt_details li a {
    	display: block;
    	padding: 10px;
    	text-decoration: none;
    }
     
    #opt_details li a:hover {
    	background-color: #f5f9fc;
    	text-decoration: none;
    }

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's very bad practice.

    An anchor is an inline element, which cannot contain block-level elements like headings and paragraphs. It's highly invalid HTML. You're trying to put your boots inside your socks, instead of the other way round.

    Setting display:block only affects the box that is generated. It doesn't change the syntax rules which are hard-coded in the DTD. You can paint 'shoe box' on your socks, but you still won't be able to fit your boots inside them.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the analogy Tommy

    It's a similar problem to this topic earlier.

    http://www.sitepoint.com/forums/showthread.php?t=508116

    The items need to be links but you still need to style them so the easiest solution is probably to use a <span> with a class on each.

  4. #4
    SitePoint Zealot yukimushu's Avatar
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It's very bad practice.

    You're trying to put your boots inside your socks, instead of the other way round.
    I remember trying that once; it really didn't work too well

    Alright, cheers guys; i'll get that fixed straight away! <span>'s it is!


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
  •