11 Replies Latest reply on Jan 14, 2009 9:54 AM by Newsgroup_User

    Layout Issues with iExplorer and Firefox/Mozilla

    AdrianCSS Level 1
      My layout does not appear to display correctly in Firefox, it is all over the place. I'm not sure what I am doing wrong here. I have been trying to find a solution everywhere but I can't seem to find one.
      I have created the DIVs in different colours to make it easier to determine what is what.

      Safari - OK
      Firefox - NO (Layout no correct, overflow=auto not working)
      iExplorer - No Scroll bar (overflow=auto not working)
      Opera- OK

      Link to the website
      http://aslgroup.com.au/test

      Here is the link to the CSS code:
      http://www.aslgroup.com.au/test/assets/css/main4.0.css


      I am using the latest versions of browsers.
      iExplorer 7
      Firefox 3.0.5/ mozilla 5.0
      Opera 9.62
      Safari 3.2.1

      This site has been tested on a Windows PC. Still have to test on a MAC once the layout has been resolved.
      Any help would be appreciated.
        • 1. Re: Layout Issues wit iExplorer and Firefox/Mozilla
          Level 7
          On Tue, 13 Jan 2009 06:41:19 +0000 (UTC), "AdrianCSS"
          <webforumsuser@macromedia.com> wrote:

          >My layout does not appear to display correctly in Firefox, it is all over the
          >place. I'm not sure what I am doing wrong here. I have been trying to find a
          >solution everywhere but I can't seem to find one.

          Look at these rules in your CSS:

          #MainContentTexture {
          background-image: url(
          ../images/index/MainContentTexture_2.png;
          height: 250px;
          width: 643px;
          position: relative;
          float: left;
          background-color: #993399;
          margin-left: 25px;
          overflow: auto;
          }
          #MainContentTexture p {
          background-image: url(
          ../images/index/MainContentTexture_2.png;
          font-size: 12px;
          font-family: Tahoma, Verdana, Arial, "Times New Roman";
          color: #fff;
          }

          Note that you're missing the closing parenthesis on both of the background
          images.

          Gary
          • 2. Re: Layout Issues wit iExplorer and Firefox/Mozilla
            AdrianCSS Level 1
            Hi Garry,
            Thanks for your help, I had been scratching my head for a while with that one. I will make sure i check my CSS code in the future.
            I also used overflow-x: hidden as it was showing up in iExplorer.

            Once again, thanks for you help.
            Adrian
            • 3. Re: Layout Issues wit iExplorer and Firefox/Mozilla
              Level 7
              On Tue, 13 Jan 2009 23:23:06 +0000 (UTC), "AdrianCSS"
              <webforumsuser@macromedia.com> wrote:

              >Hi Garry,
              > Thanks for your help, I had been scratching my head for a while with that one.
              >I will make sure i check my CSS code in the future.
              > I also used overflow-x: hidden as it was showing up in iExplorer.

              You're welcome. FYI, overflow-x is invalid CSS.

              Gary
              • 4. Re: Layout Issues wit iExplorer and Firefox/Mozilla
                AdrianCSS Level 1
                Garry,
                What do yo think I should use instead of Overflow-x, in order to remove the horizontal scroll bar from appearing in iExplorer?
                Would there be any solution to this problem or should I just stick with it?
                Adrian
                • 5. Re: Layout Issues wit iExplorer and Firefox/Mozilla
                  Level 7
                  On Wed, 14 Jan 2009 00:56:31 +0000 (UTC), "AdrianCSS"
                  <webforumsuser@macromedia.com> wrote:

                  > What do yo think I should use instead of Overflow-x, in order to remove
                  >the horizontal scroll bar from appearing in iExplorer?
                  > Would there be any solution to this problem or should I just stick with it?

                  I don't understand why you're using *any* overflow there. Why not just let
                  the div expand vertically its contents?

                  That said, fix, or remove the broken <img src="" width="80" height="80"
                  alt="" /> in your code and remove the widths from the <table> and <td>
                  tags and see what happens. I believe your horizontal scroll bar is caused
                  because of a rather old IE bug that calculates the width of the content
                  based on the width of the containing block before adding the scroll bars.
                  When it adds the vertical scroll bar, the block is no longer wide enough
                  to contain the rendered width, so it adds the horizontal scroll bar.

                  But again, I see absolutely NO reason to not just let the <div> expand
                  vertically. You should also remove the height from the SideBar style. As
                  it is, in Firefox, if you increase the text size a couple of notches, it
                  overflows the container and doesn't have the white background behind the
                  text that overflows.

                  Gary
                  • 6. Re: Layout Issues wit iExplorer and Firefox/Mozilla
                    Level 7
                    "Gary White" <reply@newsgroup.please> wrote in message
                    news:lvtrm41m2loho4ucobh05d32l8kbtgabum@4ax.com...
                    > On Wed, 14 Jan 2009 00:56:31 +0000 (UTC), "AdrianCSS"
                    > <webforumsuser@macromedia.com> wrote:
                    >
                    >> What do yo think I should use instead of Overflow-x, in order to
                    >> remove
                    >>the horizontal scroll bar from appearing in iExplorer?
                    >> Would there be any solution to this problem or should I just stick with
                    >> it?
                    >
                    > I don't understand why you're using *any* overflow there. Why not just let
                    > the div expand vertically its contents?

                    Hi Gary,

                    Overflow-x actually hides the horizontal scrollbar and can be quite useful
                    as a fix for IE in the event you want to create a vertically scrolling
                    region, as in this example:
                    http://www.projectseven.com/products/menusystems/pmm2/testing/edge-detect/index2.htm

                    Remove the overflow-x in the CSS rule and IE will draw a persistent
                    horizontal scrollbar. There are other fixes for this, but they are either
                    more complex or require quirks mode. I'm not sure this is pertinent to the
                    OP's use of overflow-x, but Davis has inspired me today to be anecdotal :-)


                    --
                    Al Sparber - PVII
                    http://www.projectseven.com
                    The Finest Dreamweaver Menus | Galleries | Widgets
                    http://www.projectseven.com/go/pop
                    The Ultimate DW Menu System




                    • 7. Re: Layout Issues wit iExplorer and Firefox/Mozilla
                      Level 7
                      "Al Sparber - PVII" <pviiteam@projectSPAseven.com> wrote in message
                      news:gkkuc8$d0$1@forums.macromedia.com...
                      > but Davis has inspired me today to be anecdotal :-)

                      typo on purpose to be vague :-)

                      • 8. Re: Layout Issues wit iExplorer and Firefox/Mozilla
                        Level 7
                        On Wed, 14 Jan 2009 09:54:58 -0500, "Al Sparber - PVII"
                        <pviiteam@projectSPAseven.com> wrote:

                        >Overflow-x actually hides the horizontal scrollbar and can be quite useful
                        >as a fix for IE in the event you want to create a vertically scrolling
                        >region, as in this example:
                        > http://www.projectseven.com/products/menusystems/pmm2/testing/edge-detect/index2.htm
                        >
                        >Remove the overflow-x in the CSS rule and IE will draw a persistent
                        >horizontal scrollbar. There are other fixes for this, but they are either
                        >more complex or require quirks mode. I'm not sure this is pertinent to the
                        >OP's use of overflow-x, but Davis has inspired me today to be anecdotal :-)

                        Thanks, Al. I understand what overflow-x does. Interesting example, but I
                        don't have time to dissect the JavaScript to see exactly where it gets
                        applied. I do think that my suggestion to the OP will fix his problem, but
                        don't have time to test it right now. Been way to busy learning and
                        getting an Ajax project working. <sigh>

                        Gary
                        • 9. Re: Layout Issues wit iExplorer and Firefox/Mozilla
                          Level 7
                          On Wed, 14 Jan 2009 09:56:15 -0500, "Al Sparber - PVII"
                          <pviiteam@projectSPAseven.com> wrote:

                          >typo on purpose to be vague :-)

                          <LOL>

                          Gary
                          • 10. Re: Layout Issues wit iExplorer and Firefox/Mozilla
                            Level 7
                            "Gary White" <reply@newsgroup.please> wrote in message
                            news:7m6sm4lghqqsjut1mpg7uur0l87i0lgs0t@4ax.com...
                            > On Wed, 14 Jan 2009 09:54:58 -0500, "Al Sparber - PVII"
                            > <pviiteam@projectSPAseven.com> wrote:
                            >
                            >>Overflow-x actually hides the horizontal scrollbar and can be quite useful
                            >>as a fix for IE in the event you want to create a vertically scrolling
                            >>region, as in this example:
                            >> http://www.projectseven.com/products/menusystems/pmm2/testing/edge-detect/index2.htm
                            >>
                            >>Remove the overflow-x in the CSS rule and IE will draw a persistent
                            >>horizontal scrollbar. There are other fixes for this, but they are either
                            >>more complex or require quirks mode. I'm not sure this is pertinent to the
                            >>OP's use of overflow-x, but Davis has inspired me today to be anecdotal
                            >>:-)
                            >
                            > Thanks, Al. I understand what overflow-x does. Interesting example, but I
                            > don't have time to dissect the JavaScript to see exactly where it gets
                            > applied.

                            No problem. It's not script, though.

                            In the normal CSS:
                            #p7PMM_1u3 {
                            height: 240px;
                            overflow: auto;
                            }

                            And a conditional comment to hide the horizontal scrollbar for that element
                            in IE:
                            <!--[if lte IE 7]>
                            <style>
                            #p7PMM_1u3 {overflow-x: hidden;}
                            </style>
                            <![endif]-->

                            I'm sure you were correct on the OP's issue :-)


                            • 11. Re: Layout Issues wit iExplorer and Firefox/Mozilla
                              Level 7
                              On Wed, 14 Jan 2009 12:35:13 -0500, "Al Sparber - PVII"
                              <pviiteam@projectSPAseven.com> wrote:

                              >No problem. It's not script, though.
                              >
                              >In the normal CSS:
                              >#p7PMM_1u3 {
                              > height: 240px;
                              > overflow: auto;
                              >}
                              >
                              >And a conditional comment to hide the horizontal scrollbar for that element
                              >in IE:
                              ><!--[if lte IE 7]>
                              ><style>
                              >#p7PMM_1u3 {overflow-x: hidden;}
                              ></style>
                              ><![endif]-->

                              I saw those. What I didn't see was any page element with an id of
                              p7PMM_1u3. I'm assuming that the id gets assigned somewhere in the script.

                              Gary