[Last Call] Learn how to a build a cloud-first strategyRegister Now


CSS behavior:url("csshover.htc") problem

Posted on 2007-10-02
Medium Priority
Last Modified: 2013-12-08
I am using
body {
to emulate the hover function in IE6.
I have two different drop-down menus using it in the same page, one of them works, the other does nothing.  They are essentially the same though.

Can anyone see the problem?

Question by:Lady_M
  • 4
  • 3

Author Comment

ID: 19999378
Sorry, I should have said.  The tabbed drop-down works and the bright blue boxes should also have drop-downs attached, but they don't.

You can see it in Firefox.
LVL 17

Expert Comment

ID: 20001942
Just some quick feedback, there's nothing wrong with the behaviour. I edited the CSS to always show the dropdowns and they still won't show up on IE, tring to figure out why that is right now...
LVL 17

Accepted Solution

mreuring earned 2000 total points
ID: 20002012
I haven't been able to figure out why (and I do have to get some money on the table today) but the cause of the menu's not showing up lie in this line of code:
#shinybar ul#navshinybuttons li {position:relative; float:right; width:40px; padding:0; list-style: none; }

If you remove the width statement:
#shinybar ul#navshinybuttons li {position:relative; float:right; padding:0; list-style: none; }

It still looks more or less the same (I think I saw things shift by a pixel) but more importantly, it then functions properly in both FireFox and IE!
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 20003158
mreuring, you're right, it works!

Thank you very very much, that was very clever of you.  But I hope you didn't spend hours on it and are having a pot noodle for dinner.

Why was the width causing the problem do you think?
LVL 17

Expert Comment

ID: 20003231
Hmmm, I did have a little more of a poke around after my last post. Inside the list-item you're floating the a-tag and somehow IE seems somewhat confused by the whole construction.
I found that when I removed the float left from the a-tag, or added clear: left to the unorder list of the subnavigation this also made the sub-navigation appear. Possibly the combination of using a fixed width on an element that contained no static content threw IE into a fit, although this would be quite contradictionary to what it would usually do.

So, although it isn't quite clear to me why, there's a significant difference in IE's understanding of that particular menu, as far as the whole floats and positions go at least. I would actually recommend not floating the anchor in this case:
#shinybar ul#navshinybuttons li a {position:relative; float:left; display:block; width:30px; height:30px; margin: 0 5px; border: 1px solid; background-color:#33FFFF; }
would then become:
#shinybar ul#navshinybuttons li a {position:relative; display:block; width:30px; height:30px; margin: 0 5px; border: 1px solid; background-color:#33FFFF; }

As that float doesn't seem to add anything at all, this would be quite justified :) And don't worry, usually I can contain my enthusiasm and won't spend much more than 10 minutes on a problem before I start work :) Although I might still go for a pot noodle tonight, can't be bothered to spend a lot of time in the kitchen on wednesdays ;)

Author Comment

ID: 20029509
i read somewhere about IE5 requiring <a>s to be floated inside their <li>s otherwise it didn't float lists inline.  I haven't tested that though.  Do you know anything about that?
LVL 17

Expert Comment

ID: 20031020
Uhm, hmmm, I haven't bothered with IE5 for well over a year now. It has less market-share than Safari. IT does sound like a nonsense though. The rendering engine for IE4, 5 and 6 is the same, it's been patched and had some minor upgrades, but it's essentially the same thing. The behaviour you describe sounds somewhat odd and doesn't strike me as something that would've gotten fixed along the way.

However, there's a way to be sure, test it yourself ;) http://tredosoft.com/Multiple_IE

But more-over, ask yourself the question, is it worth precious developer time to fully support IE5?

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month17 days, 16 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question