How to add nav icon images using max-width property in CSS - html

Question

So I'm working on a personal project and I'd like to add icon images to the left of each nav menu item. 3 things are bugging me;
I can't get the icons to sit left of the menu items
I can't get the icons to resize using the max-width property
I also need the icons to remain in place on hovering.
http://www.toastcafebar.com/nav/
<nav role="navigation">
<ul>
<a class="cinema" href="cinema.html">Movies</a>
<a class="tv" href="tv.html">T.V Shows</a>
</ul>
</nav>
...and the CSS
nav[role="navigation"] ul {
display: inline-block;
text-align: center;
margin-top: 50px;
}
nav[role="navigation"] ul a {
width: auto;
margin: 0 50px;
font-size: 2em;
padding: .5em;
width: auto;
}
a.cinema {
display: block;
background: url(images/pop.png) no-repeat left center;
padding-left: 75px;
}
.tv {
display: block;
background: url(images/tv.png) no-repeat;
padding-left: 100px;
}
nav a:link, a:visited {
font-weight: normal;
text-decoration: none;
outline: none;
color: #000;
}
nav a:hover {
color: #999;
background: #666;
-moz-border-radius: .5em;
border-radius: .55em;
padding: .25em;
}
Any suggestions?
Cheers in advance

Answer 1

Your markup is a bit funky. If you have a <ul> element, you should only have <li> children.
HTML:
<nav role="navigation">
<ul>
<li><a class="cinema" href="cinema.html">Movies</a></li>
<li><a class="tv" href="tv.html">T.V Shows</a></li>
</ul>
</nav>
CSS:
nav[role="navigation"] ul {
display: inline-block;
text-align: center;
margin-top: 50px; }
nav[role="navigation"] ul li {
font-size: 2em;
margin: 0 50px;
display: inline-block; }
nav[role="navigation"] ul a {
background-position: .5em 50%;
background-repeat: no-repeat;
text-decoration: none;
outline: none;
color: #000;
padding: .5em .5em .5em 75px;
display: block; }
nav[role="navigation"] ul li a.cinema { background-image: url(http://www.toastcafebar.com/nav/images/pop.png); }
nav[role="navigation"] ul li a.tv { background-image: url(http://www.toastcafebar.com/nav/images/tv.png); }
nav[role="navigation"] ul li a:hover {
color: #999;
background-color: #666;
-moz-border-radius: .5em;
border-radius: .55em; }
Preview: http://jsfiddle.net/Wexcode/bGNgr/

Answer 2

What you need to do is the <a> tags to display:block;, and have the icon as a background image, aligned left with no-repeat. Then make sure you apply padding-left on the <a>so the text doesn't overlap the image. For example:
a.cinema {
display: block;
background: url(/path/to/img.png) no-repeat left center;
padding-left: 90px;
}
Use that as a base! No need for max-width...

Answer 3

To get the icon to autoresize to fit the "button size" you could use the CSS3 property "background-size". But I think the best way is to resize the icons manually, some browsers does not support CSS3 properties correct yet.
http://www.css3.info/preview/background-size/

Answer 4

Use both classes as follows, you may reach to answer,
nav a:hover {
-moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
background: url(images/pop.png) no-repeat scroll left center #666666;
color: #999999;
}
a.cinema {
display: block;
background: url(/path/to/img.png) no-repeat left center;
text-indent: 35px;
}