Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorc1x
    • CommentTimeMay 25th 2008 edited
     permalink
    Hi,
    I am currently working on this site ( http://www.undyinglegends.com/ ).
    I have used the Mootools.net (javascriptframework) for the menu.
    I think that the .js doesn't have anything to do with this bug/problem but who knows?
    So... Every browser displays the site right only IE can't do it.
    I want to solve the porblem that IE is displaying the menu like an staircase...
    Firefox for example:
    Free Image Hosting at www.ImageShack.us
    And IE:
    Free Image Hosting at www.ImageShack.us
    Do you know how I can fix this problem?
    The menu is spreading over almost the whole site. Instead of stringing together in one line.
    ( valid XHTML, valid CSS: http://www.undyinglegends.com/style.css, JS )
  1.  permalink
    Try setting the UL to width: auto; or width: 100% or something like that. I can't remember exactly what to do at the moment, but this is caused by not setting the width on a certain element.
    • CommentAuthorc1x
    • CommentTimeMay 25th 2008
     permalink
    So I tried as you said following two settings
    ul {width:auto;}
    and
    ul {width:100%;}
    aswell as #kwicks_container {width:100%;} / {width:auto;}.
    None fixed the problem except getting one more design prob.

    As you can see http://mootools.net/

    don't have set the width of ul as well. And it works in the IE. (another demo: http://demos.mootools.net/Fx.Elements)
  2.  permalink
    I think IE needs the list container as well as the a tag to be floated to stop it from stepping.

    Try adding

    #kwicks li {
    float:left;
    display:block;
    width:178px;
    }
    • CommentAuthorkeif
    • CommentTimeMay 25th 2008
     permalink
    axe_sharp has nailed it - IE is missing the widths. I'm fairly certain it'll work with the fixed width, but everything I've done with it I've applied the class to the LI not the Anchor tag itself (like here: http://ikeif.net/mootools/kwik.html)
    • CommentAuthorc1x
    • CommentTimeMay 27th 2008
     permalink

    Thank you for your comments. I fixed the problem.
    First I added the #kwicks li {...width:178;}. Yes it fixed the “staircase effect” but brought up new issues.
    Then I remembered kari.patila’s comment in which he told me to set the ul {width:100% or auto} which didn’t work.
    But now I have tried #kwicks li {...width:auto;} which is working perfectly in Firefox and IE.
    Thank you kari.patila, axe_sosharp and keif!

    Solution:
    ol, ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    }

    #kwicks li {
    float:left;
    display:block;
    width:auto;
    }

    Website: Undying Legends

Add your comments
    Username Password
  • Format comments as (Help)