I have a wide horizontal CSS menu that I designed that works in FF but breaks in IE. I've spent hours looking at it, but I still can't find the problem. I think it is something to do with the float:left or the p code, but I don't know. Can one of you experts here take a look? Also, I know this menu isn't designed the traditional way with "inline" styles, but I couldn't figure out how to do that while using a wide menu (specifically, how to vertically center the text and make the hover work). Anyway, here's the code: #menu p { margin:0; padding:10px 0 0 0; font-weight:bold; } #menu ul { margin:0; padding:0; background-color:#090; list-style:none; height:40px; } #menu ul li { float:left; } #menu ul li a { text-decoration:none; color:#fff; height:40px; display:block; padding:0px 15px 0px 15px; } #menu ul li a:hover, #menu ul li.selected { background-color:#0C0; display:block; } PHP: Thanks in advance for any help!!!
Need to see the HTML, because p's aren't valid children of menus, though it can be a child of a li. How does it die in IE? Except the p, the regular menu css looks pretty standard. Yesh, it's become traditional to float li's nowadays. Tip: #menu ul li a { text-decoration:none; color:#fff; height:40px; display:block; padding:0px 15px 0px 15px; } #menu ul li a:hover, #menu ul li.selected { background-color:#0C0; display:block; } Code (markup): 1. Since the li's are already blocks (because they're floated) and since all a's are already blocks (cause you set them so), remove that silly "display: block" from the hover section. It's doing nothing. 2. Since the a's are all blocks, better to put the selected class on the anchor: #menu ul li a.selected 3. Anywhere you use :hover, pls always include :focus as well. This is mainly for keyboarders, but think, most mobile users are keyboarders, and simply not everyone can use a mouse anyway. 4. Usually ul can do all the same work as a div. Unless the div called #menu is doing something special (like holding an extra background image/colour or something), you don't need a wrapping div 99% of the time. <ul id="menu"> <li><a href="#">blah</a></li> x 5 </ul> #menu { styles; }
Thanks for the tips - I've implemented all of your suggestions, except I'm keeping the menu div because I want to be able to use this across all of my web sites (and some use backgrounds). I'm still having the problems in IE though; here's the HTML code: <div id="menu"> <ul> <li class="selected"><a href="#"><p>Home</p></a></li> <li><a href="#"><p>Menu Item 2</p></a></li> <li><a href="#"><p>Menu Item 3</p></a></li> <li><a href="#"><p>Menu Item 4</p></a></li> <li><a href="#"><p>Menu Item 5</p></a></li> </ul> </div> PHP: Is there any way to do this without the p tags, maybe?
Do you have a live demo? it would save us time to get your code and apply it into a real site. However, when you float elements that should be horizontally aligned, but once you decide to give display:block to an element that does not have a set WIDTH (and that should be done only to the active link CSS rule) that block (in this case your class "selected") will no longer be horizontally aligned but it will stand out and go one line lower from the rest (it takes the whole available space that your main container div has). Hope this gives you a clue to trace the issue
I can't get a demo up until tomorrow probably, but you nailed the problem on the head. When I put a width on the ul li, then it works. However, is there a way that I can still use display:block and have it be the width of the text? I removed the block from the "selected" class and it's still dropping them down, as you described, in IE but not in FF. Is there a way to make it the width of the text in the li's?
You can't set a width of the text, but you can set the width of the li. As far as it regards IE...if its still crashing even tho you remove the display block (or the class) then you have spacing issues. So make sure you write a hack for IE to give less width to li's (or perhaps margin/padding). Before you even use the display:block, mind me asking what exactly is the purpose? What results are you trying to obtain by giving the display block rule?
I'm using display:block because I have it changing background color for the whole width and I want it to be clickable for the whole width. So, there's no way to make it work like it does in FF where it's the width of the text automatically?
My suggestion is to try starting over and testing it piece-by-piece, like add one thing at time, check if it looks the same in both, if not try another solution.
At first I was willing to fix the code, but you are so close to understand the whole thing that i will let you struggle with it by yourself and just point you few things. ul li should not have a width, but it needs to have margin and padding set to 0px (IE6 for example has different margin then what FireFox would give, so force them to stay at 0px). Now the active hyperlink within the irregular listing (ul li a) this is the part where you don't need to set a height at all, instead play with the top and bottom padding (the results are the same, but you get much more freedom over positioning the text vertically in the space). In this same code you will apply the width, so you tell browsers how much width should the active hyperlink have. In other words, you control the height with padding, while the width with the width:, this way the link will be active in the whole box space in major browsers, but not in IE6. So here also you will add the display:block rule (for some weird reason IE6 is in deep need for some attention, or better to say its a whining little sissy girl, it will bug you if you try to create a similar CSS menu but vertically aligned, in that case so you already know the fix, just add a bottom border to the LI's and problems solved, weird i know....). While for the selected class (AS active hyperlink, i.e. li.selected a) now all you need is to define the background color and other parameters if you need. I am taking you the long way so you can actually understand the problems and learn how to fix them next time you encounter in one. I have subscribed to your thread so if you still can't fix it let me know. Cheers
Thank you so much!!! It works like a charm now... Stupid IE is so particular- I think everyone should just use FireFox and make things a lot easier for all of us. The idea of positioning the ul li a is something I didn't think of until now, but that's a much better way of doing things. Anyway, thanks again so much!
This is illegal. The anchor is inline. The p is a block. Inlines are like water. Blocks are like a bucket. Buckets may hold water, or other buckets, but water cannot ever hold a bucket. (no ice jokes please) Even though IE has plenty of bugs, and even though in this case Firefox's error rendering managed to make the illegal code look ok, expect the next browser to come out to possibly barf on it. You never know. IE and FF only have different paddings and margins on things if you let them. I reset everyone to 0 right at the beginning so everything in all browsers starts at 0.