10 Replies Latest reply on May 18, 2010 6:00 AM by scott1956

    CS4: Layout conflict between Firefox & IE

    scott1956 Level 1

      I am a total newbie to Dreamweaver CS4, after years of doing table-based layouts in Frontpage.  So I'm sure there are plenty of other errors with the HTML or CSS code for the page below. But I've been stumped for about 24 hours now on why the page displays as I like in Firefox 3.6.3 and not in MSIE 7.0.xxx

       

      I took Dreamweaver's 3 column fixed layout template and decided that below the three columns, I would like to add 3 more columns, each of equal width below the 3 upper columns. I wrote the CSS rules for the three lower columns (divs), left floating the lower left column, right floating the lower right column, no float for the lower middle column but enough margin for the lower middle column so that it clears the first column. I also did not set a width for the lower middle column, only for the two columns on each side of it. I put the same 270px graphic in each of those lower columns.

       

      Here is the page:

       

      http://firinglinedesign.com/pds/

       

      The CSS is http://firinglinedesign.com/pds/main.css

       

      If you look at the page in Firefox, those three lower columns look fine. If you look at it in MSIE, they don't. I ran a browser compatibility check and the page comes up with no issues. I also enabled "highlight invalid code" but nothing came up. But visually the page obviously has issues in MSIE ;(

       

      If anyone can provide any input, I'd sure appreciate it.

       

      Many thanks in advance.

       

      Scott

        • 1. Re: CS4: Layout conflict between Firefox & IE
          osgood_ Level 8

          Float all three <divs> left. This gives a much more solid construction. Change your css to as below for the three <divs>

           

           

          .thrColFixHdr #lowerLeftThird {
              float: left; /* since this element is floated, a width must be given */
              width: 270px;
              background-color: #FFF;
              padding-right: 10px;
              padding-left: 20px;

           

          }   
             
          .thrColFixHdr #lowerMiddleThird {
              float: left;
              width: 280px;
              padding-right: 10px;
              padding-left: 10px;

          }   

           

          .thrColFixHdr #lowerRightThird {
              float: left; /* since this element is floated, a width must be given */
              width: 270px;
              padding-right: 15px;
              padding-left: 15px;

           

          }

          • 2. Re: CS4: Layout conflict between Firefox & IE
            scott1956 Level 1

            Thanks so much for the prompt reply. I made those changes to the CSS file, but the page still does not display correctly in MSIE 7.0. Take a look and I think you'll see what I mean.

             

            Just to refresh, here are the page and css file links:

             

            Here is the page (with suggested CSS revisions):

             

            http://firinglinedesign.com/pds/

             

            Here is the current CSS:

             

            http://firinglinedesign.com/pds/main.css

             

            My original CSS from the original post is here:

             

            http://firinglinedesign.com/pds/mainOLD.css

             

            Your input is much appreciated.

             

            Thanks,

            Scott

            • 3. Re: CS4: Layout conflict between Firefox & IE
              martcol Level 4

              Hmmmm....

               

              What happens if you add another clearing <br /> after your third <div> (i.e. <br class="clearfloat" />)?

               

              Martin

              • 4. Re: CS4: Layout conflict between Firefox & IE
                osgood_ Level 8

                Can you move the link to the css stylesheet to after the IE conditional comments please.

                 

                So instead of the link to the stylesheet being first like below:

                 

                <link href="main.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
                <style type="text/css">
                /* place css box model fixes for IE 5* in this conditional comment */
                .thrColFixHdr #sidebar1 { width: 180px; }
                .thrColFixHdr #sidebar2 { width: 190px; }
                </style>
                <![endif]-->
                <!--[if IE]>
                <style type="text/css">
                /* place css fixes for all versions of IE in this conditional comment */
                .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
                .thrColFixHdr #mainContent { zoom: 1; }
                /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
                </style>
                <![endif]-->



                It's at the end like below:

                <!--[if IE 5]>
                <style type="text/css">
                /* place css box model fixes for IE 5* in this conditional comment */
                .thrColFixHdr #sidebar1 { width: 180px; }
                .thrColFixHdr #sidebar2 { width: 190px; }
                </style>
                <![endif]-->
                <!--[if IE]>
                <style type="text/css">
                /* place css fixes for all versions of IE in this conditional comment */
                .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
                .thrColFixHdr #mainContent { zoom: 1; }
                /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
                </style>
                <![endif]-->


                <link href="main.css" rel="stylesheet" type="text/css" />


                There's something in the IE conditional comments that is upsetting IE7.
                • 5. Re: CS4: Layout conflict between Firefox & IE
                  scott1956 Level 1

                  Your suggesting for moving the code solved the problem, osgood. Many thanks!

                   

                  I have an 1100+ page book on Dreamweaver CS4 (The Missing Manual) and access to the entire Lynda.com library of training videos. I don't know how I could ever have found this, which is kind of discouraging considering I encountered it on my very first page and on a relatively simple one at that. And that code was placed in it's original position automatically by Dreamweaver. This CSS is complicated stuff compared to table-based layouts!

                   

                  I really appreciate your assistance. I'm still having spacing issues between the two browsers, specifically below the nav bar and above the footer. Totally different in each browser. But I'm hopeful I can rectify that by manipulating margins and/or padding in each case.

                   

                  Thanks again.

                   

                  Scott

                  • 6. Re: CS4: Layout conflict between Firefox & IE
                    osgood_ Level 8

                    scott1956 wrote:

                     

                    Your suggesting for moving the code solved the problem, osgood. Many thanks!

                     

                    I have an 1100+ page book on Dreamweaver CS4 (The Missing Manual) and access to the entire Lynda.com library of training videos. I don't know how I could ever have found this, which is kind of discouraging considering I encountered it on my very first page and on a relatively simple one at that. And that code was placed in it's original position automatically by Dreamweaver. This CSS is complicated stuff compared to table-based layouts!

                     

                    I really appreciate your assistance. I'm still having spacing issues between the two browsers, specifically below the nav bar and above the footer. Totally different in each browser. But I'm hopeful I can rectify that by manipulating margins and/or padding in each case.

                     

                    Thanks again.

                     

                    Scott

                     

                    Hi Scott,

                     

                    Yes, it can seem quite complex at first. Once you get confident and know something which should work isn't working then it has to be something else in the page which is causing it not to work.

                     

                    Sometimes its a matter of stripping down the page if you can't immediately find the fault. However once you get a good grip of css you can usually overcome these positional issues quite quickly.

                     

                    Remember that browsers show things slightly differently so the page will never be identical in every browser, a close match yes.

                    • 7. Re: CS4: Layout conflict between Firefox & IE
                      scott1956 Level 1

                      Thanks for the encouragement. I'm actually a lot better with this today than I was yesterday, since I've spent about 12  hours with it between the Dreamweaver program itself, the book and the video tutorials. This "box model" business is like learning Chinese after speaking English when you compare it to the concepts behind table based layouts. I'm confident that once I grasp the basic principles of laying out pages this way, the rest will fall into place.

                       

                      Thanks again for your help.

                      • 8. Re: CS4: Layout conflict between Firefox & IE
                        osgood_ Level 8

                        As for your spacing issues below the nav:

                         

                        This is mainly caused by the default margin/padding on <p> tags in the sidebar and the h1 tag in the mainContent.

                         

                        I find the cleanest procedure is to zero the margin/padding out:

                         

                        #sidebar1 p {

                        margin: 0;

                        padding: 0;

                        }

                         

                        Then to achieve the spacing between the images:

                         

                        #sidebar1 img {

                        margin: 0 0 10px 0; /*top,right,bottom,left*/

                        }

                         

                        Then add 20px padding to the sidebar1 css instead of 8px (or whatever you want to set the distance at). You will now find that the space is the same in all browsers and you won't need to use the IE conditional comments (which you have done to try and make the space look the same)

                         

                        If you do the same for your mainContent:

                         

                        zero out the margin/padding on the h1 tag:

                         

                        #mainContent h1 {

                        margin: 0;

                        padding: 0;

                        }

                         

                        Then add top padding to the mainContent:

                         

                        #mainContent {

                        padding: 20px 0 0 0;

                        }

                         

                        This way you will find things much easier to control and tweak.

                         

                        Then add some bottom padding back in on the h1 tag to create some space between it and the following text:

                         

                        #mainContent h1 {

                        margin: 0;

                        padding: 0 0 10px 0;

                        }

                        • 9. Re: CS4: Layout conflict between Firefox & IE
                          scott1956 Level 1

                          I can't even begin to tell you how helpful that last post was, both in the context of this particular page, and, more importantly, in my coming to understand how to make layouts look the way I want using margins and padding.

                           

                          I took your advice on the coding and the page looks virtually identical now in Firefox and Internet Explorer. Thanks a million!

                           

                          Scott

                          • 10. Re: CS4: Layout conflict between Firefox & IE
                            scott1956 Level 1

                            Hi osgood,

                             

                            If you're monitoring this thread, would you mind taking a look at the page below. I'm running into the same problem I had with my index page with the spacing below the three lower columns and above the footer. I actually made this page doing a Save As from that index page after it was fixed. But for some reason I have this disparity in spacing between MSIE 7 and Firefox. MSIE is adding extra space below those three lower columns. For what it's worth, that spacing disparity doesn't occur in MSIE 8. I've tried modifying padding and margins settings throught the CSS file, but nothing seems to work.

                             

                            http://firinglinedesign.com/pds/shipping.htm

                             

                            Many thanks in advance for your help.