CSS making sub menu width too wide

Poster: Mayor
Dated: Thursday September 27 2007 - 22:00:24 BST

I'm using the frame menu code and it works great. My problem happens when I need to load the following CSS. When not loaded the submenu width is 147px, when loaded it goes to 1053px. I've used iewatch and ie developer toolbar to try to find the CSS causing the problem without success. I'm wondering if the menu js is getting values based on the css that it would not normally see.

here is the CSS:
body {
background-color: white;
padding: 0px;
margin: 0px;
behavior: url(/vipsys/Newsite/csshover.htc)

}
#header {
color: #373B67; background: #2C3159 url(Graphics/background.gif) repeat;
padding: 0px;
margin: 0px;
}

#container {
padding: 0px;
margin: 0px;
}

#footer {
position: relative; /* Needed for Safari */
width: 100%;
}

h1, h2, h3 {
display: block;
}
p {
text-align: justify;
}
table {
width: 100%;
background-color: white;
}
th {
background-color: #295E80;
color: white;
text-align: center;
}

td {
vertical-align: top;
text-align: left;
padding: 10px 17px;

}

td.td3 {
width: 175px;
margin: 0px; padding: 0px;
}
td.td4 {
vertical-align: bottom;
margin: 0px; padding: 0px;
}
td.td5 {
padding: 10px 30px 0px 26px;
}
td.td6 {
margin: 0px; padding: 0px;
text-align: right;
font: 8pt "MS Sans Serif", Geneva, sans-serif;

}
td.td7 {
width: 500px;
margin: 0px; padding: 0px;
text-align: left;
font: 8pt "MS Sans Serif", Geneva, sans-serif;

}
td.td8 {
width: 400px;
margin: 0px; padding: 0px;
text-align: left;
font: 8pt "MS Sans Serif", Geneva, sans-serif;

}
td.td9 {
width: 800px;
margin: 0px; padding: 0px;
text-align: left;
font: 20pt "MS Sans Serif", Geneva, sans-serif, bold;
Height: 15px;

}

.h4img {
text-align: center;
}

h4.h4img a {
text-decoration: none;
}
img.img4 {
padding-bottom: 6px;
}

#whatsnew {
color: navy;
}
#whatsnew h1 {
margin-bottom: 25px;
border-bottom: 1px solid #2D7AAA;
font-size: 150%;
font-weight: bold;
}
#whatsnew p {
margin: 0px;
padding-bottom: 10px;
}
#whatsnew h3 {
font-size: 1.05em;
padding: 0px;
margin-bottom: 10px;
}

#catalog {
line-height: 22px;
color: black;
height: 100%;
}
#catalog img{
padding-right: 15px;
}
#catalog a {
line-height: 25px;
}
#catalog a, #calendar a, #office a, {
text-decoration: none;
}
#catalog a:link {
color: black;
}
#catalog a:visited {
color: #A6C247;
}
#catalog a:hover {
text-decoration: underline;
}

#birkscatalog {
line-height: 22px;
color: black;
height: 100%;
}
#birkscatalog img{
padding-right: 15px;
}
#birkscatalog a {
line-height: 25px;
}
#birkscatalog a, #calendar a, #office a, {
text-decoration: none;
}
#birkscatalog a:link {
color: black;
}
#birkscatalog a:visited {
color: #0098CB;

}
#birkscatalog a:hover {
text-decoration: underline;
}


#calendar img, #office img {
padding-bottom: 10px;
}

#calendar {
line-height: 22px;
color: Maroon;
}
#calendar a:link, a:visited, a:hover {
color: Maroon;
}
#calendar a:hover {
text-decoration: underline;
}

#office {
color: #8D7756;
text-align: left;
}

#space {
margin: 20px 20px;
border-bottom: 1px solid #acd;
}

#logo {
text-align: left;
}
#logo img {
height: 65px;
width: 350px;
border: 0px;
}

