Amberley
08-26-2011, 10:24 AM
Okay, I've fixed my previous problem. New one...
1) Script Title: Accordion Menu
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm
3) Describe problem: I'm using the glossy accordion menu script on my site (not been put up live yet) and is working wonders in Firefox and Google Chrome but as usual, Internet Explorer isn't liking it. There is a huge gap between each header, it just doesn't look nice.
My CSS is this...
.dropmenu{
width: 270px;
padding: 0;
float: left;
}
.dropmenu a.menuitem{
background: #666 url('images/titlebar_img.png') repeat-x center;
color: #444;
font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
display:block;
font-size: 13px;
letter-spacing: 1.4px;
border: 1px solid #9d9a9a;
text-transform:uppercase;
margin-top: 3px;
line-height: 1.9em;
padding: 5px 5px 5px 10px;
font-weight: bold;
text-decoration:none;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
}
.dropmenu a.menuitem:visited, .dropmenu .menuitem:active{
color: #444;
}
.dropmenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.dropmenu a.menuitem:hover{
background-image: url(images/title_bghover.png);
}
.dropmenu div.submenu{ /*DIV that contains each sub menu*/
background: #dadada;
border:1px solid #9d9a9a;
}
.dropmenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0px;
padding: 4px;
}
.dropmenu div.submenu ul li{
border-bottom:1px solid #9d9a9a;
}
.dropmenu div.submenu ul li a{
color:#000;
display: block;
padding: 6px 5px;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
.dropmenu div.submenu ul li a:hover{
background: #ebebeb;
color: #222;
}
I would lastly like to express my hatred for IE, the amount of problems it has caused me for web pages is frustrating. :eek: Ha, I'm close to pulling my hair out. Thanks for reading! :)
1) Script Title: Accordion Menu
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm
3) Describe problem: I'm using the glossy accordion menu script on my site (not been put up live yet) and is working wonders in Firefox and Google Chrome but as usual, Internet Explorer isn't liking it. There is a huge gap between each header, it just doesn't look nice.
My CSS is this...
.dropmenu{
width: 270px;
padding: 0;
float: left;
}
.dropmenu a.menuitem{
background: #666 url('images/titlebar_img.png') repeat-x center;
color: #444;
font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
display:block;
font-size: 13px;
letter-spacing: 1.4px;
border: 1px solid #9d9a9a;
text-transform:uppercase;
margin-top: 3px;
line-height: 1.9em;
padding: 5px 5px 5px 10px;
font-weight: bold;
text-decoration:none;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
}
.dropmenu a.menuitem:visited, .dropmenu .menuitem:active{
color: #444;
}
.dropmenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.dropmenu a.menuitem:hover{
background-image: url(images/title_bghover.png);
}
.dropmenu div.submenu{ /*DIV that contains each sub menu*/
background: #dadada;
border:1px solid #9d9a9a;
}
.dropmenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0px;
padding: 4px;
}
.dropmenu div.submenu ul li{
border-bottom:1px solid #9d9a9a;
}
.dropmenu div.submenu ul li a{
color:#000;
display: block;
padding: 6px 5px;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
.dropmenu div.submenu ul li a:hover{
background: #ebebeb;
color: #222;
}
I would lastly like to express my hatred for IE, the amount of problems it has caused me for web pages is frustrating. :eek: Ha, I'm close to pulling my hair out. Thanks for reading! :)