12 Replies Latest reply on Mar 18, 2010 8:54 AM by Streetwitch

    Problems with Internet Explorer 7

    Streetwitch Level 1

      Can anyone recommend a site with fixes for IE7?  I've seen a good one mentioned in one of the Adobe tutorials but now can't find it.  I have a site which is fine in IE8 (and all the rest), but does not render well in IE7 (worse in 6, not surprisingly).  There are quite a few bits wrong with it so I need something with a selection of hacks...thanks!

        • 1. Re: Problems with Internet Explorer 7
          pziecina Level 6
          1 person found this helpful
          • 2. Re: Problems with Internet Explorer 7
            Streetwitch Level 1

            Hi, thanks for this...still struggling, although this time with how to implement the code.  I've been working from http://www.positioniseverything.net/articles/haslayout.html  as it seems the simplest approach for a complex subject I'm unfamiliar with, but I'm not sure how to use it - for me, it assumes too much knowledge.

            I think - but am not sure - that I need to replace the "myprimary.css" link in the first line with one of my own stylesheet refs (a potentially buggy one), and then replace the ".somebuggyelement," elements in the second section with suspect elements from my page.  Or do I need to alter anything else in the sample code?  I've tried this and its not had any effect, but that could just be bad luck as there seems to be a lot of trial and error with this.

             

            Or I could be completely misunderstanding what I'm supposed to do!

             

            Can you help?

            • 3. Re: Problems with Internet Explorer 7
              pziecina Level 6

              Hi

               

              You seem to be complicating a simple IE fix.

               

              The idea behind IE's hasLayout rendering is that the IE browsers requires specific css items to force IE to recognize that the css is a layout and not a simple style declaration like -

              p {

                   color: #222222;

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

              }

               

              The reason using - zoom: 1; is recommended is because it is not recognized by any other browser, (IE specific). But setting the height or width of an item works just as well.

               

              Hiding the - zoom: 1; inside an IE conditional comment in your html page means that your code will validate.

               

              The following is an example of what CS4's new document code inserts -

              <!--[if IE]>

              <style type="text/css">

              /* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */

              #outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content { zoom: 1; }

              </style>

              <![endif]-->

               

              This would then apply the hasLayout to all the divs listed. Unless you really need to using a separate style sheet for each version of IE is not required

               

              For a possible better explanation of hasLayout, see http://www.satzansatz.de/cssd/onhavinglayout.html.

              PZ

              1 person found this helpful
              • 4. Re: Problems with Internet Explorer 7
                Streetwitch Level 1

                Right, no, I don't need to put specific css references, I thought from the code that I had to.  This seems clear - I'll have a go and see if I can sort it out.  I'll try specifying specific sizes for the divs first - that hopefully might get rid of some of it.

                 

                Thanks again!

                • 5. Re: Problems with Internet Explorer 7
                  Streetwitch Level 1

                  Hi pziecina - many thanks again for your response.  Putting in div sizes has sorted out all but one of the problems, so its a huge improvement.  There's just one which I'm struggling with which I'm hoping you may be able to help with.  Its a class with quite large text (".very_large {font-size: 500%; color: #10920F;") - the font size is fine in IE7 but it doesn't have the correct line spacing, so it looks very cramped.  I've tried obvious things like inputting line-spacing but can't get it to work without destroying it in the other browsers.

                   

                  I tried the zoom code from your response and have put the following in the head, immediately before the closing tags:

                  <style type="text/css">
                  /* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
                  .very_large { zoom: 1; }
                  </style>

                   

                  It doesn't have any effect, and I'm not sure whether its because I've misunderstood how to code it (very likely), or because its just not the right kind of fix for this bug.

                   

                  Do you have any suggestions?

                  • 6. Re: Problems with Internet Explorer 7
                    pziecina Level 6

                    Hi

                     

                    Line spacing is one of those things that is confusing for many as css does not work how one would expect, and can especially with the larger font sizes give problems.

                     

                    The line spacing is calculated not only from the line you are 'viewing' but also the preceding/following line, so any blank lines or preceding/following lines must be taken into account. It is also calculated according to the browser settings for the element you are using, also remember that these are inherited from higher level items which will also affect the line spacing if they have been adjusted there.

                     

                    It may be a little late, (would definatlly 'spoil' your layout) but did you use a css reset at the start of your css file? If not it may be worth remembering for next time, for css reset see - http://meyerweb.com/eric/tools/css/reset/.

                     

                    To check the line spacing in different browsers, try the effect on a blank/new page with a <p> element before and after it, without any other changes in your css except for the effect you wish. Then adjust the line spacing accordingly.

                     

                    PZ

                    • 7. Re: Problems with Internet Explorer 7
                      Streetwitch Level 1

                      Right, thanks - I've had trouble with line spacing where its the first line in a div before, so this is obviously why.  I've not heard of css resets and its obviously something that needs doing as a first step for every new site, so thanks for that also.

                      Hopefully this will enable me to sort it out!

                      • 8. Re: Problems with Internet Explorer 7
                        osgood_ Level 8
                        Perhaps by line spacing you mean line-height (the space between lines of text)? 

                        If so to just target IE 7 use a condtional comment:

                        <!--[if IE 7]>
                        <style>
                        .very_large {
                        line-height: XXpx;
                        }
                        </style>
                        <![endif]-->

                        Change XX to what you require, 30, 40, 50 etc whatever works for you.

                        Then scoop the whole lot up and insert it into the pages code directly
                        before te closing </head> tag near the top of the page.
                        • 9. Re: Problems with Internet Explorer 7
                          osgood_ Level 8

                          Streetwitch wrote:

                          I've not heard of css resets and its obviously something that needs doing as a first step for every new site, so thanks for that also

                           

                          Some people use them and some don't. I personally don't but prefer to only readjust those setting that need adjusting to suit my layout.

                          • 10. Re: Problems with Internet Explorer 7
                            Streetwitch Level 1

                            Well, I really liked the simplicity and neatness of this - seen these in heads but hadn't quite realised what they were doing.  However, for some reason I cannot get it to work.  I've tried adding code to change the text colour, and it doesn't do it, so I suspect its something daft I've done wrong.  Even if the line height isn't the problem, it should still change the colour:

                             

                            <!--[if IE 7]>
                            .very_large {
                            line-height: 100px;
                            color: #FFFFFF !important;
                            <![endif]-->

                             

                            (Tried googling an explanation, hence the addition of "!important")

                             

                            Is there any chance you could have a look at my page, in IE7?  http://www.empathydesign.co.uk/indextest.shtml     The code is not great, this was one of the first sites I did and its very convoluted, I wouldnt' do it the same way now but haven't got time to redo the whole site just yet.

                             

                            I'd be very grateful for any advice.

                            • 11. Re: Problems with Internet Explorer 7
                              osgood_ Level 8

                              Streetwitch wrote:

                               

                              Well, I really liked the simplicity and neatness of this - seen these in heads but hadn't quite realised what they were doing.  However, for some reason I cannot get it to work.  I've tried adding code to change the text colour, and it doesn't do it, so I suspect its something daft I've done wrong.  Even if the line height isn't the problem, it should still change the colour:

                               

                              <!--[if IE 7]>
                              .very_large {
                              line-height: 100px;
                              color: #FFFFFF !important;
                              <![endif]-->

                               

                              (Tried googling an explanation, hence the addition of "!important")

                               

                              Is there any chance you could have a look at my page, in IE7?  http://www.empathydesign.co.uk/indextest.shtml     The code is not great, this was one of the first sites I did and its very convoluted, I wouldnt' do it the same way now but haven't got time to redo the whole site just yet.

                               

                              I'd be very grateful for any advice.

                               

                              Couple of issues:

                               

                              First you have missed the closing css bracket } at the end of the css. Also surround the code with <style></style> tags (as shown below). Sometimes it is nececcary to include the id css selector in which the class is contained, in this instance #sidebar1 .very_large (as shown below).

                               

                              This should work:

                               

                              <!--[if IE 7]>
                              <style>
                              #sidebar1 .very_large {
                              line-height: 100px;
                              color: #fff;
                              }
                              </style>
                              <![endif]-->

                              • 12. Re: Problems with Internet Explorer 7
                                Streetwitch Level 1

                                Thankyou so much...its worked perfectly (though can't believe I missed the closing bracket...).  An really good bit of code which I suspect I'll need over and over again.  Have also used it to fix an issue in IE6, which I wasn't quite so concerned about but still best sorted out.

                                 

                                Thanks again!

                                .