www.webdeveloper.com
Results 1 to 8 of 8

Thread: Menu is Fine in IE but not NS. please help

  1. #1
    Join Date
    May 2005
    Location
    Cape Town, South Africa
    Posts
    35

    Question Menu is Fine in IE but not NS. please help

    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.

    Code:
    .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.
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    Join Date
    May 2005
    Posts
    2,040
    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.

  3. #3
    Join Date
    May 2005
    Location
    Cape Town, South Africa
    Posts
    35
    Quote Originally Posted by drhowarddrfine
    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

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    May 2005
    Location
    Cape Town, South Africa
    Posts
    35
    Quote Originally Posted by ray326
    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.

  6. #6
    Join Date
    May 2005
    Location
    Cape Town, South Africa
    Posts
    35
    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?

  7. #7
    Join Date
    May 2005
    Posts
    2,040

  8. #8
    Join Date
    May 2005
    Location
    Cape Town, South Africa
    Posts
    35
    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.

    Code:
    /* 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.
    Attached Files Attached Files

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles