I'm having a huge problem with IE 7 and how it displays background images =\ . Take a look at this page in chrome or firefox or something: http://zetabin.com/gallery.php . On the gallery link in the submenu, it has a sort of glow beneath it (background image). If you hover over any of the other links, there is a very faint 2px line beneath it (background image). However, in IE 7, the images cut off around the text so it isn't displayed. Can someone help me with this?
I'd suggest recoding the navigation to be an unordered list and have each navigation item within an <li> tag. It's coded very poorly at the moment. Also, why does the a:hover have a height of 2px? Get rid of that.
Hmm, so don't use the divs? I'll try the li. One thing, do I do a:hover or li:hover? I think it's not working in IE because anchors are inline elements, not block, and I don't know how to get past that. EDIT: Ok, I've changed it to a list and it displays slightly better. However, it cuts off the glow image on the side, and on the bottom (in ie). How do I fix it?
Hmm, I'm really confused. Whatever I do, it doesn't work. In the other browsers, the background image is slightly cut off now, and in IE you can't see it at all. I would really like some help with this =\ .
Hi, It's best to use lists rather than DIV's for your navigation, since a navigation is well a list of links so it's more semantic. Also it's much easier to control the presentation of it via CSS and is very flexible, most menus you will find use lists for their markup. You can't really use li:hover because IE6 only supports hovers on anchor elements! So we use a:hover.. Now you are correct anchors are inline elements, however the good news is that you can change them to block elements by adding display:block; inside your CSS. However you need add float:left; to your anchors anyway, and this automatically triggers them to display:block; so you don't have to add it in this circumstance. So add float:left to #submenu li a it should help!
That helped so much, thanks . It now displays the images, but I need to somehow have it so the entire bg image shows. At the moment it is cut off because there isn't enough padding, but this wasn't an issue when using divs. Any insight?
What do you mean exactly? I can see from when you used the DIV's you had 65px padding, whereas you've only set 40px padding on the new list anchors so this could be a problem.
Yeah, that's the problem, except with 65px padding on the list, the elements go onto another line as there's not enough space.
Did you have 3 links in the header because I see it fits now or did you have 4? If things are not fitting its because well as you suggested there's not enough space so you need to adjust accordingly: As you see your header is set at 960px wide The banner is at 280px wide which leaves 680px (960-280) You have 42px padding set on your menu which leaves 656px (680-42) Then you have 130px padding on each menu item in addition to the unknown width of the text. So taking that into consideration you need to adjust width/padding's to achieve the look you wanted, which I do not know so I cannot advise exactly but you get the idea. Remember if you want to remove padding from just one menu item say the first or the last then you can give it a special class and do so.