PDA

View Full Version : Accordion menu widths



fred2028
03-11-2009, 03:34 PM
1) Script Title: Accordion menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm

3) Describe problem: As you can see from the attachment, the submenu headers extend pass my menu width (200 px). This only happens with non-IE browsers. I've used a fresh copy of the CSS from the script page and it still has the same effect.

fred2028
03-11-2009, 03:45 PM
Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.
The CSS file. Glossy menu begins in the first .glossymenu part. A sample of my menu code is next post.

/* <body></body>
DO NOT EDIT THIS! */

.footer {
width: 33%;
font-size: 11px;
}
.leftHeader {
width: 200px;
height: 27px;
background: #004b84 url(<%media_headingURL%>) no-repeat;
text-align: center;
color: #fff;
font: bold 13px Georgia, serif;
}
.reddot {
font: italic;
color: red;
}
.breadcrumbs {
font: 10px;
}
.bioHeader {
background: #b0c4de;
color: black;
font-weight: 700;
width: 100%;
}
th {
font-size: 12px;
}
.taxHeader {
font: bold 11px;
}
.stepActionHeader {
background: #0085a4;
color: #fff;
font-weight: bold;
text-align: left;
}
.stepActionLeft {
background: #ffc;
font-weight: bold;
width: 20px;
}
img {
border: 0px;
}
body, td, input, select, textarea {
background: #fff;
font: 13px arial;
cursor: default;
}
input {
border: 1px solid #b0c4de;
cursor: text;
}
h1 {
font: bold 17px Georgia, serif;
color: #0f4068;
}
a {
color: #0085a4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.readmore {
color: #626262;
font-weight: 700;
}
.button {
background: url(<%media_leftMenu_backgroundOver%>) repeat-x;
border: 1px solid #fff;
color: #fff;
cursor: hand;
}
@media print {
a[href^="http"]:after {
content: " ("attr(href)")";
}
}
/* End layout styles. Do not edit below unless you know what you are doing and have made multiple backups */
.glossymenu{
margin: 0px;
padding: 0;
width: 200px; /*width of menu*/
border: 1px solid #9A9A9A;
}
.glossymenu a.menuitem{
background: #d1dfe6;
font: bold 12px Arial;
color: #000;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.glossymenu a.menuitem:hover{
background: #b0c9dd;
color: #000;
}
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: #b0c9dd;
}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}
.glossymenu div.submenu ul li{
border-bottom: 1px solid #b0c9dd;
}
.glossymenu div.submenu ul li a{
display: block;
font: normal 11px Arial;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}
.glossymenu div.submenu ul li a:hover{
background: #d1dfe6;
colorz: #000;
}


