Layout Issues between IE and FF

Ravyn · syyskuu 09, 2006, 12:56:32 AP

So I've got all my wonderful little buttons working, yay. Now I turned my attention to the layout of my mainpage. Including ssi_boardNews(); and a login/logout table etc. I create the layout just how I want it, load it up, and boom, looks beautiful. Just what I was hoping for.

This is what it is supposed to look like, this is also how it DOES look when using Firefox.

I always use firefox, and never really though anything of it. Then I remembered that IE is tempermental, and realizing that the majority of the visitors to my site are going to be using IE, I should make sure it looks all pretty like through that browser as well. I didn't think I had used any crazy coding to get my desired layout. It appears I was sorely mistaken. I load up the page in IE, and this is what I see..

There are many critical problems as you can clearly see.

-- At the top of the page, the alignment for the ssi_News(); and ssi_quickSearch(); function has gone wacky.

-- Just below that, there is a mysterious appearance of a line within my table that is displaying the background attributed to "titlebg2" where the ssi_boardNews(); is called.

--And lastly, the ssi_boardNews(); table format has somehow managed to overlap every recurring News post underneath my second cell of the first row, true magic is at work here.

So, I was hoping someone might be able to take a peek and figure out what could possibly cause such a drastic difference between the 2 browsers when I'm using, what I thought, was elementary php/html code?

The code for the page is as follows:

Koodi [Valitse]


<?php
  require("/home/virtual/site45/fst/var/www/html/forums/SSI.php");

	echo '
		<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/style.css" />
		<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js"></script>
		<style type="text/css">
			body
			{
				margin: 1ex;
			}';

	if ($context['browser']['needs_size_fix'])
		echo '
			@import(', $settings['default_theme_url'], '/fonts-compat.css);';

	echo '
		</style>';

  echo '
    <html>
    <body>
    <table width="95%" cellpadding=0 cellspacing=0 align=center>
    <tr align=center>
    <td align=center>
    <img src="/images/logo.gif">
    </td>
    </tr>
    </table>
    	<div class="tborder">
    		<table width="100%" cellpadding="0" cellspacing="0" border="0">
    			<tr>
    				<td class="titlebg2" height="32"> ';
              ssi_news();
            echo '
				    </td>
            <td class="titlebg2" height="32" align="right"> ';
              ssi_quickSearch();
            echo '
            </td>
			   </tr>
		    </table>
    </div>
  ';
  ssi_menubar();
  echo '
    <table width="100%" border="0" align="left">
      <tr>
        <td width="80%" valign="top"> ';
          $array = ssi_boardNews(1.0, 5, null, 250, 'array');
          foreach ($array as $news)
	         {
        		echo '
              <table border="0" width="100%" align="left" class="tborder">
        				<tr class="titlebg2">
        					<td><b>', $news['subject'], '</b></td>
        				</tr>
        				<tr>
        					<td>', $news['body'], '<br /><br /></td>
        				</tr>
        				<tr class="titlebg2">
        					<td>', $news['link'], ' | ', $news['new_comment'], '</td><br>
        				</tr>
        			</table>
        			<br>
            ';
      	   }  
          echo '
        </td>
        <td valign="top">
          <br>
          <table border="0" width="100%" align="left" class="tborder">
        	  <tr class="titlebg2" height="16">
        		  <td></td>
     			  </tr>
     			  <tr>
     				  <td> ';
                if ($context['user']['is_guest'])
                {					
                  ssi_login('http://www.mysite.com/index.php');
                }
                else
                {
                  ssi_welcome();
                }
              echo '
              </td>
       		  </tr>
        	  <tr class="titlebg2" height="16">
      			  <td></td>
     			  </tr>
     			</table>
        </td>
      </tr>
    </table>
  </body>
  </html>
  ';
?>

Thanks for your time,
Andrew

JayBachatero · syyskuu 09, 2006, 12:57:47 AP

Split the post since it's not related to the other topic any more.

Ravyn · syyskuu 09, 2006, 12:58:49 AP

Sorry Jay, my bad.

Thanks.

Ravyn · syyskuu 09, 2006, 07:16:58 IP

Anyone see any errors that might cause something that horrible with IE? What I wouldn't give for FF to become mainstream amongst non-computer savvy people.

Ravyn · syyskuu 10, 2006, 07:02:38 IP

Jay, or another admin, could you please move this thread to the Scripting Help / HTML & CSS Board? I think it may be better suited there. I created a thread in that board, but I believe it was deleted because of this one.

Thanks for your time.

JayBachatero · syyskuu 11, 2006, 12:47:27 IP

Ravyn did you check to see if your page validated?

Ravyn · syyskuu 12, 2006, 12:24:57 AP

