SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help To Make this work in Netscape

    I have downloaded this javascript menu system from hotscripts.com and it is an awsome application syle like menu except it look completly different in NS compared to IE.

    Can any one give me a hand with this as I have been racking my brain.

    Thanks

    Mike

    PS - There should be a file attachment once this post gets approved.
    Attached Files Attached Files

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I have downloaded this javascript menu system
    The attachment isn't showing yet but are you sure you don't want this moved to the javascript forum ?

    Paul

  3. #3
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it is a CSS issue. Once the file is ok'd you will see what I mean (I think)

    Thanks, Mike

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    You didn't say what the problems were so I assume its the fact that in mozilla/netscape the height of the elements is larger than in ie.

    You have a number of errors in your css and it would pay to run it through the css valaidator which would pick these out for you.

    Firstly you have missed the units off your measurements e.g(border:1 solid #000). You must specify a unit such px (border:1px solid #000.) Otherwise mozilla will treat them as zero.

    Also you have no doctype on your page which means that you are working in quirks mode and ie6 will be using the broken box model. This means that padding and borders will be included in the height and width of an element instead of being added to it as per the specs.

    Even if you use the box model hacks for this your page will be wrong unless you include a valid doctype because the hacks only apply to ie5 and 5.5. IE6 understands the hacks and gets the wrong information back.

    You also have .Menu and class="menu" so you must keep the case the same for both.

    Taking into account the above the css and doctype should be as follows:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<meta http-equiv='page-enter' content='blendtrans(duration=0.1)'>
    	<script language='javascript' src='leftmenu.js'></script>
    <style type="text/css">
    body,td {
    color: #000000;font-family:tahoma, verdana, helvetica; font-size: 11px; font-weight:none;
    scrollbar-face-color: #ffffff;
    scrollbar-shadow-color: #006699;
    scrollbar-base-color : #ffffff;
    scrollbar-highlight-color: #006699;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-track-color: #f8f8f8;
    scrollbar-arrow-color: #006699;
    }
    a { color:#006699; text-decoration:none; font-weight:bold;}
    a:hover { color:#000000; text-decoration:none; font-weight:bold;}
    a:active { color:#000000; text-decoration:none; font-weight:bold ;}
    .menu
    { height:23px; padding:2px 5px 3px 2px; border-right: buttonshadow 1px solid; border-top: #f5f5f5 1px solid; border-left: #f5f5f5 1px solid; border-bottom: buttonshadow 1px solid; background-color: buttonface; cursor:hand; color:#000000;}
    *html .menu {height:28px;he\ight:23px}
    .option
    { height: 19px; padding:2px 5px 3px 16px; border: 1px solid #ffffff; background-color: #f5f5f5; cursor:hand;}
    *html .option {height:24px;he\ight:19px}
    .options {padding:1px}
    </style>
    Your html is also invalid and you have nested divs inside spans which is not allowed. Again, if you run your code through the w3c validator these errors will be picked up and save you a lot of trouble later on.

    Hope that helps.

    Paul


Bookmarks

Posting Permissions

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