#topnavbar {
top: 3px;
right: 6px;
padding: 0;
position: absolute;
font-weight: bold;
}
#topnavbar a {
font-size: .92em;
}
#topnavbar a:link { color: #acd; text-decoration: none;}
#topnavbar b {display: none;}
#topnavbar a {text-decoration: none; padding: 2px 0.5em 2px 0.5em; }
#topnavbar a:visited {color: #acd; text-decoration: none;}
#topnavbar a:hover {text-decoration: underline;}

#nav1 {background: Black;
color: white;
height: 25px;
text-align: left;
font-size: 9pt;
font-family: "MS Sans Serif", Geneva, sans-serif; }

.date {
position: relative;
float:right;
right: 8px;
text-align: right;
color: white;
margin-top:-15px; padding: 0px;
font: normal 9px Verdana, Helvetica, sans-serif;}

#nav2 {background: White;
color: black;
text-align: left;
margin: 0px; padding: 0px;
font: 8pt Arial, "MS Sans Serif", Geneva, sans-serif;
}
span.topbanner, #nav3 {
margin-right: 10px;
}

#nav2 h2 {margin: 0px; padding-left:10px;}

.p1, .p2 {text-align: justify;}
.img1 {margin: 0px; padding-right: 12px;}
.img2 {margin: 0px; padding-left: 13px;}
.img3 {margin: 0px; padding-right: 12px;}

div#rightsidewrapper {text-align: right;background: #DEE8B5}
div#rightside {width: 170px;
font: normal 8pt/13px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: left;}
div#rightside ul {margin: 0; padding: 0; list-style-position: outside;}
div#rightside li {padding: 4px 0px 5px 2px;}
div#rightside a:link, div#storesysmenu .storesys a:link {color: black; text-decoration: none;}
div#rightside a:visited {color: Black;}
div#rightside a {text-decoration: none; padding: 0;}
div#rightside a:hover {color: Black; text-decoration: underline;}
div#rightside #sp_0 a, div#rightside #sp_9 a, div#rightside #sp_20 a, div#rightside #sp_33 a, div#rightside #sp_34 a, div#rightside #sp_36 a, div#rightside #sp_45 a, div#rightside #sp_50 a, div#rightside #sp_55 a, div#rightside #sp_57 a, div#rightside #sp_58 a, div#rightside #sp_60 a, div#rightside #sp_62 a {
color: Blue; font-weight: 400;}
div#rightside #sp_0 a:visited, div#rightside #sp_9 a:visited, div#rightside #sp_20 a:visited, div#rightside #sp_33 a:visited, div#rightside #sp_34 a:visited, div#rightside #sp_36 a:visited, div#rightside #sp_45 a:visited, div#rightside #sp_50 a:visited, div#rightside #sp_55 a:visited, div#rightside #sp_57 a:visited, div#rightside #sp_58 a:visited, div#rightside #sp_60 a:visited, div#rightside #sp_62 a:visited {
color: Blue; font-weight: 500;}
div#rightside #sp_0 a:visited:hover, div#rightside #sp_9 a:visited:hover, div#rightside #sp_20 a:visited:hover, div#rightside #sp_33 a:visited:hover, div#rightside #sp_34 a:visited:hover, div#rightside #sp_36 a:visited:hover, div#rightside #sp_45 a:visited:hover, div#rightside #sp_50 a:visited:hover, div#rightside #sp_57 a:visited:hover, div#rightside #sp_55 a:visited:hover, div#rightside #sp_58 a:visited:hover, div#rightside #sp_60 a:visited:hover, div#rightside #sp_62 a:visited:hover {
color: BLACK; font-weight: 500; text-decoration: underline;}
div#rightside #sp_34 a, div#rightside #sp_45 a, div#rightside #sp_50 a, {
color: #006400; font-weight: 400;}
div#rightside #sp_34 a:visited, div#rightside #sp_45 a:visited, div#rightside #sp_50 a:visited {
color: #006400; font-weight: 500;}

