Grow your CSS skills. Land your dream job.

Need Advice. IE Horizontal List Staggering/Stepping Problem

  • # July 22, 2009 at 3:12 pm

    The site I’m having issues with is at http://www.bunkerguitar.com. I am having an issue with IE 8 (I hate IE SO BAD, I wish it would get deprecated)staggering, or stepping the horizontal footer list. I have explored this and many other forums for hours on end without any luck. I have looked at my code so much I am getting headaches over this issue. It displays perfect in Firefox, but as you can see it is not displaying correctly in IE. If there are any ideas I would appreciate it SO very much.

    # July 22, 2009 at 3:22 pm

    Always best to float the list items rather than the links they contain.

    Code:
    #footerstuff li {
    float: right;
    display: inline;
    }

    Some validation wouldn’t go amiss either. 120 errors on the page http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbunkerguitar.com%2F

    # July 22, 2009 at 3:28 pm

    after searching for ages try this:

    Code:
    #footerstuff li
    {
    display:inline;
    }

    I dont want to recreat your page, I might not be able to do it, there are so many style sheets

    # July 23, 2009 at 11:31 am

    Thank you! Your ideas led me to be able to fix it. I was able to fix the problem within the rightcolum div which contained the other divs giving me the problems.

    Yes I know there are a lot of style sheets. The main site is a wordpress install using a child theme with a default.css that controls 95 percent of the styles, and several others that control the menu, and the layout. Then the shopping cart utilizes a matching magento theme. It’s been a bear making them play nice, but so far so good. While the many style sheets can seem overwhelming they are that way so that when there are wordpress or magento upgrades the style sheets don’t get overwritten. Here is the finished code that fixed the errors. Hopefully it will help anyone else who has encountered this issue. I saw it on several other forums but no one seemed to be able to get it fixed. For the record I’ll also post it there.

    #rightcolumn
    {
    width:420px;
    float: right;
    position: relative;
    padding:0 15px;
    }
    #rightcolumn li

    {
    display:inline;
    float: right;

    Thank you for your ideas and tips. Also, thanks for the error tips. That last css problem was the last thing on my list before I debug my errors etc. Thank you again.

    # July 23, 2009 at 11:46 am

    do a search on this site for "menu stepdown", I think Chris had something about it earlier,

    Al

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".