Page 1 of 1

IE compatibility problem

Posted: Wed Feb 06, 2008 1:23 am
by aditya
Hello Everybody!
i have been build one template using css.which is working fine in Mozilla and is not working in IE. I don't what mistake i done. Can anyone help me please.

***** PLEASE USE THE

Code: Select all

 WHEN POSTING *****[/color]

HTML Code
[syntax=html]<div id="menu">
    <div class="nav" id="nav">
        <ul id="pop">
            <li class="liclass"><a href="index.php">HOME</a></li>
            <li><a  href="#">Products</a>
                <ul>
                    <li><a href="">Overview</a></li>
                    <li><a href="">List</a></li>
                </ul>
            </li>
            <li><a  href="#">About Us</a></li>
        </ul>
    </div>
</div>[/syntax]

CSS Code

	[syntax=html]#menu
{
    background-color: #000000;
    width:200px;
    margin:4px 4px 0px 0;
    font-weight: bold;
    font-size: 16px;
    padding: 10 0 0 0;
    float: left;
    height:200px;
    line-height:24px;
    color: #FFFFFF;
    background-position: bottom;
}
#menu a 
{
    color: #FFFFFF;
}
.nav 
{
    font-family: arial, sans-serif; 
    width:auto; 
    height:auto; 
    position:relative; 
    margin:0; 
    font-size:14px; 
    margin:10px 15px 0 15px;
    font-weight: bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
.nav ul 
{
    list-style-type: none; 
}
.nav ul li ul 
{
    display: none;
}
.nav ul li:hover ul, .nav ul li.over ul 
{
    display:block; 
    position:absolute; 
    top: 12px; 
    left:130px; 
    width:180px;    
    color:#ffffff;
    background-color: #000000;
}[/syntax]

and here is the link
http://hindinfo.summerhost.info/index.php

Re: IE compatibility problem

Posted: Wed Feb 06, 2008 2:04 pm
by califdon
They look identical to me, except for the top of the black box being a few pixels lower in IE -- is that what you're talking about? As far as I know, that's a difference in the way IE interprets margins and padding. I think I have read that you can avoid it by not including both padding and margins in the same CSS element. Use one or the other. Hope this helps.

Re: IE compatibility problem

Posted: Thu Feb 07, 2008 12:49 am
by aditya
Dear sir,

every thing is correct but my problem is if i want to run the same script in MOZILLA it's working , at the same time it's not working in INTERNET EXPLORER, please run the script just observe the menu and move on the mouse on menu . in my menu there is sublinks , that links working on MOZILLA meanwhile it's not working on INTERNET EXPLORER.and i am not asking abou the margins, please click products on my menu and observe .

So please reply me asearly as possible,

Thank you

Re: IE compatibility problem

Posted: Fri Feb 08, 2008 12:09 am
by califdon
aditya wrote:Dear sir,

every thing is correct but my problem is if i want to run the same script in MOZILLA it's working , at the same time it's not working in INTERNET EXPLORER, please run the script just observe the menu and move on the mouse on menu . in my menu there is sublinks , that links working on MOZILLA meanwhile it's not working on INTERNET EXPLORER.and i am not asking abou the margins, please click products on my menu and observe .

So please reply me asearly as possible,

Thank you
To tell the truth, I am surprised that your code works in Firefox either. I have never seen nested <UL>s used like that. Usually submenus are accomplished with Javascript. I'm not an HTML expert, but I have never seen that technique used before. Sorry. The only thing I know to suggest is to check out some available Javascript menus, like: http://www.scriptforest.com/javascript_ ... _menu.html

Re: IE compatibility problem

Posted: Sat Feb 09, 2008 12:49 pm
by andym01480
I use css nested list menus all the time - IE has a bug with using hover. Have a look at the excellent tutorial at http://www.tanfa.co.uk/css/examples/men ... -v.asp#vs1 You'll need to download the whatever:hover hack! - great stuff and definitely works in IE and Mozilla and is accessible, usable and standards compliant too! The tutorial makes the menu a little prettier than black too :lol:

Your question was more a css issue than a php coding problem! :wink: