3 Replies Latest reply on Sep 18, 2007 3:00 AM by Newsgroup_User

    IE and Firefox CSS Problems

    Theminks
      Hi,
      I have been having trouble with browsers rendering CSS differently. Here is the page i have been working on Webpage Example NOw i have managed to get the Main Navigation Bar working in both browsers but never at the same time it either works in one or the other. I have the CSS set up for it to work in IE7 but in Fire Fox the text sits to low. Oh and i don't want to use Java Script.
      The other issue is the header sits perfectly in Fire Fox but to high in IE and the Footer URL's sit properly in Firefox but are out of alignment in IE.

      I know thats quite a few issues and i thank you in advance for any assistance.

      P.S i haven't attached the code assuming that most people have the Fire fox Developer Tool Bar but here is the URL in case
        • 1. Re: IE and Firefox CSS Problems
          Level 7
          Theminks wrote:
          > Hi,
          > I have been having trouble with browsers rendering CSS differently. Here is
          > the page i have been working on
          > http://www.frontlinetrading.com.au/test/forum_test.html NOw i have managed to
          > get the Main Navigation Bar working in both browsers but never at the same time
          > it either works in one or the other. I have the CSS set up for it to work in
          > IE7 but in Fire Fox the text sits to low. Oh and i don't want to use Java
          > Script.

          Remove the <p></p> tags from around all of your links, so they look like
          below. Firefox will apply a defalut margin/padding (which is probably
          what you are seeing) to them whereas IE wont.

          <div id="home">
          <a href="#">Home</a>
          </div>





          > The other issue is the header sits perfectly in Fire Fox but to high in IE


          Why are you using top -5px on this?

          #page_container #secondary_container {
          background-image: url(../images/sub_content_background.png);
          background-attachment: scroll;
          background-repeat: repeat;
          background-position: left top;
          width: 795px;
          position: relative;
          top: -5px;
          left: 114px;
          margin-bottom: 20px;
          margin-top: 0px;
          }


          and why are you using top -14px on this?



          .header {
          background-image: url(../images/Header.gif);
          background-repeat: no-repeat;
          background-position: left top;
          height: 70px;
          position: relative;
          top: -14px;
          z-index: 1;
          }


          All in all youre getting yourself into a big mess by doing so and its
          probably the cause of the mis-match cross brower.

          You can try to zero the H1 padding and margin by adding

          h1 {
          margin: 0;
          padding: 0;
          }

          Then remove the minus values from .header and #page_container
          #secondary_container

          There is an easiier way of centering your container than this convoluted
          vomit.

          #page_container {
          background-image: url(../images/main_content_background.jpg);
          background-attachment: scroll;
          background-repeat: repeat;
          background-position: left top;
          width: 1024px;
          position: absolute;
          left: 50%;
          margin-left: -512px;
          border: 3px solid #111;
          }


          This will do the job and is easier to remember:

          #page_container {
          background-image: url(../images/main_content_background.jpg);
          background-attachment: scroll;
          background-repeat: repeat;
          background-position: left top;
          width: 1024px;
          margin: 0 auto;
          border: 3px solid #111;
          }

          Then I would change your

          #page_container #secondary_container {
          background-image: url(../images/sub_content_background.png);
          background-attachment: scroll;
          background-repeat: repeat;
          background-position: left top;
          width: 795px;
          position: relative;
          top: -5px;
          left: 114px;
          margin-bottom: 20px;
          margin-top: 0px;
          }


          to:


          #page_container #secondary_container {
          background-image: url(../images/sub_content_background.png);
          background-attachment: scroll;
          background-repeat: repeat;
          background-position: left top;
          width: 795px;
          position: relative;
          margin-left: 114px;
          margin-bottom: 20px;

          }





          and
          > the Footer URL's sit properly in Firefox but are out of alignment in IE.


          HUH.......sorry but you need to go and learn some simple css. I wouldn't
          begin to try and unpick the footer.

          Where are you learning this stuff from because I want to shove a long
          pole up their ***?



          • 2. Re: IE and Firefox CSS Problems
            Theminks Level 1
            Hey thanks
            Removing the <p> tags worked perfectly and so did changing the header code and the Main Container code. You asked where i learnt this stuff from mainly just other peoples pages and Lynda.com but it's all practice and trial and error.

            P.S If you were wondering why i use <div> tags with background images and text-indents of -9999px, i was told that it was quite a standard image replacement technique and worked well for ppl who use screen readers.

            Cheers Thanks again
            • 3. Re: IE and Firefox CSS Problems
              Level 7
              Theminks wrote:
              > Hey thanks
              > Removing the <p> tags worked perfectly and so did changing the header
              > code and the Main Container code. You asked where i learnt this stuff from
              > mainly just other peoples pages and Lynda.com but it's all practice and trial
              > and error.

              I'm glad it worked for you. You're right it is all about trial and
              error. The key is try and narrow down those sources that show you how do
              do things simply. A lot of sources use techniques that are overly complex.


              > P.S If you were wondering why i use <div> tags with background images and
              > text-indents of -9999px, i was told that it was quite a standard image
              > replacement technique and worked well for ppl who use screen readers.

              I wasn't quite sure what you were trying to do.


              Rarely is there a case for using position: relative; The only time I can
              think of needing to use it would be where I wanted to position an
              absoloute element within a container....in that instance the container
              would need a position or relative associated with it.