div#birksrightsidewrapper {text-align: right;background: #D8F0FF}
div#birksrightside {width: 170px;
font: normal 8pt/13px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: left;}
div#birksrightside ul {margin: 0; padding: 0; list-style-position: outside;}
div#birksrightside li {padding: 4px 0px 5px 2px;}
div#birksrightside a:link, div#storesysmenu .storesys a:link {color: black; text-decoration: none;}
div#birksrightside a:visited {color: Black;}
div#birksrightside a {text-decoration: none; padding: 0;}
div#birksrightside a:hover {color: Black; text-decoration: underline;}
div#birksrightside #sp_0 a, div#rightside #sp_9 a, div#rightside #sp_20 a, div#rightside #sp_33 a, div#rightside #sp_34 a, div#rightside #sp_36 a, div#rightside #sp_45 a, div#rightside #sp_50 a, div#rightside #sp_55 a, div#rightside #sp_57 a, div#rightside #sp_58 a, div#rightside #sp_60 a, div#rightside #sp_62 a {
color: Blue; font-weight: 400;}
div#birksrightside #sp_0 a:visited, div#rightside #sp_9 a:visited, div#rightside #sp_20 a:visited, div#rightside #sp_33 a:visited, div#rightside #sp_34 a:visited, div#rightside #sp_36 a:visited, div#rightside #sp_45 a:visited, div#rightside #sp_50 a:visited, div#rightside #sp_55 a:visited, div#rightside #sp_57 a:visited, div#rightside #sp_58 a:visited, div#rightside #sp_60 a:visited, div#rightside #sp_62 a:visited {
color: Blue; font-weight: 500;}
div#birksrightside #sp_0 a:visited:hover, div#rightside #sp_9 a:visited:hover, div#rightside #sp_20 a:visited:hover, div#rightside #sp_33 a:visited:hover, div#rightside #sp_34 a:visited:hover, div#rightside #sp_36 a:visited:hover, div#rightside #sp_45 a:visited:hover, div#rightside #sp_50 a:visited:hover, div#rightside #sp_57 a:visited:hover, div#rightside #sp_55 a:visited:hover, div#rightside #sp_58 a:visited:hover, div#rightside #sp_60 a:visited:hover, div#rightside #sp_62 a:visited:hover {
color: BLACK; font-weight: 500; text-decoration: underline;}
div#birksrightside #sp_34 a, div#rightside #sp_45 a, div#rightside #sp_50 a, {
color: #006400; font-weight: 400;}
div#birksrightside #sp_34 a:visited, div#rightside #sp_45 a:visited, div#rightside #sp_50 a:visited {
color: #006400; font-weight: 500;}

h3 span {display: none;}
h3.information, h3.application, h3.administration, h3.documentation {
height: 30px;
margin: 0; padding: 0 3px 3px 0;
}
h3.information {
background: transparent url(../Graphics/information.gif) no-repeat top left;
}
h3.application {
background: transparent url(../Graphics/application.gif) no-repeat top left;
}
h3.administration {
background: transparent url(../Graphics/administration.gif) no-repeat top left;
}
h3.documentation {
background: transparent url(../Graphics/documentation.gif) no-repeat top left;
}

ul.zzul {list-style-type: none; display: block; list-style-position: outside;}

ul.zzul1 {list-style-type: none; display: block;}
ul.zzul1 li {
text-indent: 11px;
border: 1px solid red;
}
table#data1, table#data2, table#data5 {
font-size: 11px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
table#data5 {
border-top: 1px solid silver;
border-right: 1px solid silver;
width: 101%;
}
table#data5 td {
padding: 0; margin:0;
text-align: center;
vertical-align: middle;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
white-space: nowrap;
}
table#data1 {table-layout: auto;}
table#data3 {
width: 60%;
}
table#data4 {
width: 80%;
background-color: #F0F8FF;
border: 1px solid navy;
height: 100%;
}

