Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. Business *****
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    Denmark
    Posts
    222
    Rep Power
    14

    Suckerfish Dropdowns


    Hi... I've been having some small problems with the following guide:

    http://www.alistapart.com/articles/dropdowns

    I've tried to put it onto my page and now I've uploaded a couple of pages so you can see the problem.. Visit the following link:

    saraedu.1go.dk

    Here you will see a menu at the top, which looks very weird... The menu should have looked like the menu here:

    saraedu.1go.dk/info.php

    But in the first php document (index.php) I've followed the guide, and in the other, I followed my own intuition.. (so ignorere the weird menu's popping up if you move your mouse over "produkter" or "tjenester"

    I need the menu to physicly look like the one in info.php... I need it to act perfectly like a dynamic menu... I need it to not flicker (as it does now)... Can someone help me? I've tried a little, but can't seem to find what I have to change!

    For the convenience.. I've posted the two relevant codes here.. index.php and style.css

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
    <
    html>
    <
    head>
        <
    title>Zepcom</title>
    <
    link href="style/style.css" rel="stylesheet" type="text/css" />
    <
    script type="text/javascript">
    startList = function() {
    if (
    document.all&&document.getElementById) {
    navRoot document.getElementById("nav");
    for (
    i=0i<navRoot.childNodes.lengthi++) {
    node navRoot.childNodes[i];
    if (
    node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      
    node.onmouseout=function() {
      
    this.className=this.className.replace(" over""");
       }
       }
      }
     }
    }
    window.onload=startList;
    </script>
    </head>

    <body>

    <div id="box">
    <img src="img/logo.png" alt="Zepcom" id="logo" />

    <div id="menu">
    <ul id="nav">
        <li>|&nbsp;&nbsp;<a href="index.php" alt="Forside">Forside</a>&nbsp;&nbsp;|</li>
        
        <li>&nbsp;&nbsp;<a href="profil.php" alt="Profil">Profil</a>&nbsp;&nbsp;|</li>
        
        <li>&nbsp;&nbsp;<a href="produkter.php" alt="Produkter">Produkter</a>&nbsp;&nbsp;|
            <ul>
                <li><a href="software.php" alt="Software Produkter">Software Produkter</a></li>
                <li><a href="networkprod.php" alt="Netv&aelig;rks">Netv&aelig;rks Produkter</a></li>
                <li><a href="securityprod.php" alt="IT Sikkerheds Produkter">IT Sikkerheds Produkter</a></li>
                <li><a href="webloesninger.php" alt="Webl&oslash;sninger">Webl&oslash;sninger</a></li>
            </ul>
        </li>
        
        
        <li>&nbsp;&nbsp;<a href="tjenester.php" alt="Tjenester">Tjenester</a>&nbsp;&nbsp;|
            <ul>
                <li><a href="securityconsult.php" alt="IT Sikkerheds Konsultering">IT Sikkerheds Konsultering</a></li>
                <li><a href="networkconsult.php" alt="Netv&aelig;rks Konsultering">Netv&aelig;rks Konsultering</a></li>
                <li><a href="customprogramming.php" alt="Custom Programmering">Custom Programmering</a></li>
                <li><a href="hackertest.php" alt="Hacker Test">Hacker Test</a></li>
            </ul>
        </li>

        
        <li>&nbsp;&nbsp;<a href="info.php" alt="Information">Information</a>&nbsp;&nbsp;|
            <ul>
                <li><a href="generel.php" alt="Generel Information">Generel Information</a></li>
                <li><a href="aboutus.php" alt="Om os">Om os</a></li> 
                <li><a href="history.php" alt="Zepcom's Historie">Zepcom's Historie</a></li>
                <li><a href="job.php" alt="Job Ans&oslash;gning">Job Ans&oslash;gning</a></li>                    
            </ul>
        </li>
                        
        <li>&nbsp;&nbsp;<a href="kontakt.php" alt="Kontakt">Kontakt</a>&nbsp;&nbsp;|</li>

    </ul>
    </div>


    <div id="textbox">
    <h3>"FORSIDE"</h3>
    </div>
    </div>
    <div id="copyright">
    Copyright &copy; Zepcom 2005 
    </div>
    </body>
    </html> 


    ............And the css document


    PHP Code:
    body{
      
    font-familyVerdanaArialGaramondserif;
      
    font-size10px;
    }

    h1{
      
    font-familyVerdanaArialGaramondserif;
      
    font-size14px;
    }

    h3{
      
    font-familyVerdanaArialGaramondserif;
      
    font-size12px;
    }

    h2{
      
    font-familyVerdanaArialGaramondserif;
      
    font-size13px;
      
    letter-spacing1px;
    }

    #menu a {
      
    colorgrey;
      
    font-size13px;
      
    font-familyVerdanaGaramondArialserif;
      
    text-decorationnone;
    }

    #menu a:hover {
      
    colorblue;
      
    font-size13px;
      
    font-familyVerdanaGaramondArialserif;
      
    text-decorationnone;
    }

    #logo{
      
    floatright;
      
    border-stylenone;
      
    width342.4px;
      
    height244px;
    }

    #box{
      
    margin-top6px;
      
    width923px;
      
    height642px;
      
    border-stylesolid;
      
    border-colorblack;
      
    border-width1px;
      
    overflowauto;
      
    margin-leftauto;
      
    margin-rightauto;
      
    overflowauto;
    }
     
    #copyright {
      
    width925px;
      
    height105px;
      
    margin-leftauto;
      
    margin-rightauto;
      
    overflownone;
    }

    #menu {
      
    margin-top20px;
      
    margin-left20px;
      
    margin-right5px;
      
    overflownone;
      
    border-stylenone;
      
    height12px;
      
    width550px;
      
    floatleft;
      
    colorgrey;
      
    font-size13px;
      
    font-familyVerdanaGaramondArialserif;
    }

    #textbox{
      
    margin-left12px;
      
    margin-top30px;
      
    width550px;
      
    height430px;
      
    border-stylenone;
      
    overflowauto;
      
    floatleft;
    }  
      
    #menu_dyn1{
      
    positionabsolute;
      
    left40px;
      
    top40px
      
    font-size13px;
      
    font-familyVerdanaGaramondArialserif;
      
    text-decorationnone;
      
    colorgrey;
      
    background-colorwhite;
      
    border-stylesolid;
      
    border-width1px;
    }

    #menu_dyn2{
      
    positionabsolute;
      
    left60px;
      
    top40px
      
    font-size13px;
      
    font-familyVerdanaGaramondArialserif;
      
    text-decorationnone;
      
    colorgrey;
      
    background-colorwhite;
      
    border-stylesolid;
      
    border-width1px;
    }

    #menu_dyn3{
      
    positionabsolute;
      
    left80px;
      
    top40px
      
    font-size13px;
      
    font-familyVerdanaGaramondArialserif;
      
    text-decorationnone;
      
    colorgrey;
      
    background-colorwhite;
      
    border-stylesolid;
      
    border-width1px;
    }

    ul {
      
    padding0;
      
    margin0;
      list-
    stylenone;
    }

    li {
      
    floatleft;
      
    positionrelative;
      
    width7em;
    }
     
    li ul {
      
    displaynone;
      
    positionabsolute;
      
    top1em;
      
    left0;
    }

    li ul {
      
    topauto;
      
    leftauto;
    }

    li:hover ulli.over ul displayblock; } 
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Please fix your XHTML and CSS errors. (Ignore the CSS color warnings.)

    http://validator.w3.org/check?verbos...araedu.1go.dk/
    http://validator.w3.org/check?verbos...go.dk/info.php
    http://jigsaw.w3.org/css-validator/v...araedu.1go.dk/
    Code:
    http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//saraedu.1go.dk/info.php
    • <a ... alt="..."> should be <a ... title="...">
    • onMouseOver= should be onmouseover=
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Business *****
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    Denmark
    Posts
    222
    Rep Power
    14
    I fix errors when I'm finished with the overall coding... So please answer my question instead... I very well know there are errors!
  6. #4
  7. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    829
    Rep Power
    85
    Although I don't know what errors you have, if you do have errors it will increase the chances of your page rendering incorrectly because browsers try and fix lazy coding, but they never do it the same way.

    The problem seems to be that you have a margin between the list items, so when your mouse leaves the list area the menu disappears. You will have to play around with your margins and padding (which don't work the same cross-platform) to fix this.

    Can I recommend using the latest version of Suckerfish? It's more stable than the one on ALA, and is more interoperable.

    Comments on this post

    • Mondus agrees : He was very helping and actually solved my problem!
    • mdboy agrees : Spot on.
    We are troll foldy-rolls and we'll eat you for our supper.
  8. #5
  9. Business *****
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    Denmark
    Posts
    222
    Rep Power
    14
    Thank you for the new version of suckerfish.. and I will also take care of those errors right after I'm finished with my bath (it's raining and I'm freakishly cold!)... The page:

    saraedu.1go.dk

    ... has been updated with the new version of suckerfish.. but now the problem just got even larger... You said something about the margins... but which elements margins were you refering to?

    If anyone can help me get the menu to look (at least mostly) like the one on:

    saraedu.1go.dk/info.php ... I would be really greatfull.. since that is the design I want...
  10. #6
  11. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    829
    Rep Power
    85
    I don't want to sound condescending, but did you read the tutorial?
    We are troll foldy-rolls and we'll eat you for our supper.
  12. #7
  13. Business *****
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    Denmark
    Posts
    222
    Rep Power
    14
    Yes I read the tutorial... and the tutorial before... and the theoretical tutorial from before where they go through changing lists (about 8 pages as I remember).. But I can look again!
  14. #8
  15. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    829
    Rep Power
    85
    Well, I don't want to do all your work for you, but just cleaning up the HTML, taking away those nasty non-breaking spacers and adding a border to "#nav li ul" gets you well on your way to your desired effect...

    Good luck

    [code="everything"]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Zepcom</title>
    <style type="text/css">

    body{
    font-family: Verdana, Arial, Garamond, serif;
    font-size: 10px;
    }

    h1{
    font-family: Verdana, Arial, Garamond, serif;
    font-size: 14px;
    }

    h3{
    font-family: Verdana, Arial, Garamond, serif;
    font-size: 12px;
    }

    h2{
    font-family: Verdana, Arial, Garamond, serif;
    font-size: 13px;
    letter-spacing: 1px;
    }

    #menu a {
    color: grey;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    }

    #menu a:hover {
    color: blue;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    }

    #logo{
    float: right;
    border-style: none;
    width: 342.4px;
    height: 244px;
    }

    #box{
    margin-top: 6px;
    width: 923px;
    height: 642px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    }

    #copyright {
    width: 925px;
    height: 105px;
    margin-left: auto;
    margin-right: auto;
    overflow: none;
    }

    #menu {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 5px;
    overflow: none;
    border-style: none;
    height: 12px;
    width: 550px;
    float: left;
    color: grey;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    }

    #textbox{
    margin-left: 12px;
    margin-top: 30px;
    width: 550px;
    height: 430px;
    border-style: none;
    overflow: auto;
    float: left;
    clear: left;
    }

    #menu_dyn1{
    position: absolute;
    left: 40px;
    top: 40px;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    color: grey;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    }

    #menu_dyn2{
    position: absolute;
    left: 60px;
    top: 40px;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    color: grey;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    }

    #menu_dyn3{
    position: absolute;
    left: 80px;
    top: 40px;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    color: grey;
    background-color: white;
    border-style: solid;
    border-width; 1px;
    }

    #nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #nav a {
    display: block;
    width: 4em;
    }

    #nav li {
    float: left;
    width: 10em;
    }

    #nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    border: 1px solid #333;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

    </style>
    <script type="text/javascript">
    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    </head>

    <body>
    <div id="box">
    <img src="http://saraedu.1go.dk/img/logo.png" alt="Zepcom" id="logo" />
    <div id="menu">
    <ul id="nav">

    <li><a href="index.php">Forside</a></li>
    <li><a href="profil.php">Profil</a></li>
    <li><a href="produkter.php">Produkter</a>
    <ul>
    <li><a href="software.php">Software Produkter</a></li>
    <li><a href="networkprod.php">Netv&aelig;rks Produkter</a></li>

    <li><a href="securityprod.php">IT Sikkerheds Produkter</a></li>
    <li><a href="webloesninger.php">Webl&oslash;sninger</a></li>
    </ul>
    </li>
    <li><a href="tjenester.php">Tjenester</a>
    <ul>
    <li><a href="securityconsult.php">IT Sikkerheds Konsultering</a></li>

    <li><a href="networkconsult.php">Netv&aelig;rks Konsultering</a></li>
    <li><a href="customprogramming.php">Custom Programmering</a></li>
    <li><a href="hackertest.php">Hacker Test</a></li>
    </ul>
    </li>
    <li><a href="info.php">Information</a>

    <ul>
    <li><a href="generel.php">Generel Information</a></li>
    <li><a href="aboutus.php">Om os</a></li>
    <li><a href="history.php">Zepcom's Historie</a></li>
    <li><a href="job.php">Job Ans&oslash;gning</a></li>
    </ul>

    </li>

    <li><a href="kontakt.php">Kontakt</a></li>
    </ul>
    </div>
    <div id="textbox">
    <h3>"FORSIDE"</h3>
    </div>
    </div>
    <div id="copyright">
    Copyright &copy; Zepcom 2005
    </div>
    </body>
    </html>
    [/code]
    Last edited by Grafmix; September 28th, 2005 at 04:56 AM.
    We are troll foldy-rolls and we'll eat you for our supper.
  16. #9
  17. Business *****
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    Denmark
    Posts
    222
    Rep Power
    14
    Hehe.. ARRRRGGGHHH.. ok.. I put the page up on:

    saraedu.1go.dk ... And I got all the menu items on one line... I got the menus working.. the borders.. everything... however.. to get the dropdowns to look good, I wrote "width: -6em;" which is illegal.. but I can't find a better way... And now I finally get how it manages the space between the top menu items.. there is a set space between each starting point, which means that if the top menu's name is longer than the one before, then there will be a shorter space between that one and the next.. this isn't too great.. is there a way to make the same space between them instead... so that it doesn't do that ****?
  18. #10
  19. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    829
    Rep Power
    85
    Young Padawan, you have much to learn. Saying that made me feel like a right nerd!

    Anyway, you have to think logically. You want the top level of the list to be evenly spaced, and the list items in the 'dropdowns' to be nice and wide, but we want to take the float off them so it displays correctly. If we edit the properties for "#nav li", due to the cascading nature of this craft, list items within those list items will inherit the top level properties! So, we'll make a class for the top level list items.
    [code="css"]
    #nav li.top {
    float: left;
    width: auto;
    padding-right: 2em;
    }
    [/code]
    Right, now for the 'dropdown' lists. Note how the cascading works again. You have your top level list items (now called <li class="top"> contained within your main <ul>, but within the top level lists, you have the secondary level lists (the 'dropdowns') for example:
    [code=html]
    <ul id="nav"><!--main list, the 'container' for the whole menu-->
    <li class"top"><a href="produkter.php">Produkter</a><!--top level list item-->
    <ul><!--secondary level list-->
    <li><!--see below-->
    [/code]
    the last <li> tag is the one we need to style in css to make sure the list items don't float left, and are wide enough to accomodate long words, so in css we would do it like this:
    [code=css]
    #nav li ul li {
    width: 14em;
    }
    [/code]
    This list item won't inherit the properties of "li.top" because that's in a class of it's own

    Here is the whole shebang, stick it all in a text file and save it as "test.htm" or whatever and you can see what I mean:

    [code="the whole shebang"]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Zepcom</title>
    <style type="text/css">

    body{
    font-family: Verdana, Arial, Garamond, serif;
    font-size: 10px;
    }

    h1{
    font-family: Verdana, Arial, Garamond, serif;
    font-size: 14px;
    }

    h3{
    font-family: Verdana, Arial, Garamond, serif;
    font-size: 12px;
    }

    h2{
    font-family: Verdana, Arial, Garamond, serif;
    font-size: 13px;
    letter-spacing: 1px;
    }

    #menu a {
    color: grey;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    }

    #menu a:hover {
    color: blue;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    }

    #logo{
    float: right;
    border-style: none;
    width: 342.4px;
    height: 244px;
    }

    #box{
    margin-top: 6px;
    width: 923px;
    height: 642px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    }

    #copyright {
    width: 925px;
    height: 105px;
    margin-left: auto;
    margin-right: auto;
    overflow: none;
    }

    #menu {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 5px;
    overflow: none;
    border-style: none;
    height: 12px;
    width: 550px;
    float: left;
    color: grey;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    }

    #textbox{
    margin-left: 12px;
    margin-top: 30px;
    width: 550px;
    height: 430px;
    border-style: none;
    overflow: auto;
    float: left;
    clear: left;
    }

    #menu_dyn1{
    position: absolute;
    left: 40px;
    top: 40px;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    color: grey;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    }

    #menu_dyn2{
    position: absolute;
    left: 60px;
    top: 40px;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    color: grey;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    }

    #menu_dyn3{
    position: absolute;
    left: 80px;
    top: 40px;
    font-size: 13px;
    font-family: Verdana, Garamond, Arial, serif;
    text-decoration: none;
    color: grey;
    background-color: white;
    border-style: solid;
    border-width; 1px;
    }

    #nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #nav a {
    display: block;
    }

    #nav li.top {
    float: left;
    width: auto;
    padding-right: 2em;
    }

    #nav li ul li {
    width: 14em;
    }

    #nav li ul {
    position: absolute;
    width: 14em;
    left: -999em;
    border: 1px solid #333;
    background-color: white;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

    </style>
    <script type="text/javascript">
    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    </head>

    <body>
    <div id="box">
    <img src="http://saraedu.1go.dk/img/logo.png" alt="Zepcom" id="logo" />
    <div id="menu">
    <ul id="nav">
    <li class="top"><a href="index.php">Forside</a></li>
    <li class="top"><a href="profil.php">Profil</a></li>
    <li class="top"><a href="produkter.php">Produkter</a>
    <ul>
    <li><a href="software.php">Software Produkter</a></li>
    <li><a href="networkprod.php">Netv&aelig;rks Produkter</a></li>
    <li><a href="securityprod.php">IT Sikkerheds Produkter</a></li>
    <li><a href="webloesninger.php">Webl&oslash;sninger</a></li>
    </ul>
    </li>
    <li class="top"><a href="tjenester.php">Tjenester</a>
    <ul>
    <li><a href="securityconsult.php">IT Sikkerheds Konsultering</a></li>
    <li><a href="networkconsult.php">Netv&aelig;rks Konsultering</a></li>
    <li><a href="customprogramming.php">Custom Programmering</a></li>
    <li><a href="hackertest.php">Hacker Test</a></li>
    </ul>
    </li>
    <li class="top"><a href="info.php">Information</a>
    <ul>
    <li><a href="generel.php">Generel Information</a></li>
    <li><a href="aboutus.php">Om os</a></li>
    <li><a href="history.php">Zepcom's Historie</a></li>
    <li><a href="job.php">Job Ans&oslash;gning</a></li>
    </ul>

    </li>
    <li class="top"><a href="kontakt.php">Kontakt</a></li>
    </ul>
    </div>
    <div id="textbox">
    <h3>"FORSIDE"</h3>
    </div>
    </div>
    <div id="copyright">
    Copyright &copy; Zepcom 2005
    </div>
    </body>
    </html>
    [/code]

    You'd better get this right now matey

    [edit]By the way this is copied from your old html, so make sure if you copy and paste you have the correct doctype declaration, fix the javascript and use tabs for indents instead of spaces![/edit]
    Last edited by Grafmix; September 29th, 2005 at 05:14 AM.
    We are troll foldy-rolls and we'll eat you for our supper.
  20. #11
  21. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    29
    To stop it flickering in IE you need to upload a .htaccess file to your website root and put in the following:

    ExpiresActive On
    ExpiresDefault A18000
    ExpiresByType image/gif A2592000
    ExpiresByType image/jpeg A2592000
    ExpiresByType image/png A2592000
  22. #12
  23. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    829
    Rep Power
    85
    There is no flicker though...? Are you talking about an old IE?
    We are troll foldy-rolls and we'll eat you for our supper.
  24. #13
  25. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    29
    It depends on your content settings. If you have it set to "refresh images every time the page is loaded" then you will see a flicker on IE. Putting a .htaccess file in your web root will stop it flickering. A lot of people have new version checking set to automatic.
  26. #14
  27. Anal Purist
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2005
    Location
    Bob's Auto Parts...
    Posts
    829
    Rep Power
    85
    Mondus isn't using images in the list though...(?)
    We are troll foldy-rolls and we'll eat you for our supper.
  28. #15
  29. meester luva luva
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2003
    Posts
    2,715
    Rep Power
    29
    I didn't bother reading too carefully. He said he needed it not to flicker and he said he was using suckerfish menus (which by default use a bg image) and I put 2 and 2 together and got 64. My bad.

    Comments on this post

    • Grafmix agrees : Lol no problem man :) it flickered because the spacing between the list elements was a bit too large.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo