Accordion menu widths

**fred2028** · 03-11-2009, 03:34 PM

1) Script Title: Accordion menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...enu-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

Originally Posted by Snookerman

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.

Code:

/* <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:

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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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=5B5DE4E79276469B809C9E07258A6124&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:

Code:

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

**fred2028** · 03-13-2009, 03:30 PM

Originally Posted by ddadmin

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:

Code:

<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

Originally Posted by ddadmin

For a list of valid doctypes, see here: http://www.javascriptkit.com/howto/doctype.shtml

Wow, it works. Thanks!

Thread: Accordion menu widths

Thread Tools

Search Thread

Accordion menu widths

Bookmarks

Bookmarks

Posting Permissions