PDA

View Full Version : Help! IE 7 Broken menu



brianszep
Nov 29th, 2006, 04:13 PM
Hi,

I just noticed that ie 7 broke my horizontal menu here: website (http://www.joeythomasbigband.com)

Here is the css code:


/* Main Nav Bar */
div#mainnav {
position: relative;
margin: 0px;
padding: 0px;
left: 20px;
border: 1px solid #000000;
border-right: 0px;
height: 24px;
width: 767px;
voice-family: "\"}\""; /* ie5win fudge starts */
voice-family: inherit;
width: 765px;
}
html>body #mainnav {
width: 765px; /* ie5win fudge ends */
}
div#mainnav ul {
list-style-type: none;
visibility: visible;
z-index: 100;
margin: 0px;
padding: 0px;
white-space: nowrap;
}
div#mainnav ul li a {
float: left;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FCD22C;
text-decoration: none;
padding: 3px 20px 3px 20px;
background: url("../../media/images/backgrounds/navbar/navred24_r1_c2.jpg") repeat-x;
vertical-align: middle;
border-right: 1px solid #000000;
height: 18px;
}
div#mainnav ul li a:link {
color: #FCD22C;
}
div#mainnav ul li a:hover {
color: #FFFFFF;
background: url("../../media/images/backgrounds/navbar/navblue24_r1_c2.jpg") repeat-x;
/*vertical-align: middle;*/
}


I did not include the whole css file as the other parts are for the drop down menus.

TIA,

-Brian :confused:

brianszep
Dec 12th, 2006, 04:49 PM
Hi,

I just noticed that ie 7 broke my horizontal menu here: website (http://www.joeythomasbigband.com)

Here is the css code:


/* Main Nav Bar */
div#mainnav {
position: relative;
margin: 0px;
padding: 0px;
left: 20px;
border: 1px solid #000000;
border-right: 0px;
height: 24px;
width: 767px;
voice-family: "\"}\""; /* ie5win fudge starts */
voice-family: inherit;
width: 765px;
}
html>body #mainnav {
width: 765px; /* ie5win fudge ends */
}
div#mainnav ul {
list-style-type: none;
visibility: visible;
z-index: 100;
margin: 0px;
padding: 0px;
white-space: nowrap;
}

div#mainnav li {
display: inline;
}

div#mainnav ul li a {
float: left;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FCD22C;
text-decoration: none;
padding: 3px 20px 3px 20px;
background: url("../../media/images/backgrounds/navbar/navred24_r1_c2.jpg") repeat-x;
vertical-align: middle;
border-right: 1px solid #000000;
height: 18px;
}
div#mainnav ul li a:link {
color: #FCD22C;
}
div#mainnav ul li a:hover {
color: #FFFFFF;
background: url("../../media/images/backgrounds/navbar/navblue24_r1_c2.jpg") repeat-x;
/*vertical-align: middle;*/
}


I did not include the whole css file as the other parts are for the drop down menus.

TIA,

-Brian :confused:

If you look at the code above you will see in bold type the fix I found for my problem.

-Brian