Question

First I have a pretty casual problem, vertically centering an image inside a list. Most tutorials advise to use line-height = image-height or assigning list item to table and use vertical-align:middle. Neither seem to work for me.
My second problem is having a clickable list link row without jQuery. I’m supposed to make the anchor display:block and set the width to 100%, but then it breaks on another row and is not extended to the left image block.

This is my markup:

            <ul>
                <li>
                    <a href="#">
                        <div id="firstbutton" class="button"></div>
                        <div class="group">
                        one<br/>
                            <span>tagline</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div id="secondbutton" class="button"></div>
                        <div class="group">
                            two<br/>
                            <span>tagline</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div id="thirdbutton" class="button"></div>
                        <div class="group">
                            three<br/>
                            <span>tagline</span>
                        </div>
                    </a>
                </li>
            </ul>

My Css:

ul{
// line-height:180px;
}

li{
height:60px;
min-width:200px;
margin:2px;
}


li a{
display:block;
width:100%;
}

html>body li a {
width: auto;
}

.group{
text-align:right;
float:right;
margin-right:20px;
width:auto;
}

.button{
width:30px;
height:30px;
float:left;
margin-left:20px;
}

And here is a live example of above

And here is an image

Answer 1

The W3 validator http://validator.w3.org/check might give you a hint… look the code below.

I don’t think an <a> tag supports a <div> inside.

Line 12, Column 61: document type does not allow element “div” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag

<div id="firstbutton" class="button"></div>

The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as “<p>” or “<table>“) inside an inline element (such as “<a>“, “<span>“, or “<font>“).

I would recommend using the a tag as display:block; in the css and keep on styling.