Problems with IE 7, any clue

foottuns · 02-06-2007, 10:01 PM

I've got a drop down nav bar within the header of my page.

My main content div covers up the drop down items within IE (7 and older); however, Firefox seems to be fine. Here is the code
Main CSS

Code:

#horizontal_menu {
    width: 100%;
    background: #f8f8f8;
    float: right;
}

#horizontal_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 10em;
    float: right;
}

#horizontal_menu a, #horizontal_menu h2 {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    display: block;
    margin: 0;
}

#horizontal_menu h2 {
    text-align: center;
    text-transform: uppercase;
}

#horizontal_menu a {
    color: #0A0F25;
    background: #efefef;
    text-decoration: none;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    border-bottom: solid 1px #162469;
    padding: 2px 3px;
}

#horizontal_menu a:hover {
    color: #e7e7e7;
    background-color: #162469;
}

#horizontal_menu li {
    position: relative;
}

#horizontal_menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

#horizontal_menu ul ul {
    position: absolute;
    z-index: 500;
}

div#horizontal_menu ul ul {
display: none;
}

div#horizontal_menu ul li:hover ul {
    display: block;
}

div#horizontal_menu ul ul,
div#horizontal_menu ul li:hover ul ul,
div#horizontal_menu ul ul li:hover ul ul {
    display: none;
}

div#horizontal_menu ul li:hover ul,
div#horizontal_menu ul ul li:hover ul,
div#horizontal_menu ul ul ul li:hover ul {
    display: block;
}

Within my index.php file

PHP Code:

   <!--[if IE]>

<style type="text/css" media="screen">

#vertical_menu ul li {float: left; width: 100%;}

#horizontal_menu ul li {float: left; width: 100%;}

</style>

<![endif]-->

<!--[if lt IE 7]>

<style type="text/css" media="screen">

body {

behavior: url(includes/csshover.htc);

font-size: 100%;

} 

#vertical_menu ul li {float: left; width: 100%;}

#vertical_menu ul li a {height: 1%;} 

#horizontal_menu ul li {float: left; width: 100%;}

#horizontal_menu ul li a {height: 1%;} 

 
#vertical_menu a, #vertical_menu h2 {

font: 10px arial, helvetica, sans-serif;

}

#horizontal_menu a, #horizontal_menu h2 {

font: 10px arial, helvetica, sans-serif;

}

</style>

<![endif]-->

The problem is with the horizontal menu....vertical doesn't have any pop-outs or the likes.

Best Regards Dan,

jumpenjuhosaphat · 02-06-2007, 10:06 PM

Hi Dan, IE is strange when it comes to Dynamic HTML and CSS. Check out this article to find out ways around it, I found it helpful when desigining my site:
Whatever:hover

trichnosis · 02-10-2007, 10:58 PM

http://www.google.com.tr/search?hl=t...btnG=Ara&meta=

02-06-2007, 10:06 PM	#2
jumpenjuhosaphat Forum Admin Contributor Join Date: Jun 2006 Location: Denver Posts: 4,459	Re: Problems with IE 7, any clue Hi Dan, IE is strange when it comes to Dynamic HTML and CSS. Check out this article to find out ways around it, I found it helpful when desigining my site: Whatever:hover __________________ Storage Sheds Lost Forum

02-10-2007, 10:58 PM	#3
trichnosis Senior Member Join Date: Jan 2007 Posts: 452	Re: Problems with IE 7, any clue http://www.google.com.tr/search?hl=t...btnG=Ara&meta= __________________ Türkçe Bilgi \| Hobiler \| Satranç \| 2

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Display area problems	spenno	Programming	2	12-07-2006 03:40 PM
Indexing problems	spenno	General Talk	5	07-14-2006 05:33 AM
Any problems...	josephheskett	PHP	0	12-15-2005 09:22 PM

02-06-2007, 10:01 PM	#1
foottuns Junior Member Join Date: May 2006 Posts: 67	Problems with IE 7, any clue I've got a drop down nav bar within the header of my page. My main content div covers up the drop down items within IE (7 and older); however, Firefox seems to be fine. Here is the code Main CSS Code: #horizontal_menu { width: 100%; background: #f8f8f8; float: right; } #horizontal_menu ul { list-style: none; margin: 0; padding: 0; width: 10em; float: right; } #horizontal_menu a, #horizontal_menu h2 { font: 10px Verdana, Arial, Helvetica, sans-serif; display: block; margin: 0; } #horizontal_menu h2 { text-align: center; text-transform: uppercase; } #horizontal_menu a { color: #0A0F25; background: #efefef; text-decoration: none; border-style: solid; border-color: #ccc #888 #555 #bbb; border-bottom: solid 1px #162469; padding: 2px 3px; } #horizontal_menu a:hover { color: #e7e7e7; background-color: #162469; } #horizontal_menu li { position: relative; } #horizontal_menu ul ul ul { position: absolute; top: 0; left: 100%; } #horizontal_menu ul ul { position: absolute; z-index: 500; } div#horizontal_menu ul ul { display: none; } div#horizontal_menu ul li:hover ul { display: block; } div#horizontal_menu ul ul, div#horizontal_menu ul li:hover ul ul, div#horizontal_menu ul ul li:hover ul ul { display: none; } div#horizontal_menu ul li:hover ul, div#horizontal_menu ul ul li:hover ul, div#horizontal_menu ul ul ul li:hover ul { display: block; } Within my index.php file PHP Code: <!--[if IE]> <style type="text/css" media="screen"> #vertical_menu ul li {float: left; width: 100%;} #horizontal_menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(includes/csshover.htc); font-size: 100%; } #vertical_menu ul li {float: left; width: 100%;} #vertical_menu ul li a {height: 1%;} #horizontal_menu ul li {float: left; width: 100%;} #horizontal_menu ul li a {height: 1%;} #vertical_menu a, #vertical_menu h2 { font: 10px arial, helvetica, sans-serif; } #horizontal_menu a, #horizontal_menu h2 { font: 10px arial, helvetica, sans-serif; } </style> <![endif]--> The problem is with the horizontal menu....vertical doesn't have any pop-outs or the likes. Best Regards Dan, __________________ I wouldn't recommend sex- drinks- or Mac for everyone but they work for me. Carhub TV http://www.carhub.tv

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)