CSS not working in IE

I have created CSS drop down menu through CSS builder software, then copied the code and paste it into a nsf form.The code is working fine in Firefox but its getting failed in IE.

Can anyone help me out to sort the problem.

What should be done?

Any suggestions!

Thanks in Advance

Zafar

Subject: I imagine the problem is with your code

I have to imagine, as you haven’t posted any examples of your code that isn’t working.

Subject: The CSS is not working

I have used CSS for drop down menus. The script is working fine on Firefox, but fails in IE. I have converted the same in .html, the html page is working fine in IE. do you need the whole css code as I dont know where the script is failing.Also is there any method to debus the css when using with lotus notes.

Please do let me know.

Subject: You still haven’t provided enough information for anyone to help you.

There are some big differences in how IE and FF handle CSS. There are hundreds of thousands of pages on the web discussing many of these differences. As you can’t share your code, you’re going to have to search google to try and find your answer. I don’t believe Domino is your problem.

Subject: The Code

Hi Carl,I am providing the whole code to you. I have HTML code on a form and a css resourse. The CSS code is also below.

my home page contains

<link rel="stylesheet" href="style.css" type="text/css" />
._css3m{display:none}
    <li class="topfirst"><a href="#" style="height:18px;line-height:18px;"><span>Item 0</span></a>
    
    <ul>
    
    	<li><a href="#"><span>Item 0 0</span></a>
    
    	<ul>
    
    		<li><a href="#">Item 0 0 1</a></li>
    
    		<li><a href="#">Item 0 0 0</a></li>
    
    	</ul></li>
    
    	<li><a href="#">Item 0 1</a></li>
    
    </ul></li>
    
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 1</span></a>
    
    <ul>
    
    	<li><a href="#">Item 1 1</a></li>
    
    	<li><a href="#"><span>Item 1 0</span></a>
    
    	<ul>
    
    		<li><a href="#">Item 1 0 0</a></li>
    
    	</ul></li>
    
    </ul></li>
    
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 3</span></a>
    
    <ul>
    
    	<li><a href="#"><span>Item 3 0</span></a>
    
    	<ul>
    
    		<li><a href="#">Item 3 0 0</a></li>
    
    	</ul></li>
    
    </ul></li>
    
    <li class="toplast"><a href="#" style="height:18px;line-height:18px;"><span>Item 2</span></a>
    
    <ul>
    
    	<li><a href="#"><span>Item 2 0</span></a>
    
    	<ul>
    
    		<li><a href="#">Item 2 0 1</a></li>
    
    		<li><a href="#">Item 2 0 0</a></li>
    
    	</ul></li>
    
    </ul></li>
    


And the CSS is

ul#css3menu1,ul#css3menu1 ul{

margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

ul#css3menu1 ul{

display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}

ul#css3menu1 li:hover>*{

display:block;}

ul#css3menu1 li{

position:relative;display:block;white-space:nowrap;font-size:0;float:left;}

ul#css3menu1 li:hover{

z-index:1;}

ul#css3menu1 ul ul{

position:absolute;left:100%;top:0;}

ul#css3menu1{

font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;

*display:inline;}

ul#css3menu1>li{

margin:0;}
  • html ul#css3menu1 li a{

    display:inline-block;}

ul#css3menu1 a:active, ul#css3menu1 a:focus{

outline-style:none;}

ul#css3menu1 a{

display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#222222;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}

ul#css3menu1 ul li{

float:none;margin:10px 0 0;}

ul#css3menu1 ul a{

text-align:left;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}

ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{

background-color:#61a700;border-color:#C0C0C0;border-style:solid;color:#333;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}

ul#css3menu1 img{

border:none;vertical-align:middle;margin-right:10px;}

ul#css3menu1 img.over{

display:none;}

ul#css3menu1 li:hover > a img.def{

display:none;}

ul#css3menu1 li:hover > a img.over{

display:inline;}

ul#css3menu1 li a.pressed img.over{

display:inline;}

ul#css3menu1 li a.pressed img.def{

display:none;}

ul#css3menu1 span{

display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}

ul#css3menu1 ul span{

background-image:url("arrowsub.png");padding-right:24px;}

ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{

background-color:#61a700;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#333;text-decoration:none;text-shadow:#FFF 0 0 1px;}

ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{

background-color:#424542;background-image:none;color:#6bd600;text-decoration:none;text-shadow:#FFF 0 0 0;}

ul#css3menu1 li.topfirst>a{

border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}

ul#css3menu1 li.toplast>a{

border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}

Subject: And when you say “The code is working fine in Firefox but its getting failed in IE.”

How does it fail?

Imagine yourself sitting at your desk and someone coming to you and saying, “I have this problem, it doesn’t work”

What information would you need to help that person? What questions would you ask that person?

Think of those questions for your problem, and post more details.

I suggest you read this:

How to ask a CRISPY question

Doing a Google search, it looks like you are using CSS3Menu.

I then did a google search for “CSS3menu IE bug”

Which took me here:

Maybe this is your problem?