9 Replies Latest reply on Dec 15, 2011 11:30 AM by markf12

    IE margin doubling problem

    markf12 Level 1

      I am working on a site. I have a floated horizontal list of items at the very top of the header. It looks fine in Firefox and Safari but in IE 8 it forces the last item on to a second line. I have read about the margin doubling problem with IE and I've tried all sorts of ways to keep this from happening but can't seem to figure it out.

       

      http://www.prospectrealty1.fatcow.com/index.html

       

      any help on how I can keep the floated list all on one line in IE will be very much appreciate.

       

      thanks!

        • 1. Re: IE margin doubling problem
          Nancy OShea Adobe Community Professional & MVP

          This isn't an IE only issue.  If you increase text size in any browser, you'll see the top links drop to the next line.  Try reducing your font-size.

           

          #header {

          font-size: 12px;

          }

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          http://twitter.com/altweb

          1 person found this helpful
          • 2. Re: IE margin doubling problem
            markf12 Level 1

            Thank you for your reply Nancy! I am using em for font sizing throughout on this. I have used pixels for text size in the past but got some idea that using em was considered more better/current. I know that there is debate over this and there is no necessarily "right" way. If I reduce the em size would that have the same effect as your suggestion of going to 12 pixel text size?

             

            I'm trying to have the text size, spacing and etc match a layout provided by a non-web/printed page layout person. I am considering typing it all into a jpg and just using an image file, but that seems counter to my understanding of best practices.

             

            I do have some flexibility and can deviate form the provided layout I'm trying to match if it seems best. The others involved and the client are reasonable and understand that the web and print are two different animals.

             

            Thank you for your help!

            • 3. Re: IE margin doubling problem
              osgood_ Level 8

              I guess you have changed the nav to jpg images now?

               

              http://www.prospectrealty1.fatcow.com/index.html

              • 4. Re: IE margin doubling problem
                markf12 Level 1

                Hi Osgood and thanks for your reply.

                 

                I do have the nav as jpg images but that is not what I'm referring to.

                 

                The problem is with the line of text (address, phone, etc) at the very top of the header, not the nav. It looks fine in Firefox and Safari but not in IE. I believe it's because of the IE margin doubling that I have learned about. I've got the string of text/ bullet list so it fills the space with 20 px space on each end. When IE adds extra margin it forces the last item (email address) down onto a second line. 

                 

                I'm thinking of replacing all but the email address with a jpg image. Leaving the email address as a link that can be clicked. I was hoping to find a fix for this IE problem so I could keep it all as text which is a better practice as I understand it.

                • 5. Re: IE margin doubling problem
                  osgood_ Level 8

                  markf12 wrote

                   

                   

                  The problem is with the line of text (address, phone, etc) at the very top of the header, not the nav. It looks fine in Firefox and Safari but not in IE. I believe it's because of the IE margin doubling that I have learned about. I've got the string of text/ bullet list so it fills the space with 20 px space on each end. When IE adds extra margin it forces the last item (email address) down onto a second line. 

                   

                  I'm thinking of replacing all but the email address with a jpg image. Leaving the email address as a link that can be clicked. I was hoping to find a fix for this IE problem so I could keep it all as text which is a better practice as I understand it.

                   

                  Oh ok I didnt see that because in Adobe Browser lab the text is showing all on one line in IE7, IE8 and IE9 so it would be difficult for me to diagnose.

                   

                  I can tell you though it has nothing to do with double margin bug as IE8 and IE9 corrected that. It was only present in IE7 maybe and certainly in IE6. However having said that the IE double margin bug only occurred when you had a floated element which had a margin applied to it in the same direction as the float, i.e. if you floated an element left and then attached a left margin to that element also the margin would double. The solution was to add display: inline; to the elements css selector BUT you have no left margin set on the <li> tag.

                   

                  It is most likely as Nancy points out an engine difference in the way IE browsers size the text. Does this occur if you use px instead of em? If not use px....I never use em myself as I've found it does cause issues ocassionally. Also its not good practice to fill a whole horizontal line with text information where you want its visual appearence maintained, very bad. Horizontal menus never work and lines of text never do either. The art of designing a webpage is allowing enough space so the text can 'grow' into in the case when a browser interprets the text size slightly differently. Obviously that's difficult if you are re-creating this webpage build for some designer who has little knowledge of good web design practices.

                   

                  In cases where a client is absolutely definitive that they want too many links in a horizontal menu or a line of text, which must remain on one line, I would have no hestitaion about using an image. Just give the image an 'alt' and if the image is surrounded by an anchor tag give that a 'title' tag. That will keep your page 'user' friendly for those who have a disabilities.

                  1 person found this helpful
                  • 6. Re: IE margin doubling problem
                    markf12 Level 1

                    Thank you Osgood. It's odd but when I look at it in the Adobe Browser Lab the text is not on one line and has the problem I described. Anyway guess I have to change it to jpg images because of IE.

                     

                    I'm going to start another thread about another problem where themain nav links all are displaying the text decoration in IE (but not in any of the other browsers) I have set text-decoration:none in every conceivable place and can't seem to get it to go away.

                    • 7. Re: IE margin doubling problem
                      osgood_ Level 8

                      markf12 wrote:

                       

                      It's odd but when I look at it in the Adobe Browser Lab the text is not on one line and has the problem

                       

                       

                      Makes you wonder how reliable Browser Lab is, doesn't it. I haven't had any client say things look different to what I'm viewing on a Mac....maybe thats to come.

                       

                       

                       

                      markf12 wrote:

                      I'm going to start another thread about another problem where themain nav links all are displaying the text decoration in IE (but not in any of the other browsers) I have set text-decoration:none in every conceivable place and can't seem to get it to go away.

                       

                      Hummm... same page? I cant see any text decoration in any version of IE either using Browser Lab unless you mean the blue border around the top navigation images? I can see those in all browsers so you need to add the below css to your list of css styles to get rid of those:

                       

                       

                      #top-nav a img {

                      border: none;

                      }

                      • 8. Re: IE margin doubling problem
                        Nancy OShea Adobe Community Professional & MVP

                        Get multi-IE tester. 

                        Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10

                        http://www.my-debugbar.com/wiki/IETester/HomePage

                         

                        Or use the developer tools in IE9 (F12) to check your sites in different IE modes. 

                        See screenshot:

                        IE-F12.jpg

                         

                        Nancy O.

                        Alt-Web Design & Publishing

                        Web | Graphics | Print | Media  Specialists 

                        http://alt-web.com/

                        • 9. Re: IE margin doubling problem
                          markf12 Level 1

                          thank you Nancy! IE 9 appears to only be available for Vista and Windows 7. I'm on XP. Too bad.

                           

                          It looks like firebug for IE. That would be very helpful