Skip navigation
Currently Being Moderated

Help with IE

Dec 4, 2013 9:17 AM

Tags: #css

Hello,

 

i'm having a problem I cannot seem to resolve and i'm hoping that one of the experts on this fourum could give me some guidedance. I have a horizontal navigation bar on a website that has a strange issue in IE 6,7 and 8. It works fine in every other browser and divice, but in those instances of IE the last link in the navigation bar wraps into a second line. There is plenty of space and  I've tried everythink I can think of as far as adjusting the CSS----and nothing seems to work.

 

Any ideas on why this is happening? i'm a novice to CSS, so  ANY advice would be very much apperciated!!  Thanks!!

 

here is a link to the site and the css for the nav:

http://54.212.254.25/totalsource_112113/index.html

______________________________________________________________________ ________________________

 

nav{

          position: absolute;

          width: 694px;

          height: 18px;

          top: 43px;

          right: 55px;

          bottom: 30px;

          clear: both;

          float: none;

}

 

 

nav ul li{

          float: left;

          line-height: normal;

}

 

 

nav ul li a{

          font-size: 20px;

          font-family:Georgia, "Times New Roman", Times, serif;

          color: white;

          text-transform:capitalize;

          font-weight:normal;

          display:block;          /* IE6, IE7 line height fix */

          padding-bottom:8px;

          padding-top:15px;

          background-color:transparent;

          margin-top:0px;

          margin-right:6px;

    text-decoration:none;

}

 

 

nav ul li a:hover{

          text-decoration: underline;

}

 

 

nav ul li a.current{

          padding: 2px;

          font-family: "Amasis MT Std";

          font-size: 14px;

          color: #dc1e32;

          margin-left: 6px;

          word-spacing: normal;

}

 

 

.content_menu{

          float: left;

          width: 274px;

          margin-top:-10px;

          margin-bottom:15px;

}

 

.content_menu ul{

          margin: 0px;

          padding: 0px;

          float: none;

}

 

 

.content_menu ul li{

          float: none;

          padding-bottom: 16px;

}

 

 

.content_menu ul li a{

          font-size: 14px;

          line-height: normal;

          color: #FFFFFF;

          text-align: left;

          text-decoration: none;

 

 

          background-position: left;

          background-repeat: no-repeat;

          padding-left: 20px;

}

 

.content_menu ul li a:hover{

          color: #FFFFFF;

 
Replies
  • Currently Being Moderated
    Dec 4, 2013 9:37 AM   in reply to SJDesigns

    The font appears much larger in IE8 and lower so when the max width of the <nav> element the links are in is reached, it drops to the next line.

     

    You could increase the width of your <nav> from 694px to about 750 or so to fix that.

     

    EDIT: Also, the font you have used does not exist on my machine, so I only see the default browser serif font. You may want to look into adding some more fonts to your css font stack. Importing fonts via the @font-face rule would also be an alternative, but imported fonts are also not visible to IE8 and lower.

     

    http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 4, 2013 10:03 AM   in reply to SJDesigns

    Here's a good link.

     

    http://www.w3schools.com/cssref/pr_font_font-family.asp

     

    Some good base fonts are...

     

    Sans Serif: Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana

    Serif: Garamond, Georgia, Times, Times New Roman

    Monospace: Courier, Courier New, Lucinda Console, Monaco

     

    Keep in mind, if you are not using an imported font via the @font-face rule in your css http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp, any time a font is used that is not installed on the viewer's machine, their browsert will go to the second in your font-family stack. If the second is not installed, it goes to the third and so on.

     

    If you use the @font-face rule with something like http://www.google.com/fonts it will work across all of the major browsers, just not in IE8 or lower. Those old browsers will go to the second font in the stack and start that process.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 4, 2013 10:49 AM   in reply to SJDesigns

    SJDesigns wrote:

     

    ok sorry one more (maybe stupid) question. Where would I get the font face link for the url source in the code? I found a version of Amasis on the google fonts link you provided, now how would i use it? is it a service I need to purchase?

     

    From the Google Fonts page, with the font you want to use showing, click the "Quick Use" button (right pointing arrow in a square icon).

     

    That will open a new page with the steps to implement it. The third step is the link you add to the <head> of your page. The remainder of the @font-face rule stuff is done for you by google (you are essentially just linking to a stylesheet with the @font-face import already done for you).

     

    Then all you do is add your font name to the font-family rules throughout your remaining css as shown in step 4.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points