table#data1 a:link, table#data1 a:visited, table#data2 a:link, table#data2 a:visited, table#data3 a:link, table#data3 a:visited {
text-decoration: none;
}
table#data1 a:visited:hover, able#data2 a:visited:hover, table#data3 a:visited:hover {
text-decoration: underline;
}
table#data1 a:link, table#data2 a:link, table#data3 a:link {
color: #657A71;
}
table#data1 a:visited, table#data2 a:visited {
color: Gray;
}
table#data1 a:hover, table#data2 a:hover, table#data3 a:hover {
text-decoration: underline;
}

table#data1 th, table#data2 th {
text-align: right;
padding: 0px;
}
table#data3 th {
text-align: center;
padding: 0px;
}
table#data3 td {
text-align: center;
line-height: 10px;
}
table#data1 th.headerstyle, table#data2 th.headerstyle {
text-align: left;
}
table#data1 th.headerstyle {
width: 250px;
}

table#data2 th.headerstyle4 {
width: 20%;
}
table#data1 th.headerstyle3, table#data2 th.headerstyle3, table#data2 th.headerstyle4 {
text-align: center;
}

table#data1 th.headerstyle2 a:link {
text-decoration: underline;
color: white;
font-size: 12px;
}
table#data1 th.topcolumnborder {
border-top: 1px solid Gray;
border-left: 1px solid Gray;
border-right: 1px solid Gray;
border-bottom: none;
letter-spacing: 15px;
font-size: 18px;
text-align: center;
vertical-align: middle;
font-variant: small-caps;
color: white;
}

table#data1 td, table#data2 td {
text-align: right;
vertical-align: middle;
padding: 0px; margin: 0px;
line-height: 20px;
}
table#data4 tr {
line-height: 30px;
}
table#data4 td {
text-align: center;
vertical-align: middle;
border: 1px solid steelblue;

}
table#data1 td.columnstyle, table#data2 td.columnstyle {
text-align: left;
font-weight: bold;
font-size: 12px;
}
table#data1 td.columnstyle {
width: 300px;
}

table#data1 td.columnstyle2 {
width: 110px;
}

table#data2 td.columnstyle4 {
font-weight: bold;
font-size: x-small;
}
table#data1 td.columnstyle5 {
text-align: left;
}
table#data2 td.columnstyle6 {
font-size: x-small;
}
table#data1 td.columnstyle3, table#data2 td.columnstyle3, table#data2 td.columnstyle4, table#data2 td.columnstyle6 {
text-align: center;
}
table#data1 h4, table#data2 h4 {
padding-bottom: 10px; margin-bottom: 0px;
}
table#data1 h4 b, table#data2 h4 b {
color: #2F4F4F;
font-weight: bold;
text-decoration: underline;
}

.totalline, tr.linetotaltd {
font-weight: bold;
background-color: #E6E1CE;
}
#navigation {width: 100%; background-color: #DDDDDD;}
div#navbar {float: left; background: #DDDDDD; margin: 0px; font-size: 16px;}
div#navbar ul {margin: 0; padding: 0; background: #EDEDED;}
div#navbar li {position: relative; list-style: none; margin: 0;
float: left; width: 10.5em; line-height: 1em;}
div#navbar li:hover {background: #D1DED7;}
div#navbar li.submenu:hover {background-color: #D1DED7;}
div#navbar li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 10em; color: Navy; text-align: center;}
div#navbar>ul a {width: auto;}
div#navbar ul ul {position: absolute; width: 10.5em;
display: none;}
div#navbar ul ul li {text-align: center;}
div#navbar li.submenu li.submenu:hover {background-color: #D1DED7;}
div#navbar li.submenu li.submenu:hover {background-color: #D1DED7;}
div#navbar ul.level1 li.submenu:hover ul.level2,
div#navbar ul.level2 li.submenu:hover ul.level3,
div#navbar ul.level3 li.submenu:hover ul.level4,
div#navbar ul.level2 li.submenu:hover ul.level5 {display:block;}

div#navbar ul.level2 {top: 1.45em; left: -1px; background-color: #EDEDED;}
div#navbar ul.level3 {top: -1px; left: 10.5em; border-top: 1px solid #CCC;}
div#navbar ul.level4 {top: -1px; left: 10.5em; border-top: 1px solid #CCC;}
div#navbar ul.level5 {top: -1px; left: -10.5em; border-top: 1px solid #CCC;}


