Possible Firefox CSS content problem - Refresh fixes it

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • autospanker
    New Member
    • Feb 2007
    • 2
    #1

    Possible Firefox CSS content problem - Refresh fixes it

    Ladies and Gentleman,

    I have been having this problem that has been driving me insane. I have a website that when viewed in Firefox first, the content in the body area is pushed down. Then when you click refresh, the content on that page is fine. I believe this could possibily a firefox issue. When I load the website in IE6 or IE7 the content is just fine. Any page you visit with IEXporer displays correctly where as if you go to the start page within firefox, you have to click refresh to display correct. If you click on abother link within the website, you again have to click refresh for the page to display correctly. Every page on the site acts the same in Firefox.

    I would like to know what might be causing this problem. Here is the source to my CSS. My website is as follows. http://www.securemidwe st.com

    form {
    margin:0px;
    padding:0px;
    }

    ul {margin:0; padding:0; list-style:none;line-height:25px;}
    ul li {
    background:url( images/marker.gif) center left no-repeat;padding: 0 0 0 17px ;
    }

    body{
    margin:0px;
    padding:0px;
    text-align:center;
    background-color:#E7E7E7;
    }

    div,textarea{
    font-size:11px;
    font-family:Tahoma;
    color:#444444;
    line-height:14px;
    text-align:left;
    margin:0 auto;
    }
    .m { color:#636363}

    a:hover{ text-decoration:none }

    .wrap{
    margin:0 auto;
    padding:0;
    width:704px;
    height:777px;
    text-align:center;
    background:URL( images/tall_y.gif) repeat-y;
    display:table;
    }

    .form input{
    width:145px;
    height:17px;
    padding:1 0 0 8px;
    color:#9C9C9C;
    font-size:10px;
    line-height:12px;
    vertical-align:middle;
    }
    .form{
    width:234px;
    height:87px;
    background:URL( images/back_form.gif) no-repeat;
    }

    .header{
    margin:0 auto;
    padding:0;
    width:704px;
    height:263px;
    text-align:left;
    background:URL( images/header.jpg) no-repeat;
    }


    .content{
    margin:0 auto;
    padding:0;
    width:704px;
    height:413px;
    text-align:left;
    display:table;
    background:URL( images/back_cont.jpg) no-repeat top;
    }
    .footer a{ color:#2CA7F3; font-size:10px; text-decoration:none }
    .footer a:hover{ text-decoration:unde rline}
    .footer_font{
    color:#627074;
    font-size:10px;
    }
    .footer_privacy a, .footer_privacy {
    color:#8F9B9E;
    font-size:10px;
    text-decoration:none ;
    }
    a { color:#2CA7F3}
    .block a{color:#33576F ;}
    .block{
    color:#33576F;
    padding:21 15 16 28px
    }
    .footer_privacy a:hover{ text-decoration:unde rline}
    .footer{
    margin:0 auto;
    padding:0;
    width:704px;
    height:101px;
    text-align:center;
    background:URL( images/footer.gif) no-repeat bottom;
    }
    .input_image{
    margin-left:7px;
    vertical-align:middle;
    }
    .input1{
    width:146px;
    height:22px;
    background-color:#FFFFFF;
    font-size:11px;
    font-family:Tahoma;
    color:#444444;
    line-height:12px;
    padding:3 0 0 4px;
    vertical-align:middle;
    margin-left:10px;
    }
    .input2{
    width:117px;hei ght:20px;
    background-color:#FFFFFF;
    font-size:11px;
    font-family:Tahoma;
    color:#33576F;
    line-height:12px;
    padding:3 0 0 4px;
    border-color:#B0B0B0;
    border-width:1px;
    border-style:solid;
    vertical-align:middle;
    }
    .textarea{
    width:127px;hei ght:79px;
    background-color:#FFFFFF;
    font-size:11px;
    font-family:Tahoma;
    color:#33576F;
    line-height:12px;
    padding:3 0 0 4px;
    border-color:#B0B0B0;
    border-width:1px;
    border-style:solid;
    overflow:hidden ;
    }
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      The problem is IE. Never, ever use IE as a guide. It is old, buggy and non-standards compliant. Always use any other browser as a reference as to whether your code is working.

      First, validate and fix your css errors. You must always specify units when they are anything but zero.

      Second, IE has a bug where is expands divs to contain floated elements. This is incorrect behavior.

      Third, your doctype is incomplete and IE is in 'quirks mode' which is like 1998 all over again. Change it to this one:
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      Then revalidate your html and see what, if any, errors occur.

      Once you fix all that, get it working in Firefox and then we can adjust for IEs quirks and bugs, if necessary.

      You may find it helpful to read the stickies at the top of this board.

      Feel free to ask for any help along those lines here.

        Comment

        • autospanker
          New Member
          • Feb 2007
          • 2
          #3
          Okay, I changed the DOCTYPE and then validated/corrected the CSS errors. As soon as I put the strict doctype in, everything on the left hand page display is not aligned.

          The problem with FF still not displaying correctly is still occurring. A simple refresh fixes it or if I just click the navigation link again, the page displays correctly. Any suggestions would be great!

          By the way, now the alignment I mentioned that is "off" on the left hand is off when viewed in IE as well.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              Ignore the PM I just sent you about opening a new thread. This one is fine but do read the contents. Your html still doesn't validate.

                Comment

                Previous template Next
                Working...