IE Crops Top Menu Text

  • I’m told by a couple Internet Explorer-using readers of my blog that the right-side text in the top menu is either cropped or missing. This shouldn’t happen and doesn’t with other browsers. I’ve attached the code from my style.css if that’s any help. I have no idea how to resolve this. Any ideas?

    Thanks,

    Tamia
    https://www.tamiasoutside.com

    <BEGIN CODE>

    /* Menu */

    #menu
    {
    text-align:right;
    padding:0;
    height:30px;
    line-height:30px;
    background:#778899;
    width:900px;
    margin:0 auto;
    border:#ccc 3px double;
    }

    #menu ul {
    margin: 0 auto;

    padding:0;
    list-style: none;
    }

    #menu li {
    display: inline;
    }

    #menu a
    {
    padding:8px 16px;
    text-decoration: none;
    font-variant:small-caps;
    font-size: 1em;
    border:0;
    color:#eee;
    }
    #menu a:hover,
    #menu a:active,
    #menu li.current_page_item a:link,
    #menu li.current_page_item a:visited,
    #menu li.current_page_item a:hover,
    #menu li.current_page_item a:active
    {
    background:#456;
    color:#fff;
    border:0;
    }

    <END CODE>

Viewing 3 replies - 1 through 3 (of 3 total)

  • From what I see this is because there is too much text in all of your navigation links combined to fit the width of your blog. You will need to either decrease the number of links or shrink the font size accordingly. In IE6 I see it has “TURTLE TAXI” on a new line under the rest of the nav, but still inside the tan nav bar (its just taller). In Firefox its wrapped to the next line but shows up outside of the designated navigation area.

    [signature moderated Please read the Forum Rules]

    With IE sometimes you need to make sure the text sizes are explicitly set; or it just sets them for you.. (guesses…)

    It would be easier if you had a screenshot..

    Do you use Firebug?

    [signature moderated Please read the Forum Rules]

    Thread Starter tamia

    (@tamia)

    Thanks Joe. I altered the text size and padding for the menu and hopefully that will do it. I cannot preview IE myself — I use a Mac and Bill doesn’t make IE available for Macs anymore — so I’m waiting to hear from my friend who alerted me in the first place.

    Andrew, thanks for the info on IE requiring explicit text side. In the code for my website, it gives text size not in pixels but in em.

    No, I don’t use Firebug. Is it woth installing?

    I’d be happy to include a screenshot but how can I?

    Tamia

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘IE Crops Top Menu Text’ is closed to new replies.

Tags