PDA

Click to See Complete Forum and Search --> : Menu is Fine in IE but not NS. please help

marty
06-27-2005, 04:36 AM
Hi
I’m stumped by this CSS problem I have. It looks fine in IE but not in Netscape or Firefox.

The menu table on the left of the page is a separate include file, the first screen shot shows what it looks like in FireFixs, the second one shows what is SHOULD look like (IE). I have inserted the CSS attached my menu include file.

Any help will be appreciated

Below is past of my CSS file related to this side menu.

.MenuTable{
LINE-HEIGHT: 95%;
}

.mnpMenuRow {
BORDER-RIGHT: 1px solid;
PADDING-RIGHT: 15px;
BORDER-TOP: 1px solid;
PADDING-LEFT: 6px;
PADDING-BOTTOM: 3px;
MARGIN: 1px 0px;
BORDER-LEFT: 1px solid;
CURSOR: pointer;
COLOR: black;
PADDING-TOP: 1px;
BORDER-BOTTOM: 1px solid;
}

.mnpMenuRow A {

font-family:Verdana;
font-size:12px;
font-weight: Bold;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: black;
TEXT-DECORATION: none;
}
.mnpMenuRow A:visited {

font-family:Verdana;
font-size:12px;
FONT-weight: bold;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: black;
TEXT-DECORATION: none;
}
.mnpMenuRow A:hover {

font-family:Verdana;
font-size:12px;
FONT-weight: bold;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: black;
TEXT-DECORATION: none;
}

.mnpMenuRow {
font-family:Verdana;
font-size:11.5px;
}

.mnpMenuArrow {
MARGIN-TOP: 4px;
POSITION: absolute;
}
.KB {
margin-left: 0px;
list-style-type: none;
display: block;
font-family: verdana;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
width: 160px;
padding: 3px;
}
.KB li a.menu {
margin-left: 0px;
list-style-type: none;
display: block;
padding: 3px;
font-family: verdana;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
width: 160px;
padding: 3px;
margin: auto;
text-decoration: none;
}

.KB li a.menu:hover {
background-color: #cccccc;
border: 1px solid #999999;
}


.KB hr {
width: 160px;
color: #999999;
height: 1px;
}
.KB strong {
line-height: 20px;
}
.submenu {
visibility: hidden;
display: block;
position: absolute;
font-family: verdana;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #666666;
width: 130px;
padding: 3px;
margin-left: 0px;
list-style-type: none;
}

.submenu li a.menu {
margin-left: 0px;
list-style-type: none;
display: block;
padding: 3px;
font-family: verdana;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
width: 130px;
padding: 3px;
margin: auto;
text-decoration: none;
}

.submenu li a.menu:hover {
background-color: #cccccc;
border: 1px solid #999999;
}
.submenu2 {
visibility: hidden;
display: block;
position: absolute;
font-family: verdana;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #666666;
width: 145px;
padding: 3px;
margin-left: 0px;
list-style-type: none;
}

.submenu2 li a.menu {
margin-left: 0px;
list-style-type: none;
display: block;
padding: 3px;
font-family: verdana;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
width: 145px;
padding: 3px;
margin: auto;
text-decoration: none;
}

.submenu2 li a.menu:hover {
background-color: #cccccc;
border: 1px solid #999999;
}

Attched is also my include menu file

I hope this is enough information.
Thanking you all.
drhowarddrfine
06-27-2005, 07:35 AM
Your textfile does not show a doctype. This may solves some of your problems. Second, IE may be screwing you up on the box model sizes. Make it work for a modern browser, that is, Firefox, then adjust it for IE.
marty
06-27-2005, 07:39 AM
Your textfile does not show a doctype. This may solves some of your problems. Second, IE may be screwing you up on the box model sizes. Make it work for a modern browser, that is, Firefox, then adjust it for IE.

