9 Replies Latest reply on Sep 24, 2008 7:11 PM by AdrianCSS

    CSS and Fireworks Issue

    AdrianCSS
      Background Info:

      Banner images: h=185px, w= 955px
      Banner DIV- CSS Rule= Height=185px, Width=955px
      ---------------------------------------------------------

      Problem:
      Firefox - Banner display with a white gap, approx 10 px below the banner. I also have a NAV DIV under the Banner DIV.

      I can't see to work out why Firefox doesn't display the page correctly.

      Internet Explorer- Banner displays perfectly.
        • 1. Re: CSS and Fireworks Issue
          Level 7
          Hello,

          Can you post a link so we can see the code?
          I'm betting it's a Firefox default margin on a tag where no margin was
          defined using CSS. UL, LI, H1, H2, P..for example.

          Take care,
          Tim


          "AdrianCSS" <webforumsuser@macromedia.com> wrote in message
          news:gbc7kf$30m$1@forums.macromedia.com...
          > Background Info:
          >
          > Banner images: h=185px, w= 955px
          > Banner DIV- CSS Rule= Height=185px, Width=955px
          > ---------------------------------------------------------
          >
          > Problem:
          > Firefox - Banner display with a white gap, approx 10 px below the banner.
          > I
          > also have a NAV DIV under the Banner DIV.
          >
          > I can't see to work out why Firefox doesn't display the page correctly.
          >
          > Internet Explorer- Banner displays perfectly.
          >


          • 2. Re: CSS and Fireworks Issue
            AdrianCSS Level 1
            Thanks for your reply Tim,
            Here is some code from the html page
            ----------------------------------------------------------------------
            <body>
            <div id="Wrapper"><!-- InstanceBeginEditable name="Banner" -->
            <div id="Banner"><img src="assets/images/banner- 955x185/banner_BA_blue.jpg" alt="Ford Upgrades" />

            </div>
            <!-- InstanceEndEditable -->

            <!--End of Banner-->

            ----------------------------------------------------------------------------------------- ------------------------------

            Code from the CSS Style Sheet

            #Banner {
            height: 185px;
            width: 955px;
            }

            Tell me if this help, otherwise I will post the website in a subfolder on my server, for you to look at.
            Hope you can help.
            • 3. Re: CSS and Fireworks Issue
              Level 7
              Its most likely not your 'banner' <div> giving yu the problem. This
              sounds like a default margin/padding on something in your 'Nav' <div>.

              The clue would be IE does NOT show some default margins (thats why it
              looks ok in that browser) but Firefox does.

              The question is whats in your 'nav' <div>.

              As Tim says zero out the margins using css and see if the gap disappears.





              AdrianCSS wrote:
              > Thanks for your reply Tim,
              > Here is some code from the html page
              > ----------------------------------------------------------------------
              > <body>
              > <div id="Wrapper"><!-- InstanceBeginEditable name="Banner" -->
              > <div id="Banner"><img src="assets/images/banner- 955x185/banner_BA_blue.jpg"
              > alt="Ford Upgrades" />
              >
              > </div>
              > <!-- InstanceEndEditable -->
              >
              > <!--End of Banner-->
              >
              >
              > --------------------------------------------------------------------------------
              > ---------------------------------------
              >
              > Code from the CSS Style Sheet
              >
              > #Banner {
              > height: 185px;
              > width: 955px;
              > }
              >
              > Tell me if this help, otherwise I will post the website in a subfolder on my
              > server, for you to look at.
              > Hope you can help.
              >
              • 4. Re: CSS and Fireworks Issue
                Level 7
                On Wed, 24 Sep 2008 04:15:54 +0000 (UTC), "AdrianCSS"
                <webforumsuser@macromedia.com> wrote:

                > Code from the CSS Style Sheet
                >
                > #Banner {
                > height: 185px;
                > width: 955px;
                > }

                The <img> tag is an inline tag in that it will flow with the text. The
                space below the image is the space reserved for the descenders on the
                lower case g, j, p, q, and y. You can correct your layout by adding
                this to your style sheet:

                #Banner img {
                display: block;
                }

                Gary
                • 5. Re: CSS and Fireworks Issue
                  AdrianCSS Level 1
                  Thanks for you help so far, but it hasn't yet fixed the problem.
                  I was hoping that the display: block for the banner div would help. I saved the template file and the CSS file and previewed it in Firefox. I have provided the code that I have used so far

                  Any other suggestions would really be appreciated.
                  I have provided the code that I have used so far below. Hope this helps.



                  #Banner img {
                  display: block;
                  }
                  #Banner {
                  height: 185px;
                  width: 955px;
                  display: block;
                  margin: 0px;
                  }
                  #Nav {
                  background-image: url(../images/nav_bg.jpg);
                  background-repeat: repeat-x;
                  height: 50px;
                  border-right-width: thin;
                  border-left-width: thin;
                  border-right-style: solid;
                  border-left-style: solid;
                  border-right-color: #DC6B01;
                  border-left-color: #DC6B01;
                  margin: 0px;
                  }
                  #Nav li {
                  font-family: Tahoma, Verdana, Arial, "Times New Roman";
                  font-size: 16px;
                  color: #5e5e5e;
                  text-transform: uppercase;
                  font-weight: bold;
                  margin-right: 25px;
                  margin-left: 25px;
                  text-align: center;
                  display: inline;
                  list-style-image: url(../images/menu_line_color.jpg);
                  }
                  #Nav ul {
                  padding-top: 15px;
                  list-style: none;
                  }
                  #Nav a {
                  font-family: Tahoma, Verdana, Arial, "Times New Roman";
                  font-size: 16px;
                  color: #5e5e5e;
                  text-transform: uppercase;
                  font-weight: bold;
                  text-decoration: none;
                  • 6. CSS and Fireworks Issue
                    AdrianCSS Level 1
                    Here is a LINK to the web page that I am having issues with. You may get a better idea of what I'm talking about.

                    Open the web page in Internet Explorer and Firefox/Opera to notice the difference. You will see that in Internet Explorer7, it all looks OK, compared to Firefox.

                    http://asllogistics.com/Test/

                    Adrian
                    • 7. Re: CSS and Fireworks Issue
                      Level 7
                      Hello,

                      As suspected, Firefox is using it's default margin for the UL in the nav div
                      as none was defined.
                      You need to set it to 0.

                      Just change this CSS as shown:

                      #Nav ul {
                      padding-top: 15px;
                      list-style: none;
                      margin: 0px;
                      }

                      Take care,
                      Tim


                      "AdrianCSS" <webforumsuser@macromedia.com> wrote in message
                      news:gbem39$5as$1@forums.macromedia.com...
                      > Here is a LINK to the web page that I am having issues with. You may able
                      > get
                      > a better idea of what I'm talking about.
                      >
                      > Open the web page in Internet Explorer and Firefox/Opera to notice the
                      > difference. You will see that in Internet Explorer7, it all looks OK,
                      > compared
                      > to Firefox.
                      >
                      > http://asllogistics.com/Test/
                      >
                      >


                      • 8. Re: CSS and Fireworks Issue
                        Level 7
                        Also, if I may that flashing "New" is distracting.
                        I was trying to look at the image of the monitor and read the small text and
                        that thing just kept pulling my eyes away.
                        It was almost like it was speaking to me...

                        "This is new. NEW!
                        See this...it's NEW! Look at it. It's new!
                        It's New, do you understand. Are you looking at it?
                        In case you missed it, it's new!
                        It's NEW, darn you, look at it!!!"

                        The flashing stuff is generally considered annoying by many people, and it
                        often does more harm than good.
                        For some, it brings about a wary feeling due to all the times users have
                        seen the flashing
                        "You're the millionth viewer, claim your free IPod!" and similar junk or
                        scams.

                        Take care,
                        Tim


                        "TC2112" <nospam@nospam.com> wrote in message
                        news:gbent5$78u$1@forums.macromedia.com...
                        > Hello,
                        >
                        > As suspected, Firefox is using it's default margin for the UL in the nav
                        > div as none was defined.
                        > You need to set it to 0.
                        >
                        > Just change this CSS as shown:
                        >
                        > #Nav ul {
                        > padding-top: 15px;
                        > list-style: none;
                        > margin: 0px;
                        > }
                        >
                        > Take care,
                        > Tim
                        >
                        >
                        > "AdrianCSS" <webforumsuser@macromedia.com> wrote in message
                        > news:gbem39$5as$1@forums.macromedia.com...
                        >> Here is a LINK to the web page that I am having issues with. You may
                        >> able get
                        >> a better idea of what I'm talking about.
                        >>
                        >> Open the web page in Internet Explorer and Firefox/Opera to notice the
                        >> difference. You will see that in Internet Explorer7, it all looks OK,
                        >> compared
                        >> to Firefox.
                        >>
                        >> http://asllogistics.com/Test/
                        >>
                        >>
                        >
                        >


                        • 9. Re: CSS and Fireworks Issue
                          AdrianCSS Level 1
                          Tim,
                          Thanks for your suggestion for the Flashing text, and I will prob have static text instead without it flashing.

                          Also thanks for your help with the CSS code, miraculously, it has fixed the issue with the code below:

                          #Nav ul {
                          padding-top: 15px;
                          list-style: none;
                          text-decoration: none;
                          margin: 0px;


                          Note: I checked the page without the code below, and it still works. Would i really need this? I thought this would only be used for #Nav a, in order to remove the line for links.

                          text-decoration: none;

                          Again, thanks for your help Tim and everyone that tried to help.

                          Would you recommend any books or online resources that I could read in case I run into any other CSS issues?