div#maintable table, div#secondtable table {
margin-right: 65px;
width: 85%;
table-layout: fixed;
}

th#topcolumnborder {
border-top: 1px solid Gray;
border-left: 1px solid Gray;
border-right: 1px solid Gray;
border-bottom: none;
letter-spacing: 15px;
font-size: 18px;
text-align: center;
vertical-align: middle;
font-variant: small-caps;
color:White;
}

tr#columnborderrightth th {
border-right: 0.07em solid Gray;
border-bottom: 1px solid Gray;
border-top: 1px solid Gray;
border-left: none;
font-weight: bold;
text-align: center;
vertical-align: middle;
}

tr#columnborderrighttd td {
border-right: 0.07em solid Gray;
border-bottom: 0.03em solid Gray;
border-top: none;
border-left: none;
width: 12.5%;
vertical-align: middle;
text-align: right;

}
tr#columnborderrighttd1 td {
border-right: 0.07em solid Gray;
border-bottom: 0.03em solid Gray;
border-top: none;
border-left: none;
vertical-align: middle;
width: 10.25%;

}

tr#columnborderrightth .columnborderleftth {
border-left: 1px solid Gray;
}

tr#columnborderrighttd .columnborderlefttd {
border-left: 1px solid Gray;
text-align: center;
}

tr#columnborderrighttd1 .columnborderlefttd {
border-left: 1px solid Gray;
text-align: left;
width: 27%;
}
tr#columnborderrighttd1 .unitswidth {
width: 7%;
}

tr.linetotaltd b {
font-size: 110%;
}

b {
font-size: 90%;
}

td#alignleft {
text-align: left;
}

td#alignright {
text-align: right;
}

td#aligncenter {
text-align: center;}

#note {
font: small-caption;
text-align: left;
padding-top: 7px;
padding-bottom: 7px;
margin-left: 70px;

}
#subtitle {
text-align: left;
padding: 10px;
font-size: x-small;
}
#subtitle span {
color: #DAA520; font-weight: bold;
padding-left: 6px;
padding-right: 20px;
}
table#data2 {
table-layout: fixed;
}

tr#subheader th {
background-color: #DDDDDD;
color: navy;
line-height: 20px;
text-align: right;
}
#backbutton {
text-align: right;
margin: 0px; padding: 0px;
}
#text1 {
margin: 0px;
padding: 0px;
}
#text2 {
margin-top: -28px;
text-align: right;
padding-right: 30px;
}
#text2 a {
color: #467477;
text-decoration: none;
}
#text2 a:hover {
text-decoration: underline;
}
#text3 {
margin: 2px 25px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
td#text6 p {
font-size: large;
}
td#text6 img {
padding-bottom: 6px;
}

form {
margin:0px;
padding: 5px 0px;
}
#text4 {
width: 80%;
margin:0px;
padding: 0px;
}
#text4 h4 {
background-color: #295E80;
color: white;
margin: 0px; padding: 4px;}
#text4 input {
margin: 5px;
}
div#storesysmenuwrapper {
text-align: center;
height: 100%;
}

div#storesysmenu {
border: 1px solid navy;
height: 100%;
line-height: 20px;
font-size: 13px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: center;
background-color: #F0F8FF;
width: 537px;
}
.storesys {
padding: 20px 0px;
width: 260px;
text-align: left;
}
blockquote {
font-size: large;
}
.last {
margin-bottom: 2px;
}
sup {
font-size: 8pt;
font-family: "MS Serif", "New York", serif;
font-weight: lighter;
}

Re: CSS making sub menu width too wide

Poster: Ruth
Dated: Saturday October 6 2007 - 3:23:00 BST

Hi,

We need to have a url so we can test the full page. It may not be the css, or it may be the css in combination with something else, so without the page we could be experimenting and not find the cause or solution.

Ruth