Welcome to WebmasterWorld Guest from 54.161.64.174

Forum Moderators: incrediBILL

Message Too Old, No Replies

Anchor / link around block-level image

     
10:12 pm on Jul 22, 2010 (gmt 0)

5+ Year Member



I have an image that I needed to declare as block-level element in order to center it with CSS (Why can CSS not have a simple "center"?):
img {
display: block;
margin: 0 auto;
}


The problem is that the image also needs to be linked. Problem because you are not supposed to wrap <a> which is an inline element around block level elements.

All solutions [webmasterworld.com] I found [codingforums.com] to this problem suggest to switch the anchor tag and the block-level tag, e.g.:
<h1><a>...</a></h1>


Unfortunately, this doesn't work with images. What to do?
2:53 am on Jul 23, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Let the linked image remain inline and put the whole shebang in a block level div which you can then center?
8:30 am on Jul 23, 2010 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



An IMG is always an inline-level element as far as HTML is concerned, despite what you specify in the CSS. It is always valid to have an IMG inside an anchor. Specifying display:block, does not make it a block-level element - that is defined by the HTML spec.

However, you may find your page no longer displays as you wish? Is that the problem? I think tedster's suggestion is preferred. But you could also make the anchor a block! (Remember, this would only make the anchor display:block, it is still an inline-level element, so you can't go sticking DIVs in it!)
4:29 pm on Jul 23, 2010 (gmt 0)

5+ Year Member



Thanks guys!

I didn't seem to have display problems in FF, but I haven't tested it fully yet, was afraid some browsers might throw a fit. Good to know I can leave it as is. I wanted to avoid DIV hell as much as I can by styling elements directly.
6:08 pm on Jul 23, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You can also set the anchor as a block. (?)

edit:" But you could also make the anchor a block!" Sorry penders, doh . . .
 

Featured Threads

Hot Threads This Week

Hot Threads This Month