1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

z-index in Firefox

Discussion in 'CSS' started by Navarone, Feb 20, 2006.

0
  1. #1
    Is there some rule about z-index in Firefox?

    I am having issues with my menu overlaying the text on this page and the info@email link working correctly.

    http://dev.kleidon.com/contact.asp
     
    Navarone, Feb 20, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    If you view topographic information from Firefox's web developer extension you will see the problem immediately. The top level menu items are absolute positioned, and overlay the mail link. Firefox correctly sees that as masking the link. IE incorrectly allows focus/click through the menu item. I think, and I'm not going bother testing a table based menu, that you could make the dropdown {display: none;} instead of {visibility: hidden;} and unmask the mail link.

    Your table markup does not reflect the structure of a menu nor is it semantic. This should be marked up as a list. Go to ALA and search for 'suckerfish'.

    cheers,

    gary
     
    kk5st, Feb 20, 2006 IP
  3. Navarone

    Navarone Guest

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey thanks for the reply.
    How do I view this or get this extension.:)

    The suckerfish example use text can you use images?

    --edited---
    I tried display:none, but now the menu doesn't show up at all.

    What do mean by this?
     
    Navarone, Feb 21, 2006 IP
  4. Navarone

    Navarone Guest

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ok, I made a test page so I can learn how to do this list menu thing. I been successful so far but I can't seem to get the spacing working between the <li> items on IE and FF. Do you have any suggestions?

    http://dev.kleidon.com/test.htm
     
    Navarone, Feb 21, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    You should never, not ever, use javascript, flash, or even css for basic functionality. You cannot depend on the client for anything beyond plain html. Again, study the "Suckerfish" dropdowns. Below is a basic example of a dropdown. It doesn't work in IE due to lack of css support. That's where Suckerfish comes in.

    If you don't have Firefox as your main testbed, you cannot do website development effectively. From the Firefox page, look for "extensions" and install the web developer extension. It will provide several tools to aid in html and css coding. When you install Firefox, make the custom install with the DOM inspector. That enables the javascript console, which is invaluable for debugging.
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <title></title>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

ul {
    background-color: white;
    margin: 0;
    padding: 0;
    list-style: none;
    }

li {
    position: relative;
    display: inline;
    padding: 0 5px;
    }

ul ul li {
    display: block;
    }

ul li ul {
    border: 1px solid black;
    display: none;
    padding: 0 10px;
    position: absolute;
    top: 1em;
    left: 0;
    width: 4em;
    }

ul li:hover ul {
    display: block;
    }

/*]]>*/
</style>
</head>

<body>
  <ul>
    <li>item 1

      <ul>
        <li>sub a</li>

        <li>sub b</li>

        <li>sub c</li>

        <li>sub d</li>

        <li>sub e</li>

        <li>sub f</li>
      </ul>
    </li>

    <li>item 2

      <ul>
        <li>sub a</li>

        <li>sub b</li>

        <li>sub c</li>

        <li>sub d</li>

        <li>sub e</li>

        <li>sub f</li>
      </ul>
    </li>

    <li>item3

      <ul>
        <li>sub a</li>

        <li>sub b</li>

        <li>sub c</li>

        <li>sub d</li>

        <li>sub e</li>

        <li>sub f</li>
      </ul>
    </li>
  </ul>

  <address>
    Kleidon &amp; Associates 302 Springdale Drive<br />

    <a href="mailto:info@kleidon.com">info</a>
  </address>
</body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Feb 21, 2006 IP
  6. Navarone

    Navarone Guest

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Ok, your example does not allow for images or image rollovers or image swaping, the suckerfish examples are all text based or text oriented (probably because its easier to write a tutorial using text vs. images), but that what I have images.

    I have to have an image rollover and on other pages rollovers with image swapping.

    I do have the Firefox browser with the extension, However, when I installed FF I did not do the custom install (oh..frack!):rolleyes:

    So how do you do a page like I exampled if you can't use javascript, flash, css? :)

    I challange you to show me:)
     
    Navarone, Feb 21, 2006 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    As for using images, replace the text in the <a>s with an image.

    I didn't say you couldn't use them, I said you shouldn't depend on them for functionality. If you turn the javascript off on your example, you've got nothing. You have to have the full content and markup first. Enhancements are laid on top.

    cheers,

    gary
     
    kk5st, Feb 21, 2006 IP
  8. Navarone

    Navarone Guest

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Ok, coming around full circle that still doesn't help me with my orignal issue of getting the menu to overlay the text and then the text link to work in FF. There has to be a way to do this, don't you agree. Is there anything you can do to help in this matter.
     
    Navarone, Feb 22, 2006 IP
  9. Navarone

    Navarone Guest

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Ok, i made some progress and I got this issue working in FF but my menu item spacing is off in IE. How can I correct this?
     
    Navarone, Feb 22, 2006 IP