10 Replies Latest reply on Mar 9, 2010 6:29 PM by Mike_Watt

    Strange I.E. CSS issue

    Mike_Watt Level 2

      Hello there community!


      I'm having one of those moments and I need a fresh pair of eyes!  Just a few minutes ago, the footer on a site I'm working on stopped using the CSS, but only in I.E. - it still looks fine in Chrome/Safari (I don't have FF at work to check.)  The footer is being pulled in via a server-side include.


      The page is at http://www.melsbgc.com/index.php.


      The footer code that's being included is at http://www.melsbgc.com/footer.html


      As you can see, it looks fine in Safari, and appears to be completely ignoring the CSS in IE - and this just started happening... Any clues as to why?

      Also, since file upload is disabled right now on the forum, I've created a .txt file with the PHP for index.php in it...   here: http://www.melsbgc.com/docs/index.txt

      Your fresh eyes and perspective are appreciated!


        • 1. Re: Strange I.E. CSS issue
          Ken Binney-GnPIX3 Level 4

          Just guessin' here Mike, but I notice  some empty spacing in your inline style tags in the include file


          <TD BGCOLOR="#000" WIDTH="100%" STYLE="height:69px" VALIGN="top">
                                      <DIV ALIGN="CENTER" CLASS="c_text" STYLE="margin-top:17px;  "><A HREF="index.php" CLASS="c_text">Home</A>    |    <A HREF="events.php" CLASS="c_text">Events</A>    |    <A HREF="photos.php" CLASS="c_text">Photos</A>    |    <A HREF="index-3.html" CLASS="c_text">Charities </A>   |    <A HREF="contact.php" CLASS="c_text">Contact</A>    |    <A HREF="about.php" CLASS="c_text">About Us</A></DIV>


                                      <DIV CLASS="c2_text" STYLE="margin-top:13px;  "><SPAN CLASS="c1_text" >MelsBGC.com &copy; 2010</SPAN>    |    <A HREF="privacy.php" CLASS="c_text">Privacy Policy</A>    |    <A HREF="501c3.php" CLASS="c_text"> 501(c)(3) info</A></DIV>


                                    <DIV CLASS="c2_text" STYLE="margin-top:13px;  "><SPAN CLASS="c1_text" >Site developed by <a href="http://www.wattproductionsinteractive.com" CLASS="c_text" TARGET="_blank">Watt Productions Interactive</a></DIV>

          • 2. Re: Strange I.E. CSS issue
            Zabeth69 Level 5

            I'm looking at your page in FireFox, and I'm not even seeing your center content table.


            My wild guess is that your elaborate use of tables and rowspans is confusing the browsers, and your tables are simply not rendering. A simpler explanation may be that you have a comment closing tag that is just hiding the whole thing; I didn't look for that...


            Instead of using stretched images for borders, use actual borders; you may find that your structure improves. For the time being, if you eliminate those rowspans, you might be able to make it work.


            Anytime a layout is confusing enough to confuse not only the creator AND the browser, it might be time to use a simpler way to achieve your look.


            Regarding Ken's suggestion, I don't think the spaces are the cause of the difficulty. In this kind of code, the spaces are there for the humans, not for the computer (in my understanding...).



            • 3. Re: Strange I.E. CSS issue
              Mike_Watt Level 2

              I don't disagree that something is confusing the browsers, but I just don't understand why.  A rowspan is a rowspan.  To be honest, I'm not confused at all - except for by the fact that that it's not working across the board - when I look at that code it makes perfect sense to me.  And clearly Safari/Chrome agree since they're doing it right.

              That's what frustrates me - I build a page from scratch (so I know every line of code that's in there.)  I validate the page and get no errors back of any kind... then two of the biggest browsers just screw it all up.

              Thanks for your help, though... that FF issue is a whole new set of problems... clearly I need to go back.

              Thanks again.

              • 4. Re: Strange I.E. CSS issue


                I'm having a similar problem to Mikes at the moment. Again it works fine on all browsers on Mac and PC except for IE on PC. Here's the page which was created on a Mac using DW.


                I would really appreciate any assistance with this


                Thanks in advance



                • 5. Re: Strange I.E. CSS issue
                  Zabeth69 Level 5

                  You may not be confused, but I found the code a challenge to follow.


                  I still think that some of your strategies could be simplified, but I know what you mean about knowing one's own code so thoroughly!


                  Glad to be able to lend some fresh eyes to the situation.



                  • 6. Re: Strange I.E. CSS issue
                    Zabeth69 Level 5

                    It would be helpful if you started a new thread and gave it a more descriptive title.


                    "Strange I.E. CSS issue" surely does not tell all of the story for your page not working on IE, Eoinie!


                    What specifically is it that you see on IE/PC that is incorrect?



                    • 7. Re: Strange I.E. CSS issue
                      Ken Binney-GnPIX3 Level 4

                      You have a table tag in the head section of your page


                      <table width="600" border="0" align="center">

                      1 person found this helpful
                      • 8. Re: Strange I.E. CSS issue
                        Mike_Watt Level 2



                        Message was deleted by: Mike_Watt

                        • 9. Re: Strange I.E. CSS issue
                          Mike_Watt Level 2

                          The content table not appearing is a whole other issue, and I'm dealing with that now... But the footer CSS is still persistent.  I've completely removed all the code for that middle table, and IE still does not render the footer with the proper CSS, and FF still refuses to display anything below the nav bar.


                          Here is the code as of this second... I must be missing some tag somewhere or something, but I can't find it, and the validator doesn't find it either.   Does anyone see anything here that would cause FF to not display anything below the comment <!-- CLOSE HEADER/LEADER/NAV TABLE--> and what is causing IE to display the footer without the CSS?



                          Message was edited by: Mike_Watt (removed code and used link to txt file instead.

                          • 10. Re: Strange I.E. CSS issue
                            Mike_Watt Level 2

                            Sorry for the multiple posts, people:


                            I found that when looking that the source in FF, everything from the comment

                            <!-- CLOSE HEADER/LEADER/NAV TABLE --->
                            Down to the comment

                            <!-- CLOSE MAIN CONSTRAINING TABLE --->

                            is green, which means that FF is treating it all as a comment.  So, the only thing I could think was that
                            the three "---" at the end was throwing it off, so I changed it to two "--" and now FF displays the content.

                            One problem down.
                            Now, the CSS. I'm getting a little desperate.