7 Replies Latest reply: Sep 7, 2009 7:32 PM by Nadia-P RSS

    browser issues!

    mediastream13 Community Member

      this site displays perfect in ie8, safari, and firefox, but won't display in ie7/6 and aol, why? thanks

        • 1. Re: browser issues!
          mediastream13 Community Member

          the site is www.bryantaafe.com/rg

          • 2. Re: browser issues!
            Nadia-P CommunityMVP

            You don't mention what the problem is, however, viewing in IE7, I notice that menu items are not sitting inside the navbar.

             

            You have quite a few errors on the page that need fixing..  when you create an ID, do not use spaces in the name:

             

            eg::

            id="boardman rotary"

            should al be one word or separated with an underscore of hyphen 
            eg:  boardman-rotary

            Validation errors here:
            http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.bryantaafe.com%2Frg%2F

            fix those errors first and then see where the page stands.

            You may need to give IE a conditional comment for the placement of the menu links..

            • 3. Re: browser issues!
              mediastream13 Community Member

              hey nadia, the problem is that the spacing is not correct in aol and ie 6/7. if you take a look at it in ie8 and firefox you'll notice the spacing and the placement of the list items. i don't know what you are referring to when you say spaces in the id's. how would i apply a conditional comment for the other browsers? =) thanks a lot for your help

              • 4. Re: browser issues!
                Nancy O. CommunityMVP

                90% of browser problems start with malformed code.

                 

                Start by fixing the code validation errors described below:

                http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.bryantaafe.com%2Frg%2F

                 

                FYI: Div  names cannot contain spaces.  But they can contain hyphens or underscores.

                 

                Example:

                Wrong: #division name

                Acceptable:  #division-name or  #division_name or  #divisionName

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                www.alt-web.com/
                www.twitter.com/altweb
                www.alt-web.blogspot.com

                • 5. Re: browser issues!
                  mediastream13 Community Member

                  ok, i think i fixed the errors, but the navigation list is still displaying incorrectly, and there is no space between the nav bar and the H2 headings. can i fix this with a .css trick? thanks

                  • 6. Re: browser issues!
                    Nadia-P CommunityMVP

                    During testing in IE 6 an 7 the menu items are not sitting correctly.  IE8 look the same as FFox.

                     

                    This means you need to use a conditional comment to feed a different placement style to IE6 and IE7

                     

                    This was a very quick test, so you may need refine it a little, but copy and paste the following just before the closing <./head> tag. I tested this on the index page.  If it works, you can either copy and paste the CC on every page  or feed a special stylesheet for IE only.

                     

                    As you can see from the line in red I changed the bottom position from -8 for the other browsers to 6px for IE6 and 7.  It worked for me using IETester.

                    See if it works for you in the 2 versions of IE.

                     

                     

                    <!--[if gte IE 7]>
                    <style>
                    #header ul {
                        list-style: none;
                        float: left;
                        position: absolute;
                        right: 0px;
                       bottom: 6px;
                        margin-left: 0px;
                        left: -5px;
                    </style>
                    <![endif]-->

                    • 7. Re: browser issues!
                      Nadia-P CommunityMVP

                      This may help you as a reference point regarding Conditional Comments:

                      http://reference.sitepoint.com/css/conditionalcomments