CSS Menu Dropdown IE7 float left

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

Sorry if this isn't really constructive, but I feel like you should be able to make a similar menu without resorting to seperate versions for seperate browsers. What is your reasoning behind this choice? — Zach Lysobey, Oct 01 '11 at 18:36
if anyone wants to play with the code: http://jsfiddle.net/MNwD3/ — Zach Lysobey, Oct 01 '11 at 18:38
It is not a valid markup to have a block level element inside an inline element, You have div inside an a tag, further there is some redundant CSS, div is a block level element by default, and there is no need to specify it again through CSS. You may look here as well: http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-a-anchor-ever-correct — defau1t, Oct 01 '11 at 19:18
I am with @ZachL. here, this menu could easily be made cross-browser — sg3s, Oct 01 '11 at 19:32
@refhat - while you're correct with regard to xhtml (which the OP is specifying in his doctype), in HTML5 it is perfectly valid to have a `
` inside an `` tag (one is expected to style the `` as something other than `inline` though). Most browsers are quite happy with it regardless of the doctype. — Spudley, Oct 01 '11 at 20:01

score 1 · Accepted Answer · answered Oct 01 '11 at 19:14

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

score 0 · Answer 2 · answered Oct 01 '11 at 19:14

0

Why You are Using div inside a tag ?

remove div from a tag and apply CSS Style background-image in a tag

Check this http://jsfiddle.net/MNwD3/40/

answered Oct 01 '11 at 19:14

Sanooj

2,637
15
20

CSS Menu Dropdown IE7 float left

2 Answers2