Hey Jay,

Went to test for validation and got the following problems:

Koodi [Valitse]


 Below are the results of checking this document for XML well-formedness and validity.

   1. Error Line 23 column 32: required attribute "alt" not specified.

    <img src="/images/logo.gif" >

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

      ✉
   2. Error Line 23 column 33: end tag for "img" omitted, but OMITTAG NO was specified.

    <img src="/images/logo.gif" >

      You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

      ✉
   3. Info Line 23 column 4: start tag was here.

    <img src="/images/logo.gif" >

   4. Error Line 96 column 207: document type does not allow element "br" here; missing one of "th", "td" start-tag.

...;topic=3.0">Write Comment</a></td><br>

      The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

      One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

      ✉
   5. Error Line 96 column 208: end tag for "br" omitted, but OMITTAG NO was specified.

...topic=3.0">Write Comment</a></td><br>

      ✉
   6. Info Line 96 column 204: start tag was here.

...ost;topic=3.0">Write Comment</a></td><br>

   7. Error Line 100 column 15: end tag for "br" omitted, but OMITTAG NO was specified.

        			<br>

      ✉
   8. Info Line 100 column 11: start tag was here.

        			<br>

   9. Error Line 111 column 207: document type does not allow element "br" here; missing one of "th", "td" start-tag.

...;topic=2.0">Write Comment</a></td><br>

      ✉
  10. Error Line 111 column 208: end tag for "br" omitted, but OMITTAG NO was specified.

...topic=2.0">Write Comment</a></td><br>

      ✉
  11. Info Line 111 column 204: start tag was here.

...ost;topic=2.0">Write Comment</a></td><br>

  12. Error Line 115 column 15: end tag for "br" omitted, but OMITTAG NO was specified.

        			<br>

      ✉
  13. Info Line 115 column 11: start tag was here.

        			<br>

  14. Error Line 126 column 207: document type does not allow element "br" here; missing one of "th", "td" start-tag.

...;topic=1.0">Write Comment</a></td><br>

      ✉
  15. Error Line 126 column 208: end tag for "br" omitted, but OMITTAG NO was specified.

...topic=1.0">Write Comment</a></td><br>

      ✉
  16. Info Line 126 column 204: start tag was here.

...ost;topic=1.0">Write Comment</a></td><br>

  17. Error Line 129 column 15: end tag for "br" omitted, but OMITTAG NO was specified.

        			<br>

      ✉
  18. Info Line 129 column 11: start tag was here.

        			<br>

  19. Error Line 134 column 14: end tag for "br" omitted, but OMITTAG NO was specified.

          <br>

      ✉
  20. Info Line 134 column 10: start tag was here.

          <br>

  21. Error Line 136 column 39: there is no attribute "height".

        	  <tr class="titlebg2" height="16">

      You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

      This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

      How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

JayBachatero · syyskuu 12, 2006, 08:12:53 AP

Try fixing those errors.

Ravyn · syyskuu 12, 2006, 03:43:10 IP

Ok, my page is Valid XHTML1.0 and Valid CSS according to the W3 validator.

Still displays the same in IE however.

JayBachatero · syyskuu 12, 2006, 03:54:13 IP

Post a link to your forum.

Ravyn · syyskuu 12, 2006, 07:22:25 IP

www.theadamsreunion.com/index.php is the main page where the error occurs, forums located at www.theadamsreunion.com/forums

JayBachatero · syyskuu 12, 2006, 11:28:13 IP

Add echo '<br />'; after ssi_menubar();

Ravyn · syyskuu 12, 2006, 11:49:28 IP

Lainaus käyttäjältä: Jay The Code Monkey - syyskuu 12, 2006, 11:28:13 IP
Add echo '<br />'; after ssi_menubar();

Done, that fixes the one problem of the colored bar appearing just below the menubar. But the layout of the tables for the ssi_BoardNews(); function is still showing up underneath eachother.

Ravyn · syyskuu 16, 2006, 11:06:03 IP

Bump. Still having the problem with the ssi_BoardNews layout overlapping itself.

Edit: Finally got it working, instead of nesting <table>'s I used <div>'s to parse the ssi_BoardNews(); output into the format I want and it seems to work find cross browser.

Thanks to anyone who helped. I am still having the problem with the ssi_News(); and the quicksearch text field not aligning properly if anyone has any ideas.

Simple Machines Community Forum

Uutiset:

Layout Issues between IE and FF

Ravyn

JayBachatero

Ravyn

Ravyn

Ravyn

JayBachatero

Ravyn

JayBachatero

Ravyn

JayBachatero

Ravyn

JayBachatero

Ravyn

Ravyn