Thank you, but could you tell me what you mean by "box model sizes"
Thank you
ray326
06-27-2005, 11:26 PM
IE6 in quirks mode and older versions of IE do not size block elements correctly, that is it does not calculate the width as the sum of the width, padding and border.
marty
06-28-2005, 12:58 AM
IE6 in quirks mode and older versions of IE do not size block elements correctly, that is it does not calculate the width as the sum of the width, padding and border.
ok thanks, but that doesnt then explain why my cells and divs in my menu are messed up in FireFox and Netscape and fine in IE.
marty
06-28-2005, 05:29 AM
I have managed to fix most of it thanks guys. However I’m still having a problem with the positioning of the arrows. In IE if I resize the page the arrows still stay in the correct place. However in FF or NS they stay a certain distance from the edge of the window, looks like the same distance I want them at from the side of the page.

Also the fist DIV with the link “AllyCAD Home” is still larger than what it should be and the positioning is not right! :(

Any ideas?
drhowarddrfine
06-28-2005, 06:38 AM
Show us your updated code.
marty
06-28-2005, 06:53 AM
I haven't changed a lot.
I changed the height of my cell in the include menu which holds my menu to read 100% so now the menu reaches the bottom of the page with out empty space. And I got rid of the space at the top of the menu by placing "Valign="top" in the cell

I have attached a copy of my menu.htm file which is the include file

here is my FULL CSS
the CSS code that relates to the menu starts from ".MenuTable" to the end of the doc.

/* CSS Document */

.menu {
FONT-SIZE: 8pt;
font-family: verdana, sans-serif;
}


.highText {
color: #ffffff;
}

.search
{
cursor:pointer;
}


A.bottomLinks:link
{
COLOR: #5B594F;
FONT-FAMILY: Verdana, sans-serif;
FONT-SIZE: 80%;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline
}

A.bottomLinks:visited
{
COLOR: #5B594F;
FONT-FAMILY: Verdana, sans-serif;
FONT-SIZE: 80%;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline
}


A.bottomLinks:Hover
{
COLOR: #FF6103;
FONT-FAMILY: Verdana, sans-serif;
FONT-SIZE: 80%;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline;
}


A.normal:link
{
COLOR: #3B6BC4;
FONT-FAMILY: Verdana, sans-serif ;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline;
}

A.normal:active
{
COLOR: #3B6BC4;
FONT-FAMILY: Verdana, sans-serif;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline;
}

A.normal:visited
{
COLOR: #3B6BC4;
FONT-FAMILY: Verdana, sans-serif;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline;
}

A.normal:hover
{
COLOR: #EA3F03;
FONT-FAMILY: Verdana, sans-serif;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline;
}


A:link
{
COLOR: #3B6BC4;
FONT-FAMILY: Verdana, sans-serif ;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline;
}

A:active
{
COLOR: #3B6BC4;
FONT-FAMILY: Verdana, sans-serif;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline;
}

A:visited
{
COLOR: #3B6BC4;
FONT-FAMILY: Verdana, sans-serif;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline;
}

A:hover
{
COLOR: #EA3F03;
FONT-FAMILY: Verdana, sans-serif;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: underline;
}




td
{
COLOR: #484848;
font-family: verdana, sans-serif;
FONT-SIZE: 11.5px;
line-height: 1.5;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
}



.Date
{
font-family: verdana, sans-serif;
FONT-SIZE: 11.5px;
}


ol
{
font-family: verdana, sans-serif;
COLOR: #484848;
list-style-position: outside
}


.sidelinks {
font-family: Verdana, sans-serif;
color: #2C4F8F;
font-size: 11.5px;
font-weight: bold;
}


.answer {
color: #000080;
}



TEXTAREA
{
FONT-SIZE: 11.5px;
BACKGROUND-COLOR: white;
BORDER-BOTTOM: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
COLOR: black
}


select
{
FONT-SIZE: 11.5px;
BACKGROUND-COLOR: white;
BORDER-BOTTOM: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
COLOR: black
}


list
{
FONT-SIZE: 10pt;
BACKGROUND-COLOR: white;
BORDER-BOTTOM: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
COLOR: black
}

.hd1
{
font-family: Trebuchet MS, verdana, sans-serif;
font-size: 17pt;
color:#0F3063;


}


.showcase
{
font-family: verdana, sans-serif;
font-size: 115%;
font-weight: bold;
color:#324A70;
}


.hd2
{
font-family: verdana, sans-serif;
font-size: 100%;
font-weight:bold;
color:#425B97;
}


.hd3
{
margin-top: 3;
font-family: verdana, sans-serif;
font-size:100%;
font-weight:bold;
color:#425B97;
}


.hd4
{
margin-top: 10;
font-family: verdana, sans-serif;
font-size: 100%;
color:#425B97;
}


.hd5
{
font-family: Trebuchet MS, verdana, sans-serif;
font-size: 13pt;

color:#0F3063;

}


.leftmenu {
border: 1px solid #98AAB1;
}

.newsTables {
font-family: verdana, sans-serif;
font-size: 11.5px;
font-weight: bold;
color:#CC0066;
}

.bullets {
font-family:Verdana, sans-serif;
font-size:11px;
color:#183B83;
font-weight: bold;
}

.cell {
background-repeat: no-repeat;
}


.footer {
font-family:Verdana, sans-serif;
font-size:7pt;
color:#5B594F;
}


input.demo4 {
border:1px solid B2B2B2;
COLOR: #000000;

}


.Textbox
{
border-left:1px inset #000000;
border-right:1px inset #666666;
border-top:1px inset #000000;
border-bottom:1px inset #666666;
background-attachment: fixed;

font-family: verdana, sans-serif;
color: #484848;
}



.MenuTable{
LINE-HEIGHT: 95%;
}



.mnpMenuRow {
BORDER-RIGHT: 1px solid;
PADDING-RIGHT: 15px;
BORDER-TOP: 1px solid;
PADDING-LEFT: 6px;
PADDING-BOTTOM: 3px;
MARGIN: 1px 0px;
BORDER-LEFT: 1px solid;
CURSOR: pointer;
COLOR: black;
PADDING-TOP: 1px;
BORDER-BOTTOM: 1px solid;
}



.mnpMenuRow A {

font-family:Verdana, sans-serif;
font-size:12px;
font-weight: Bold;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: black;
TEXT-DECORATION: none;

}
.mnpMenuRow A:visited {

font-family:Verdana, sans-serif;
font-size:12px;
FONT-weight: bold;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: black;
TEXT-DECORATION: none;

}
.mnpMenuRow A:hover {

font-family:Verdana, sans-serif;
font-size:12px;
FONT-weight: bold;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: black;
TEXT-DECORATION: none;
}





.mnpMenuRow {
font-family:Verdana, sans-serif;
font-size:11.5px;

}

.mnpMenuArrow {
MARGIN-TOP: 4px;
POSITION: absolute;
}

.KB {
margin-left: 0px;
list-style-type: none;
display: block;
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
width: 160px;
padding: 3px;
}


.KB li a.menu {
margin-left: 0px;
list-style-type: none;
display: block;
padding: 3px;
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
width: 160px;
padding: 3px;
margin: auto;
text-decoration: none;
}

.KB li a.menu:hover {
background-color: #cccccc;
border: 1px solid #999999;
}


.KB hr {
width: 160px;
color: #999999;
height: 1px;
}
.KB strong {
line-height: 20px;
}


.submenu {
visibility: hidden;
display: block;
position: absolute;
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #666666;
width: 130px;
padding: 3px;
margin-left: 0px;
list-style-type: none;
}

.submenu li a.menu {
margin-left: 0px;
list-style-type: none;
display: block;
padding: 3px;
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
width: 130px;
padding: 3px;
margin: auto;
text-decoration: none;
}

.submenu li a.menu:hover {
background-color: #cccccc;
border: 1px solid #999999;
}



.submenu2 {
visibility: hidden;
display: block;
position: absolute;
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #666666;
width: 145px;
padding: 3px;
margin-left: 0px;
list-style-type: none;
}

.submenu2 li a.menu {
margin-left: 0px;
list-style-type: none;
display: block;
padding: 3px;
font-family: verdana, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
width: 145px;
padding: 3px;
margin: auto;
text-decoration: none;
}

.submenu2 li a.menu:hover {
background-color: #cccccc;
border: 1px solid #999999;
}


I hope all this info is enough.
Thanking you again.