7 Replies Latest reply: Dec 4, 2013 11:11 AM by SJDesigns RSS

    Help with IE

    SJDesigns

      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;

        • 1. Re: Help with IE
          Jon Fritz II CommunityMVP

          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

          • 2. Re: Help with IE
            SJDesigns Community Member

            Thanks so much John! That actually resolves the issue..sometimes it's the simplest things. About the font stack, what is the best order?  The one I am using is proprietary to my company, but I'd like to use a close second that is more common among browsers. how would you suggest I order it? also- Should i change it in each section/div?

            • 3. Re: Help with IE
              Jon Fritz II CommunityMVP

              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.

              • 4. Re: Help with IE
                SJDesigns Community Member

                you're awesome- thank you so much. I'm going to read thru your links and see if  I can figure it out. Thanks again!!

                • 5. Re: Help with IE
                  SJDesigns Community Member

                  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?

                  • 6. Re: Help with IE
                    Jon Fritz II CommunityMVP

                    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.

                    • 7. Re: Help with IE
                      SJDesigns Community Member

                      Got it, thanks so much!!