11 Replies Latest reply on Aug 26, 2010 8:30 AM by scottsman78

    Browser compatibility for IE8

    scottsman78

      Hi all,

       

      I am relatively new to dreamweaver, or at least inexperienced.

      I have a page open I am working on. I want to create a navigation bar across the top of the page with a background and rollover images.

      The background image has been placed inside the "navBar" div tag, then to get the links I have dropped a table of 1 row and 6 columns each containing a rollover .png file so the buttons have a shiney effect when rolled over.

       

      When I test it, it works perfectly in firefox, chrome and safari but none of the background images appear in Internet explorer.

      The rollovers are there but the background isn't and this is also the case for my header image and any other background images I have written into the DIV tag in CSS.

       

      Can anyone help please? This is really starting to annoy me.

       

      Thanks,

       

      Scott.

        • 1. Re: Browser compatibility for IE8
          Nancy OShea Adobe Community Professional & MVP

          Use CSS to style your HTML list menu.

          http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml

           

          Or use the Spry menus that come with DW.

           

           

          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: Browser compatibility for IE8
            scottsman78 Level 1

            Thanks Nancy,

             

            This helps me get around the problem and I could spend a few hours to workout how to get the spry to look the way I want it but I would like to know why the background images don't work in IE? I must be doing something wrong or am unaware of something that causes this and I want to avoid it happening again.

            Can anyone help?

            • 3. Re: Browser compatibility for IE8
              MurraySummers Level 8

              The most common cause for "missing" background images is container collapse.  What I mean by this can be illustrated as follows -

               

              <div style="background-image:url(/_img/someimage.jpg);">

                   <div style="width:600px;float:left;"><p>Lots of text</p></div>

              </div>

               

              In that simple example, the float within the outer div is not cleared before closing the div.  Since a floated element is removed from the normal flow, the containing div simply ignores its presence.  Since the outer div is ignoring its contents, it collapses height to a thin line, thereby occluding its background image and making you think that the background image is not there.  But it is.  To remedy this, one could assign a height to the outer div, but that has other dangers associated with it (text content overflow primarily).  The simple solution is to clear the float.  There are two ways one could do that:

               

              1.  Float the outer container (since a floated element always clears its contained floats)

              2.  Assign a style of 'overflow:hidden' to the outer container

              3.  Add a clearing element before closing the container

               

              Each of these methods has 'going-in criteria' that must be considered.  To float an element, you also need to assign a width - this may be inconvenient, which would eliminate #1 as an alternative.  The overflow:hidden style will create issues in DW's Design view that you need to know how to surmount, so #2 may not be your choice.  A clearing element can also do the job, but will add to the code on the page - this may not be a primary consideration for you.  An example of a clearing element would be -

               

              <div style="background-image:url(/_img/someimage.jpg);">

                   <div style="width:600px;float:left;"><p>Lots of text</p></div>

                   <hr style="height:0;width:0;line-height:0;clear:left;">

              </div>

              I haven't looked at your page to see if this is what is happening, but I strongly suspect it is....

              1 person found this helpful
              • 4. Re: Browser compatibility for IE8
                scottsman78 Level 1

                Hi Murray,

                 

                This is a great help.

                I've uploaded the page temporarily to let you see if this is what you think?

                I'm not much of a coder so can you tell me what I need to change to fix this.

                The clear float is causing me a bit of concern in CSS as I'm not sure if what I try is correct or if it will affect other CSS within the page?

                 

                Thanks.

                 

                http://www.leithathelticfc.com/home.html

                • 5. Re: Browser compatibility for IE8
                  Nancy OShea Adobe Community Professional & MVP

                  Server not found.

                   

                  Perhaps if would help you to review CSS floats.

                  http://css.maxdesign.com.au/floatutorial/

                   

                   

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

                  • 6. Re: Browser compatibility for IE8
                    scottsman78 Level 1

                    Sorry, that address should have been: http://www.leithathleticfc.com/home.html

                     

                    Still not sure how to clear the floats? Should they be set to none? Whatever I try doesn't work.
                    I've also tried just adding an image instead of a background image and that gives me the broken image icon in dreamweaver and I can see it fine in all browsers except IE where I get a red cross where the image should be?

                    • 7. Re: Browser compatibility for IE8
                      Nancy OShea Adobe Community Professional & MVP

                      I see a couple of problems.

                      Remove height restriction from body and other containers.  If needed to reveal a background image, use min-height property instead.

                       

                      body {
                          background-color: #000;
                          margin: 0px;
                          padding: 0px;
                          height: 30px;
                      }

                       

                      Folder & File names should not begin with hyphen, underscore or other special characters.

                       

                      _images/header.jpg

                       

                      Similarly, don't use spaces in folder or file names.

                       

                      _images/Peter%20Smith%20Cup.jpg

                       

                       

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

                      • 8. Re: Browser compatibility for IE8
                        MurraySummers Level 8

                        Folder & File names should not begin with hyphen, underscore or other special characters.

                         

                        _images/header.jpg

                         

                        There's no such restriction.  I do it all the time.  It's convenient because it makes all those folders sort in a group.

                        • 9. Re: Browser compatibility for IE8
                          scottsman78 Level 1

                          The spaces in the naming of the images should not be like that but I can change that easy enough.

                          The file naming convension was a tip in a tutorial I watched.

                          I've still got the problem with the background images not appearing in Internet Explorer though.

                          No one seems able to tell me how to fix this?

                          Removing the height of the div tag means that it cuts the image off halfway down in Firefox etc and it still doesn't appear in IE?

                           

                          Help!

                          • 10. Re: Browser compatibility for IE8
                            bemdesign Level 4

                            Convert your image to RGB colorspace - you have it as CMYK (great for print, not good for screen/web) which IE does not support.

                            • 11. Re: Browser compatibility for IE8
                              scottsman78 Level 1

                              Amazing! I didn't even notice photoshop had them on CYMK or that this could affect the page.

                              Thanks you so much this problem has been driving me mad for weeks!

                               

                              Cheers,

                               

                              Scott.