WordPress.org

Ready to get started?Download WordPress

Forums

menu displays differently in ie/firefox (5 posts)

  1. jeet
    Member
    Posted 9 years ago #

    Over the past week I've been teaching myself WordPress/CSS to make a blog for this camp I work with and everything seemed to be going pretty well until today. I changed the links on the menu to link-images and now the entire menu gets offset in IE (but looks fine in Firefox). Also the little dots that divide the sections render differently in each browser -- is there a way around that? The page validates just fine so I don't really know what to do. Also, if you have any general commentary/critiques it would be much appreciated, this is my first WordPress blog. Thanks for your time.

    http://www.snfild.org/news

  2. sadish
    Member
    Posted 9 years ago #

    try adding " display:inline; " to both #menu and #content. in the stylesheet.

    That could solve ur problem.

  3. jeet
    Member
    Posted 9 years ago #

    Sorry, I'm still a newbie at this still... where exactly in #menu and #content should I add" display:inline;" ?

  4. NuclearMoose
    Member
    Posted 9 years ago #

    jeet,
    I *think* what is happening, in a nutshell, is that your link images are quite big, and they are spilling outside of your menu div. In IE, this is causing it to move down.

    Some suggestions:
    Increase the width of your menu div and move it more to the left.
    Decrease or eliminate all of the margins and padding in the menu div and for all of the <ul> and <li> elements. After you have done that, you could carefully add some back later to change the styling a bit if required.
    Decrease the height and width of your images.

  5. sadish
    Member
    Posted 9 years ago #

    I looked into your stylesheet.

    It has #menu defined as this.

    #menu {
    background: #fff;
    margin: 20px 0 0 540px;
    width: 190px;
    padding: 0 0 10px 10px;
    font-family: verdana, helvetica,

    but it should be like this,
    #menu {
    background: #fff;
    margin: 20px 0 0 540px;
    width: 190px;
    padding: 0 0 10px 10px;
    font-family: verdana, helvetica;
    display:inline;
    }

    try to replace it and see if it helps.

    Thanks,
    Sadish

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.