/* End left menu and begin top menu stuff */
.basictab ul{
margin: 3px;
padding: 0px;
margin-left: 0;
font: 12px Arial, Helvetica, sans-serif;
border: 0px;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 0px solid gray;
border-bottom: none;
background-color: #d1dfe6;
font: bold arial 13px;
color: #104876;
}
.basictab li a:visited{
color: #104876;
}
.basictab li a:hover, .basictab li a.current {
background-color: #b1c9dd;
color: #fff;
text-decoration: none;
}
.basictab li a.topMenu:active a:active{
color: #000;
}
.tabcontainer{
clear: left;
width: 95%; /*width of 2nd level sub menus*/
/* height: 300px; /* height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}
.tabcontent{
display: none;
background: #b0c9dd;
width: 1014px;
height: 20px;
}
a.Tsubmenu {
margin: 4px;
font: arial 13px;
color: #104876;
text-decoration: none;
}
a.Tsubmenu:hover {
text-decoration: none;
color: #fff;
}

fred2028
03-11-2009, 03:45 PM
Menu code:
<div class="glossymenu">

<a class="menuitem submenuheader" href="#" style="width: 198px">Capital Expenditure</a>
<div class="submenu">
<ul>
<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=B3B6341D03E7469B97E3223D1AB6F786&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=BABE051019214D91B8020BC5A1E62D4C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Description</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=476A3C336A8F4287905345364B144C4A&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=BABE051019214D91B8020BC5A1E62D4C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Policy</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=8202EFFC56A948679A0A09EE20F16133&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=BABE051019214D91B8020BC5A1E62D4C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Procedure</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=891C175D4F364D00B1671C6DD7E7F907&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=BABE051019214D91B8020BC5A1E62D4C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Statusing Order</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=6D4D68D9769A441084F7464ACB20B650&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=BABE051019214D91B8020BC5A1E62D4C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Workflow</a></li>
</ul>
</div>

<a class="menuitem submenuheader" href="#" style="width: 198px">Expense Report Template</a>
<div class="submenu">
<ul>
<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=92B5F057FD904081A7C2648A544297C9&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=24C6299A2256413F84E6A7B803F23E1C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Description</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=28A21CA062D147F9ADDF9864AAFDA8FD&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=24C6299A2256413F84E6A7B803F23E1C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Policy</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=77A3DFAB3FB74ADA93BC7E161FA67666&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=24C6299A2256413F84E6A7B803F23E1C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Procedure</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=4CAEE6F5340C4B87B5178FF4A5611639&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=24C6299A2256413F84E6A7B803F23E1C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Process</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=41AD0D0C09B248949EF16BACFC75A9FA&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=24C6299A2256413F84E6A7B803F23E1C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Template(s)</a></li>
</ul>
</div>

<a class="menuitem submenuheader" href="#" style="width: 198px">Purchase Card</a>
<div class="submenu">
<ul>
<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=D196A0AF58E7445CAC262F208A703A80&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=4C3B41863E034AF6868AFBF1C2DD6C8C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Description</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=670AE0AE3E194876BC2B7B90E6781459&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=4C3B41863E034AF6868AFBF1C2DD6C8C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Policy</a></li>

<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=02C68F7B5CBC4AF68174A598423B17CB&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=4C3B41863E034AF6868AFBF1C2DD6C8C&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Procedure</a></li>
</ul>
</div>

<a class="menuitem submenuheader" href="#" style="width: 198px">Special Purchases</a>
<div class="submenu">
<ul>
<li><a href="#"><b>IT Purchases over $500</b></a></li>
<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=244C3DB658884647B4723FAB280D6B23&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=E6227F1D7E6B4871B39D2045F54DBA72&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">- Description</a></li><li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=EAF9AD2BAEA147BCBAA440E61D681F69&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=E6227F1D7E6B4871B39D2045F54DBA72&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">- Policy</a></li><li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=32618B1437BD4D6F9455F22E5C104C79&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=E6227F1D7E6B4871B39D2045F54DBA72&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">- Procedure</a></li>

<li><a href="#"><b>Purchases over $2000</b></a></li>
<li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=35B6F6F7CEDC44C6BE89747EA902EA9D&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=EBC48C39BEA043C58853BE7F849690DF&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">- Description</a></li><li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=35DB89EE6E3D4F80B6BE486C1A03848A&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=EBC48C39BEA043C58853BE7F849690DF&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">- Policy</a></li><li><a href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=1533A7079EBD4AAE89B3E7FA014ED9C3&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=EBC48C39BEA043C58853BE7F849690DF&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">- Procedure</a></li>
</ul>
</div>

<a class="menuitem" href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=C840DF22030C4548A5C878A9FCAF2769&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=619E999F70974F54AC2E2ECC0E2F8E10&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Vendor Invoice Payment</a>

<a class="menuitem" href="/CMS/ioRD.asp?Action=RedDot&amp;Mode=1&amp;parentpageguid=&amp;pageguid=F74BD81402D64F038793828868BB5083&amp;targetcontainerguid=&amp;containerpageguid=&amp;projectvariantguid=5B5DE4E792764 69B809C9E07258A6124&amp;languagevariantid=ENU&amp;isLink=2&amp;editlinkguid=619E999F70974F54AC2E2ECC0E2F8E10&amp;projectguid=E23AA2D0E6AB4570AFAAB3C5B72FF807">Workplace</a>

</div>

fred2028
03-12-2009, 05:42 PM
Bump.

ddadmin
03-13-2009, 03:07 AM
It would make things a lot easier to see a actual example of the problem. But just looking at the screenshot, this looks like it's related to the CSS box model. Does your page contain a valid HTML doctype at the top? The width value in your header is interpreted differently dependingly:


<a class="menuitem submenuheader" href="#" style="width: 198px">Capital Expenditure</a>

fred2028
03-13-2009, 03:30 PM
It would make things a lot easier to see a actual example of the problem. But just looking at the screenshot, this looks like it's related to the CSS box model. Does your page contain a valid HTML doctype at the top? The width value in your header is interpreted differently dependingly:


<a class="menuitem submenuheader" href="#" style="width: 198px">Capital Expenditure</a>
I cannot show the actual example since it is on an Intranet, however I can make a screen video of the page if you want.

Which doctype should I choose? I went on W3Schools and they listed a lot of different types ...

I no longer have the style="width: 198px" in there anymore since I have reset all styles to the original from DD.

ddadmin
03-13-2009, 06:58 PM
For a list of valid doctypes, see here: http://www.javascriptkit.com/howto/doctype.shtml

fred2028
03-13-2009, 07:15 PM
For a list of valid doctypes, see here: http://www.javascriptkit.com/howto/doctype.shtml
Wow, it works. Thanks!