Web Analytics Made Easy -
StatCounter Help Please- Site looks great in FF but bugs in IE and Netscape - CodingForum

Announcement

Collapse
No announcement yet.

Help Please- Site looks great in FF but bugs in IE and Netscape

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help Please- Site looks great in FF but bugs in IE and Netscape

    Hello everyone!

    I'm extremely new to html and css. I've made a template for my site running off of Mambo Open Source.

    I've gotten it to look perfect in Firefox but IE and Netscape are looking buggy. It has a fixed background

    My site is www.girlsgamingguide.com

    Here is how it looks in the respective browsers:







    Here is the PHP file:

    Code:
    <?php
    /**
    * GirlsJeans - A Mambo 4.5.2 template
    * @version 1.0
    * @package GirlsJeans
    * @copyright (C) 2005 by Lindsey Smith
    */
    defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
    $iso = split( '=', _ISO );
    echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <?php if ( $my->id ) initEditor(); ?>
        <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
        <?php mosShowHead(); ?>
        <link rel="stylesheet" type="text/css" href="http://www.girlsgamingguide.com/templates/girlsjeans/css/template_css.css" />
      </head>
      
    	<body style="background: black url(http://www.girlsgamingguide.com/templates/girlsjeans/images/bg.jpg) no-repeat fixed" bgcolor=#000000 text=#cccccc link=#cccccc vlink=#999999 leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
    		<table id="Table_01" width="1024" border="0" cellspacing="0" cellpadding="0" height="1180">
    			<tr>
    				<td background="/templates/girlsjeans/images/Jeans_01.gif"></td>
    				<td colspan="7" background="/templates/girlsjeans/images/Jeans_02.jpg">
    <?php mosLoadModules( 'user5' ); ?></td>
    			</tr>
    			<tr valign="bottom">
    				<td background="/templates/girlsjeans/images/Jeans.data_/images/Jeans_03.gif"></td>
    				<td background="/templates/girlsjeans/images/Jeans_04.jpg"></td>
    				<td colspan="4" background="/templates/girlsjeans/images/Jeans_05.jpg"><?php mosLoadModules( 'top' ); ?></td>
    				<td background="/templates/girlsjeans/images/Jeans_06.jpg"><?php mosLoadModules( 'left' ); ?></td>
    				<td background="/templates/girlsjeans/images/Jeans_07.gif"></td>
    			</tr>
    			<tr>
    				<td background="/templates/girlsjeans/images/Jeans_08.gif"></td>
    				<td colspan="6"><img src="/templates/girlsjeans/images/Jeans_09.jpg" alt="" height="87" width="638" border="0"/></td>
    				<td background="/templates/girlsjeans/images/Jeans_10.gif"></td>
    			</tr>
    			<tr align="center" valign="middle">
    				<td background="/templates/girlsjeans/images/Jeans_11.gif"></td>
    				<td colspan="6" background="/templates/girlsjeans/images/Jeans_12.jpg"><object width="600" height="400">
    <param name="movie" value="currentissue.swf">
    <embed src="http://www.girlsgamingguide.com/images/stories/currentissue.swf" width="600" height="400">
    </embed>
    </object></td>
    				<td background="/templates/girlsjeans/images/Jeans_13.gif"></td>
    			</tr>
    			<tr>
    				<td background="/templates/girlsjeans/images/Jeans_14.gif"></td>
    				<td colspan="6"><img src="/templates/girlsjeans/images/Jeans_15.jpg" alt="" height="83" width="638" border="0"/></td>
    				<td background="/templates/girlsjeans/images/Jeans_16.gif"></td>
    			</tr>
    			<tr>
    				<td background="/templates/girlsjeans/images/Jeans_17.gif"></td>
    				<td colspan="6" background="/templates/girlsjeans/images/Jeans_18.jpg"><?php mosMainBody(); ?></td>
    				<td background="/templates/girlsjeans/images/Jeans_19.gif"></td>
    			</tr>
    			<tr align="center" valign="top">
    				<td background="/templates/girlsjeans/images/Jeans_20.gif"></td>
    				<td colspan="2" background="/templates/girlsjeans/images/Jeans_21.jpg"><?php mosLoadModules( 'user1' ); ?></td>
    				<td background="/templates/girlsjeans/images/Jeans_22.jpg"><?php mosLoadModules( 'user2' ); ?></td>
    				<td background="/templates/girlsjeans/images/Jeans_23.jpg"><?php mosLoadModules( 'user3' ); ?></td>
    				<td colspan="2" background="/templates/girlsjeans/images/Jeans_24.jpg"><?php mosLoadModules( 'user4' ); ?></td>
    				<td background="/templates/girlsjeans/images/Jeans_25.gif"></td>
    			</tr>
    			<tr>
    				<td background="/templates/girlsjeans/images/Jeans_26.gif"></td>
    				<td colspan="2" background="/templates/girlsjeans/images/Jeans_27.jpg"></td>
    				<td colspan="2" background="/templates/girlsjeans/images/Jeans_28.jpg"><?php mosLoadModules( 'bottom' ); ?></td>
    				<td colspan="2" background="/templates/girlsjeans/images/Jeans_29.jpg"></td>
    				<td background="/templates/girlsjeans/images/Jeans_30.gif"></td>
    			</tr>
    			<tr>
    				<td background="/templates/girlsjeans/images/Jeans_31.gif"></td>
    				<td colspan="3"><img src="/templates/girlsjeans/images/Jeans_32.jpg" alt="" height="34" width="318" border="0"/></td>
    				<td colspan="3"><img src="/templates/girlsjeans/images/Jeans_33.jpg" alt="" height="34" width="320" border="0"/></td>
    				<td background="/templates/girlsjeans/images/Jeans_34.gif"></td>
    			</tr>
    			<tr>
    				<td background="/templates/girlsjeans/images/Jeans_35.gif"></td>
    				<td colspan="6" background="/templates/girlsjeans/images/Jeans_36.gif"></td>
    				<td background="/templates/girlsjeans/images/Jeans_37.gif"></td>
    			</tr>
    			<tr>
    				<td><img src="/templates/girlsjeans/images/spacer.gif" alt="" height="1" width="329" border="0"></td>
    				<td><img src="/templates/girlsjeans/images/spacer.gif" alt="" height="1" width="18" border="0"></td>
    				<td><img src="/templates/girlsjeans/images/spacer.gif" alt="" height="1" width="140" border="0"></td>
    				<td><img src="/templates/girlsjeans/images/spacer.gif" alt="" height="1" width="160" border="0"></td>
    				<td><img src="/templates/girlsjeans/images/spacer.gif" alt="" height="1" width="160" border="0"></td>
    				<td><img src="/templates/girlsjeans/images/spacer.gif" alt="" height="1" width="17" border="0"></td>
    				<td><img src="/templates/girlsjeans/images/spacer.gif" alt="" height="1" width="143" border="0"></td>
    				<td><img src="/templates/girlsjeans/images/spacer.gif" alt="" height="1" width="57" border="0"></td>
    			</tr>
    		</table>
    	</body>
    
    </html>
    and the CSS File:

    Code:
    /* CSS Document */
    
    body   { color: #666; font-size: 12px; font-family: Georgia, "Times New Roman", serif }
    
    #active_menu {
    	color:#2F3A18;
    	font-weight: bold;
    }
    
    a#active_menu:hover {
    	color: #363D1B;
    }
    
    .maintitle {
    	color: #ffffff;
    	font-size: 40px;
    	padding-left: 15px;
    	padding-top: 20px;
    }
    
    .error {
      font-style: italic;
      text-transform: uppercase;
      padding: 5px;
      color: #92C86A;
      font-size: 14px;
      font-weight: bold;
    }
    .back_button  { font-size: 11px; font-weight: bold; line-height: 20px; text-align: center; margin: 1px; padding: 0 10px; width: auto; float: left; border: solid 1px #609 }
    
    /* mambo core stuff */
    a:link, a:visited    { color: #609; font-size: 10px; font-weight: bold; text-decoration: none }
    
    a:hover   { color: #f90; font-weight: bold; text-decoration: none }
    
    
    .button   { color: #609; font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 16px; background-color: #fff; text-align: center; cursor: pointer; margin: 1px; padding: 0 5px; width: auto; height: 24px; border: solid 1px #f90 }
    
    .inputbox    { background-color: #ffffff; padding: 2px; border: solid 1px #f90 }
    
    .contentheading   { color: #609; font-size: 16px; font-weight: bold; white-space: nowrap; height: 20px }
    
    .contentpagetitle   { color: #609; font-size: 13px; font-weight: bold; text-align: left }
    
    table.moduletable th    { color: #609; font-size: 12px; font-weight: bold; text-align: center; text-transform: uppercase }
    
    table.moduletable td     { color: #333; font-weight: normal }
    
    .sectiontableheader {
      font-weight: bold;
      background: #f0f0f0;
      padding: 4px;
    }
    
    .sectiontablefooter {
    
    }
    
    .sectiontableentry1 {
    	background-color : #ffffff;
    }
    
    .sectiontableentry2  { background-color: #ccf }
    
    .small    { color: #666; font-size: 10px; font-weight: bold; text-indent: 18px }
    
    .createdate {
    	height: 15px;
    	padding-bottom: 10px;
    	color: #999999;
    	font-size: 9px;
    	font-weight: bold;
    }
    
    .modifydate {
    	height: 15px;
    	padding-top: 10px;
    	color: #999999;
    	font-size: 9px;
    	font-weight: bold;
    }
    
    table.contenttoc {
      border: 1px solid #92C86A;
      padding: 2px;
      margin-left: 2px;
      margin-bottom: 2px;
    }
    
    table.contenttoc td {
      padding: 2px;
    }
    
    table.contenttoc th {
      background: url(../images/subhead_bg.png) repeat-x;
      color: #666666;
    	text-align: left;
    	padding-top: 2px;
    	padding-left: 4px;
    	height: 21px;
    	font-weight: bold;
    	font-size: 10px;
    	text-transform: uppercase;
    }
    
    a.mainlevel:link, a.mainlevel:visited   { color: #609; font-size: 14px; font-weight: bold; text-decoration: none; text-align: left; display: block; padding-top: 8px; padding-left: 18px; vertical-align: text-bottom }
    
    a.mainlevel:hover  { color: #f90; font-weight: bold; background-position: 0px -25px;
    	text-decoration: none }
    
    a.sublevel:link, a.sublevel:visited  { color: #306; font-size: 11px; font-weight: bold; text-align: left; padding-left: 1px; vertical-align: middle }
    
    a.sublevel:hover  { color: #f60; text-decoration: none }
    .highlight  { color: #fff; background-color: #f90; padding: 0 }
    .code {
    	background-color: #ddd;
    	border: 1px solid #bbb;
    }
    
    form  { margin: 8px 5px 8px 18px; padding: 0 }
    If someone could help me with this problem or suggest a better route to coding this website then I would appreciate it. (btw- I don't quite understand the principles behind straight css tableless styling so be gentle)

  • #2
    Your site looks okay in NS7.2 the amount of users using NS6 is like maybe less than 2%. www.w3schools.com keeps track of these things and they don't even keep track of NS6 anymore. NS6 may be dying out but it might be too new to rule out yet. I don't have NS6 but it looks like it renders like IE does so fixing some IE problems might fix NS6 as well. http://www.w3schools.com/browsers/browsers_stats.asp Now on to IE. Well this very top line.
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    throws IE into quirks mode get rid of it and see if that improves your page any.
    Last edited by _Aerospace_Eng_; Aug 1, 2005, 12:15 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Oh I didn't even realize my Netscape was outdated (shows how much I use it)

      I took out that line but it didn't help . . . any other thoughts?

      Comment


      • #4
        Well it doesn't help that you have about 389 errors/warnings. See them here. Many of them are errors that come from malformed urls generated by Mambo but some are errors in the actual XHTML.
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          I saw that when I went to validate . .. I didn't quite understand them and assumed they were from teh generated content. I'll go through and see if I can't do some cleaning up

          will keep you updated . . . thanks again

          Comment


          • #6
            Well with the exception of teh first 5 errors left (not sure why they are still coming up errors) the rest seem to be generated from Mambo . .

            *humbly* any other ideas?

            Comment


            • #7
              XHTML should be all in lowercase letters. background="blah.jpg" is not valid. Use style="background-image:url(blah.jpg)" instead or give ids to those cells and add the info in your CSS. Use the flash satay method of putting flash on your page. All elements must have some type of closing for example the image tag
              Code:
              <img src="blah.jpg">
              in XHTML should be
              Code:
              <img src="blah.jpg" alt="" />
              Same goes with br tags.
              Code:
              <br />
              ||||If you are getting paid to do a job, don't ask for help on it!||||

              Comment


              • #8
                Thanks for all your help!

                I've been working on tweaking the css and some of the background images in the tables. It appears IE doesn't like the cell padding so I'm messing with the removal of those. Right now it looks near perfect and I have to somehow shift one of the images with either the removal of padding or the addition of padding elsewhere. I also know it's having a fit with the margins

                Can't wait until IE catches up with FF

                Again many thanks for your suggestions . . . hopefully as I get better at understanding all of this I will be able to make fully compliant sites without so many problems

                Comment

                Working...
                X