Question

I made a nice menu, and I also wrote a new design for only IE. In IE7 the text next to image doesn`t go next to it. It goes to next line. Anybody knows how can I fix it ?

http://tinyurl.com/6yzd2jc

Answer 1

you can apply the background-image to the anchor tag.

example jsfiddle

So replace:

ul ul a div {float:left;display:block;width:7px;height:10px;background-color:transparent;padding:0;margin:0 5px 0 0;position:relative;top:3px;}
ul ul a:hover div {display:block;background-image:url(http://ctuchicago.squarespace.com/storage/jquery/dot.png);width:7px;height:10px;}

With:

ul ul a:hover {background:transparent url(http://ctuchicago.squarespace.com/storage/jquery/dot.png) no-repeat left center;}

Also increase the <a> left padding (from padding:3px 16px 3px 4px; to padding:3px 16px 3px 14px;)

ul ul li a {
    font-weight:normal;
    color: #FFF;
    padding:3px 16px 3px 14px;
}

and remove the empty <div>s nested in the anchors