menu displays differently in ie/firefox

  • jeet

    (@jeet)


    19 years, 2 months 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

Viewing 4 replies - 1 through 4 (of 4 total)
  • sadish

    (@sadish)

    19 years, 2 months ago

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

    That could solve ur problem.

    Thread Starter jeet

    (@jeet)

    19 years, 2 months ago

    Sorry, I’m still a newbie at this still… where exactly in #menu and #content should I add” display:inline;” ?

    NuclearMoose

    (@nuclearmoose)

    19 years, 2 months 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.

    sadish

    (@sadish)

    19 years, 2 months 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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘menu displays differently in ie/firefox’ is closed to new replies.