HTML and CSS Issues with IE7 Navigation?

I came up with a variation of your navigation and posted the demo at.

Up vote 0 down vote favorite share g+ share fb share tw.

Im have made a navigation bar for the top of site, the final look I wanted in the end was, simple text menu but then when you hover items the background changes using a background image. I have managed to do this and in all browsers when you hover over the background changes and it is fine, but in internet explorer 7 it looks like this... I have tried changing the heights and widths, but still cannot get IE7 to go the same as the others? The HTML code for the navigation is English Search and Book Latest Offers the CSS is .

Buttonleft li{float:left;margin-top:-9px;display:inline;list-style:none;margin-right:6px} . Buttonleft li a{color:#D9D9D9;font:normal 13px Tahoma;text-decoration:none;height:36px;width:auto;padding:10px} . Buttonleft li a:hover{background:url(../images/topbgover.

Png)} img{border:0} #topflag{margin-right:3px;margin-left:3px} Any help would be great :D html css internet-explorer-7 navigation html-lists link|improve this question asked Mar 5 '11 at 23:51bamboonlewis267 89% accept rate.

I came up with a variation of your navigation and posted the demo at: jsfiddle.net/audetwebdesign/HB6Zm/ I did not test it in IE7 but the two critical things to set are: use display: block for the a tag as suggested by GodFather earlier (that way the padding works on all sides) and use a strict doctype, otherwise you may see variations in quirks mode. Since your are floating the li elements, they become blocks, so there is no need to change the display property. Finally, it was not clear to me why you need a negative margin on top, but without see the final layout, it is hard to say.

I added some extra paddings and background colors to highlight the block elements and illustrate which styles control aspects of the layout.

Thanks for that, I have managed to fix it now. – bamboonlewis Mar 6 '11 at 16:32 Was aspect of my example was the most helpful? – Marc Audet Mar 6 '11 at 20:23.

Change the ". Buttonleft li" to display: block, and the same rule you need to set on "a" tag. Maybe you'll need to set some padding on "a" tag.

Tried these but still have the same outcome on IE7 if you want to see a live example you can view it here at 69.65.43.221/~doctorwh/test – bamboonlewis Mar 6 '11 at 0:00 Ok, I saw live on IE7, and you code is still setting the display to inline, I made a test and works right if you change the display in both tags (a and li) to block, and remove de padding of "a" tag. – GodFather Mar 6 '11 at 0:10.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.