SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation "margin" gone crazy in my CSS rollover navigation -- Help!

    Hey--

    On this page everything lines up fine: http://www.help4newbies.com/menu/
    Code:
    <table border="0" cellpadding="0" cellspacing="0">
    <tr><td class="menutitle">Sections:</td></tr>
    <tr><td><ul class="menu">
    <li><a href="">html</a></li><li>
    <a href="">css</a></li><li>
    <a href="">javascript</a></li><li>
    <a href="">domains</a></li><li>
    <a href="">design</a></li><li>
    <a href="">php</a></li><li>
    <a href="">misc</a></li></ul></td>
    </tr>
    <tr><td class="menutitle"><br>Pick-A-Skin:</td></tr>
    <tr><td><ul class="menu">
    <li><a href="">default</a></li><li>
    <a href="">BIG text</a></li><li>
    <a href="">arielle</a></li></ul></td>
    </tr>
    </table>
    Code:
    .menutitle {
    font: bold 11px verdana, geneva, helvetica, arial, sans-serif;
    color: #FFFFFF;
    padding: 3px; }
    
    /***********************************************/
    .menu {
    border: #000 1px solid;
    margin: 0px 1px 0px 0px;
    font: 10px/15px verdana, geneva, helvetica, arial, sans-serif;
    width: 90px;
    list-style-type: none;
    text-align: left;
    list-style-position: outside; }
    
    .menu LI A, A:visited {
    background-color: #FFC448;
    border-top: #FFE6B0 1px solid;
    border-bottom: #E69B00 1px solid;
    color: #000000;
    padding: 4px 7px;
    display: block;
    margin: 0px;
    text-decoration: none; }
    
    .menu LI A:hover, A:active {
    background-color: #FFA448;
    border-top: #FFC448 1px solid;
    border-bottom: #F97C00 1px solid;
    color: #FFFFFF; }
    But here, it's completely screwy! http://www.help4newbies.com/menu/index2.html

    The only difference is one line in the stylesheet -- no margin:
    Code:
    .menu {
    border: #000 1px solid;
    font: 10px/15px verdana, geneva, helvetica, arial, sans-serif;
    width: 90px;
    list-style-type: none;
    text-align: left;
    list-style-position: outside; }
    I want to get rid of the "margin" because it seems pretty pointless -- what's goin' on?!

    Thanks!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  2. #2
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmmm, this is possibly something to do with the differences in the way browsers interpret CSS2, as in Mozilla both look identicle with that margin...

    Ummmmmm, am trying to find someinformation on this, let me get back to you, but can I ask what browser you are testing this on please?

  3. #3
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 -- WinXP
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  4. #4
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh god it was so blatantly staring me in the face, and has taken me ages to fix LOL

    In the "menu" class add:

    Code:
    padding:0px;
    Should work perfectly

  5. #5
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really really hate to say this, but it didn't work:

    http://www.help4newbies.com/menu/index2.html
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  6. #6
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooh, nevermind! Got it! It was margin: 0, not padding. Thanks for all your help, though! Your "padding" idea helped me think of margin.

    One more thing, though: http://help4newbies.com/menu/

    The menu is a bit off to the left. Why isn't it perfectly centered? It should be, right:
    Code:
    <!--OUTER TABLE-->
    <table width="80%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center">
    <!--end OUTER TABLE-->
    
    <table border="0" cellpadding="0" cellspacing="0">
    <tr><td class="menutitle">Sections:</td></tr>
    <tr><td><ul class="menu">
    <li><a href="">html</a></li><li>
    <a href="">css</a></li><li>
    <a href="">javascript</a></li><li>
    <a href="">domains</a></li><li>
    <a href="">design</a></li><li>
    <a href="">php</a></li><li>
    <a href="">misc</a></li></ul></td>
    </tr>
    <tr><td class="menutitle"><br>Pick-A-Skin:</td></tr>
    <tr><td><ul class="menu">
    <li><a href="">default</a></li><li>
    <a href="">BIG text</a></li><li>
    <a href="">arielle</a></li></ul></td>
    </tr>
    </table>
    
    <!--END OUTER TABLE-->
    </td>
    </tr>
    </table>
    <!--end END OUTER TABLE-->
    Last edited by Adam P.; Sep 2, 2002 at 19:14.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  7. #7
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    um just curiouse, but why not just use margin-left: 1px;

  8. #8
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmmm, still looks funky in Mozilla... ???

    Not sure what happened but this is the exact code I tried with and it worked perfectly here:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Help4Newbies</title>
    <style type="text/css">
    <!--
    body {
    background: #4B5B7A; }
    
    .menutitle {
    font: bold 11px verdana, geneva, helvetica, arial, sans-serif;
    color: #FFFFFF;
    padding: 3px; }
    
    /***********************************************/
    .menu {
    border: #000 1px solid;
    margin: 0px 1px 0px 0px;
    padding:0px;
    font: 10px/15px verdana, geneva, helvetica, arial, sans-serif;
    width: 90px;
    list-style-type: none;
    text-align: left;
    list-style-position: outside; }
    
    .menu LI A, A:visited {
    background-color: #FFC448;
    border-top: #FFE6B0 1px solid;
    border-bottom: #E69B00 1px solid;
    color: #000000;
    padding: 4px 7px;
    display: block;
    margin: 0px;
    text-decoration: none; }
    
    .menu LI A:hover, A:active {
    background-color: #FFA448;
    border-top: #FFC448 1px solid;
    border-bottom: #F97C00 1px solid;
    color: #FFFFFF; }
    
    /**********************************************
    .menu {
    border: #000 1px solid;
    margin: 0px 10px 0px 0px;
    font: 10px/15px verdana, geneva, helvetica, arial, sans-serif;
    width: 90px;
    list-style-type: none;
    text-align: left;
    list-style-position: outside; }
    
    .menu LI A, A:visited {
    background-color: #FFC448;
    border-top: #FFE6B0 1px solid;
    border-bottom: #E69B00 1px solid;
    color: #000000;
    padding: 4px 7px;
    display: block;
    margin: 0px;
    text-decoration: none; }
    
    .menu LI A:hover, A:active {
    background-color: #FFA448;
    border-top: #FFC448 1px solid;
    border-bottom: #F97C00 1px solid;
    color: #FFFFFF; } */
    -->
    </style>
    </head>
    
    <body bgcolor="#4B5B7A">
    
    <!--OUTER TABLE-->
    <table width="80%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center">
    <!--end OUTER TABLE-->
    
    <table border="0" cellpadding="0" cellspacing="0">
    <tr><td class="menutitle">Sections:</td></tr>
    <tr><td><ul class="menu">
    <li><a href="">html</a></li><li>
    <a href="">css</a></li><li>
    <a href="">javascript</a></li><li>
    <a href="">domains</a></li><li>
    <a href="">design</a></li><li>
    <a href="">php</a></li><li>
    <a href="">misc</a></li></ul></td>
    
    </tr>
    <tr><td class="menutitle"><br>Pick-A-Skin:</td></tr>
    <tr><td><ul class="menu">
    <li><a href="">default</a></li><li>
    <a href="">BIG text</a></li><li>
    <a href="">arielle</a></li></ul></td>
    </tr>
    </table>
    
    <!--END OUTER TABLE-->
    </td>
    </tr>
    </table>
    
    <!--end END OUTER TABLE-->
    
    </body>
    </html>
    This is just your code but I added the css to the file instead of linking it, and added the padding...

    This file looks perfect in Mozilla & IE5...?

  9. #9
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I see. The thing is, I don't need the 1px in the margin, so it can basically just be "margin: 0". When I tried your solution the first time, I got rid of the "margin:" attribute and added the "padding:" attribute, hence it didn't work.

    If you set margin to 0, does it still work in Mozilla? And do you HAVE to have the padding:0 to make it look right in Mozilla?

    Thanks for all your help!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  10. #10
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmmm, this is a rea problem between browsers, take the following page for example:

    http://members.optusnet.com.au./wizardx8/menu.html

    Excuse me for using your code as a demonstration, and to be honest I love this effect, never seen it and have been looking for something similar for ages...

    Now I have three seperate menu systems setup, and they look spectacular in Mozilla, in Opera look semi-ok (the display:none/display:inline does not work) and in IE5 it works perfectly, BUT IE6 ruins it completely, so not sure what the problem is but if you can check it with Mozilla it looks good

    Hopefully one of the other resident CSS'ers will be able to step in and explain what is causing this problem...

    Sorry I cant help anymore, but I cannot for the life of me work out what is wrong...

    Actually, I'm going to take some screenshots and show the problem

  11. #11
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, three screenshots of Mozilla, IE and Opera, very different...

    Mozilla:


    IE:


    Opera:

  12. #12
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You didn't use my code exactly as I have it -- that's why you're getting a problem. You can't put a return between the </li> and <li> -- that's the problem.

    Also, for more examples of this same effect with the same code, check out:

    http://www.waferbaby.com/
    http://www.zeldman.com/talent/

    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  13. #13
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just took a look at both of those sites that I mentioned above in Opera and neither of their menus split apart like mine -- I can't figure out what's different about theirs!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  14. #14
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I see what you mean now, will have a look at it later, still cant see the problem here... grrrrr

  15. #15
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wizard, I found the problem. I was missing this:

    Code:
    .menu li {
    padding: 0;
    margin: 0;
    border: none; }
    Now it works in Opera!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  16. #16
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastico

  17. #17
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi , I have a little question here.

    Why do you use the LI-tag ?
    Wouldn't it be better to make separate table cells per link ?

  18. #18
    SitePoint Enthusiast hartmurmur's Avatar
    Join Date
    Aug 2001
    Location
    Chicago
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you copying Dan Bogan's (waferbaby) and Zeldman's menu? Certainly you can come up with something on your own? (If you are just trying to learn to apply it in a different look, I can understand.)

    If you were going to copy it, why didn't you just cut and paste his source and style sheet?

  19. #19
    blonde.... Sarah's Avatar
    Join Date
    Jul 2001
    Location
    Berkshire, UK
    Posts
    7,442
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Swimm,

    you might want to also add in
    Code:
    /*/*/
    and
    Code:
    /**/
    fo rthose older browsers otherwise they will hate the margin property (just use them around the margin: and padding: part it won't effect anything else just ignored by older browsers)

    hartmurmur - its a technique that I have seen throughout mine were done using javascript although I also have them in dhtml.. its a simple and effective menu system, its more how they created them that will be different rather than a blatent copy.

    Sarah
    Regular user


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
  •