SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Horizontal menu stepping down in IE6

    I can't see what I've done wrong here: http://robcubbon.com/dev/lunakidz/

    The six list elements of the top menu "step down" by 10px each time in IE6 instead of being straight horizontally.

    The CSS is really simple.


    #navbar {width:769px; height: 46px; background:#333333; margin-top: 10px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; color:#000; font-size:10px; font-stretch:condensed; font-weight:bold;}

    #navbar ul{padding:0; margin:0; list-style-type:none; line-height: 32px; }

    #navbar li {display:inline; }

    #navbar li a{float:left;width: 128px;color:#000; text-decoration:none; background:url(images/link-panel.jpg) ; height:46px; }

    #navbar li a:hover {float:left; width: 128px; color:#000; text-decoration:none; background:url(images/link-panel.jpg) ; background-position: 0 46px; height:46px; }

    #navbar li.current-page a{ float:left; width: 128px; color:#000; text-decoration:none; background:url(images/link-panel.jpg) ; background-position: 0 46px; height:46px; }

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The css you posted above is not the same as on the site.

    The #navbar li {display:inline; } is what fixes the IE staircase bug but it is not in your live css.

    It could also be #navbar li {float:left; } to fix the bug

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you keep it without

    #navbar li {display:inline; }

    your

    #navbar ul{padding:0; margin:0; list-style-type:none; line-height: 32px; }

    could be

    #navbar ul{padding:0; margin:0; list-style-type:none; line-height: 0; }

    and you could set a padding-top:12px for your a's in li's.

    even more, on hover you could set a bigger/smaller padding-top for them and get a nice effect

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    As Ray said the #navbar li {display:inline} is missing in your live site and it is this that fixes the staircase effect (although there are other methods).

    What happens is that IE7 and 6 don't collapse the list height to zero but leave it at the current font-size/line-height and therefore each subsequent list is moved downwards but the float still snags on the floated anchors edge.

    If you set the list to display:inline then it stops this effect and you can more or less forget about the list. You could instead float the list also or as mentioned above set the line-height/font-size to zero so that there is no height to the list but the easiest solution is display:inline and is the one you already had written down in post #1

  5. #5
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You're all right! #navbar li {display:inline} did the trick. It is updated now. I'm really sorry I supplied the wrong CSS. I'd been changing things and waiting for 30 minutes for BrowserShots, changing things and waiting for 30 minutes for BrowserShots, changing things and waiting for 30 minutes for BrowserShots, etc. And I must have got confused!

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use quirks mode also in ie8. no need to "30 minutes for BrowserShots"

  7. #7
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Do you have to change the Doctype of the page or can you just change it in Developer Tools, noonnope? This looks like a great piece of advice, I just want to make sure I understand what to do.

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    which ever (i mean having a doctype or not, or having a doctype and using the developer tool to switch to quirks mode). by using developer tool you can choose to see how ie7 handles quirks mode or how ie8 handles it.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I prefer to download IEtester (a very nice program) which allows you to see IE6/7/8 all in one.

    Sometimes the program crashes, but in that case just fire it back up. It's pretty reliable
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    which ever (i mean having a doctype or not, or having a doctype and using the developer tool to switch to quirks mode). by using developer tool you can choose to see how ie7 handles quirks mode or how ie8 handles it.
    You can use compatibility view to get a rough idea of what IE7 will look like but it's not 100% accurate and misses some bugs in IE7 which would be the main reason for using it. The same applies with the Developer tools options.

    None of the options recognise this IE7 bug.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                   "http://www.w3.org/TR/html4/strict.dtd">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>IE7 general sibling selector (~) bug 1</title>
        <style type="text/css">
     
    /* The ruleset below (empty or otherwise) is required for the bug! */
    .holder b {
    }
     
    .holder ~ span b {
        background: red;
    }
     
        </style>
    </head>
    <body>
     
    <div class="holder">
        <i>
            <!-- HTML COMMENT OR ANY ELEMENT -->
            <span>
                <span><b>My background shouldn’t be red!</b></span>
            </span>
        </i>
    </div>
     
    </body>
    </html>
    Therefore I could never trust it as I test in different browers to find bugs not ignore them It's ok for a rough idea and useful for a quick check but don;t rely on it. (Unlike IEtester which Ryan mentioned above and spots the bug correctly.)

    Note that the quirks mode option in IE8 makes IE render in quirks mode which will be similar to IE5 but again not accurate enough for any real testing. There is no option to emulate ie6.

    All in all it's more a fiasco than a help. It introduces three or four more rendering inconsistencies to deal with.

    There are many other options with the emulate tags also (none of which actually provide a true rendering of a browser version unfortunately.)

  11. #11
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you want to go that way, the only viable way to test how it would really look in ie6 or ie7 is to actually have ie6 and ie7 at hand, using multiple ie installations if windows os, or vms for ie6 & ie7 if windows or any other os that's supporting vms

    or have an ie collection: http://utilu.com/IECollection/.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    if you want to go that way, the only viable way to test how it would really look in ie6 or ie7 is to actually have ie6 and ie7 at hand, using multiple ie installations if windows os, or vm if windows or any other os that's supporting vms
    No, you don't need VMs or actually having IE6/7 on hand.

    IEtester shows all the bugs and is a pretty stable program (minus a few crashes)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    No, you don't need VMs or actually having IE6/7 on hand.

    IEtester shows all the bugs and is a pretty stable program (minus a few crashes)
    it seems that you do with ie collection you can test for ie v1 to v8.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    it seems that you do with ie collection you can test for ie v1 to v8.
    No you don't. In the case of a crash, just reboot the tab up. It doesnt crash a second time.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes you do. ie collection, again, gives you the opportunity to test ie v1 to v8. real genuine ie. which is always better then an emulator.

    and vms for non-windows os you do know some test for ie in a non-windows envir, don't you? your IEtester only works on windows os. so you need vms for others. IEtester or not

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    yes you do. ie collection, again, gives you the opportunity to test ie v1 to v8. real genuine ie. which is always better then an emulator.

    and vms for non-windows os you do know some test for ie in a non-windows envir, don't you? your IEtester only works on windows os. so you need vms for others. IEtester or not
    Unfortunately you only need IE6/7/8. Thus IE collection really only benefits you by giving you IE6/7/8. Same as IEtester. Side note-IEtester gives IE5.5

    IEtester only requires a download. As for VMs, they take a lot more work to get done, and it being real IE makes almost no difference at all, when comparing it to IEtester (an emulator)

    In all my time using it, I've never seen a bug come up on real IE and not on the emulator. Not once.

    And yes, for most people (aka window users) IEtester should be used

    However if your the exception and you don't use windows, then yes use the VM
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, from the top.

    ie collection gives you the opportunity to test ie v1 to v8. meaning you can install any combination or none of those versions. there are actually check boxes for each version nothing unfortunate here. side note - ie collection gives you ie1.5, ie2.01, ie3.0, ie3.01..., ie8.

    ie collection also requires one download. it's a single exe file with an install wizard.

    almost no diff... moot point.

    most people use windows... very moot point.

    i'm the exception not using windows... extremely moot point.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    ok, from the top.

    ie collection gives you the opportunity to test ie v1 to v8. meaning you can install any combination or none of those versions. there are actually check boxes for each version nothing unfortunate here. side note - ie collection gives you ie1.5, ie2.01, ie3.0, ie3.01..., ie8.

    ie collection also requires one download. it's a single exe file with an install wizard.

    almost no diff... moot point.

    most people use windows... very moot point.

    i'm the exception not using windows... extremely moot point.
    Lets agree to disagree here

    My standing
    IEtester for windows
    Collection for non windows
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    if you want to go that way, the only viable way to test how it would really look in ie6 or ie7 is to actually have ie6 and ie7 at hand, using multiple ie installations if windows os, or vms for ie6 & ie7 if windows or any other os that's supporting vms
    Yes to test everything exactly would be a nightmare and in reality we can't really do that viably. I do have XP, vista and windows 7 on different machines with varying versions but its such a pain to switch between computers that I just use IEtester (although it does crash a bit)

    or have an ie collection: http://utilu.com/IECollection/.
    I tried to install the IE collection from here some time ago but it crashed really badly and I had to reboot the whole system losing work in the process. Of course that may be it just doesn't like my set up but I believe it does much the same job as IE tester anyway. At least the IEtester only crashes itself .

    It's a shame there isn't a really stable version around of either one.

    Previously I used the tredosoft version but it's not maintained anymore (and was buggy anyway)

  20. #20
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, ie collection earlier builds were like that. but with the new ones i never had problems so far.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    well, ie collection earlier builds were like that. but with the new ones i never had problems so far.
    Ok - I might try it again it was a while ago.

  22. #22
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this discussion guys. I'd used IETester before but had given up with it because it was crashy and I'd heard somewhere that it wasn't that accurate. But I'll definitely give it another go. I'll try IE Collection too. Thanks!


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
  •