IE Gap Problem

[TheServant]

Hey guys,
I have been teaching myself web design and using a lot of php. I have been going great, slowly but surely, however I have a problem. If you open up my home page: (http://supremewarfare. com/main/home.php) in firefox/Opera, everything is good. However if you open it up in IE6 or 7 (haven't tried 5 but I presume it's the same), there is a serious gap in my table and I am not sure how to fix it? Have a look at the source code and let me know if you see my mistake!

This is my CSS:

@charset "utf-8";
/* CSS Document */
 
p.error {color:#FF0000; font-weight:bold}
 
td.title {
    color:#990000;
    font-style:italic; font-weight:bold
}
td.text {color:#CC0000; }
 
table.main {background-color:#000000; width:100%; }
 
td.TL_1 { background-image:url(Table/Table_TL.jpg); width:50; height:50; background-repeat:no-repeat }
td.TR_1 { background-image:url(Table/Table_TR.jpg); width:50; height:50; background-repeat:no-repeat }
td.BL_1 { background-image:url(Table/Table_BL.jpg); width:50; height:50; background-repeat:no-repeat }
td.BR_1 { background-image:url(Table/Table_BR.jpg); width:50; height:50; background-repeat:no-repeat }
td.T_1 { background-image:url(Table/Table_T.jpg); width:auto; height:50; background-repeat:repeat-x }
td.L_1 { background-image:url(Table/Table_L.jpg); width:50; height:auto; background-repeat:repeat-y }
td.B_1 { background-image:url(Table/Table_B.jpg); width:auto; height:50; background-repeat:repeat-x }
td.R_1 { background-image:url(Table/Table_R.jpg); width:50; height:auto; background-repeat:repeat-y }
td.BG_1 { background-image:url(Table/Table_BG.jpg); width:auto; height:auto; background-repeat:repeat }
 
td.TL_2 { background-image:url(Table_2/Table_TL.gif); width:20; height:20; background-repeat:no-repeat }
td.TR_2 { background-image:url(Table_2/Table_TR.gif); width:20; height:20; background-repeat:no-repeat }
td.BL_2 { background-image:url(Table_2/Table_BL.gif); width:20; height:20; background-repeat:no-repeat }
td.BR_2 { background-image:url(Table_2/Table_BR.gif); width:20; height:20; background-repeat:no-repeat }
td.T_2 { background-image:url(Table_2/Table_T.gif); width:auto; height:20; background-repeat:repeat-x }
td.L_2 { background-image:url(Table_2/Table_L.gif); width:20; height:auto; background-repeat:repeat-y }
td.B_2 { background-image:url(Table_2/Table_B.gif); width:auto; height:20; background-repeat:repeat-x }
td.R_2 { background-image:url(Table_2/Table_R.gif); width:20; height:auto; background-repeat:repeat-y }
 
td.creator { color:#FF0000; font-style:italic; text-align:right; }

The Servant

[drhowarddrfine]

IE6 or 7 (haven't tried 5 but I presume it's the same)

Anyone still using IE5 doesn't expect to view pages properly and doesn't deserve to.

You will never get any version of IE to pretend to act like a modern browser without a proper doctype. See the article about doctypes under Howtos at the top of this page in the html/css section.

[TheServant]

Cheers, although, when I put the DTD at the top of the page, I get this:

Warning: session_start() [function.sessio n-start]: Cannot send session cache limiter - headers already sent (output started at /home/supre8/public_html/main/session_control .php:4) in /home/supre8/public_html/main/session_control .php on line 7

Also, now my page looks much worse?!

[Death Slaught]

Run it through these validators:

HTML/XHTML

CSS

If your problems still persist once you fix any you have just post back with your HTML and CSS, or a link to a test site if you have one.

^_^ Hope it helps, Thanks, Death

[drhowarddrfine]

Cheers, although, when I put the DTD at the top of the page, I get this:

Warning: session_start() [function.sessio n-start]: Cannot send session cache limiter - headers already sent (output started at /home/supre8/public_html/main/session_control .php:4) in /home/supre8/public_html/main/session_control .php on line 7

Has nothing t do with adding the doctype.

Also, now my page looks much worse?!

The doctype is the set of rules you are telling the browser you are using. You didn't specify any before so it reverted to 1996 rules. Now the rules changed to modern rules and that's why your page changed. Fix the validation errors first.

[TheServant]

The source is too big to post, but the validator gives me heaps of errors which I don't think are right? It is telling me, basically that all the html statements are wrong: eg.

Line 6, Column 5: document type does not allow element "br" here.

Line 7, Column 2: document type does not allow element "b" here.

Also, once I use a DTD, I my sessions are stuffed? Have a look at the site to firstly see the mess ups happening with gaps now that I am using a DTD and also you can see the source there.

Thanks for your help.

[Death Slaught]

What I see right off is that you have code outside of your 'html' tag, which isn't allowed. (i'll add more as I see it).

Another thing you can't put external stylesheets outside of the 'head' tags. The same things with external scripts. Furtheremore, you're using alot of invalid styles. Copy and paste this, you only have 39 errors left (I left some so you can get an idea of what you are doing wrong).

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Suprem e Warfare - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../main/themes/burnt_paper/burnt_paper.css " rel="stylesheet " type="text/css" />
<script type="text/javascript" src="../main/scripts/menu_scripts/JSCookMenu.js"> </script>
<link rel="stylesheet " href="../main/scripts/menu_scripts/themered.css" type="text/css" />
<script type="text/javascript" src="../main/scripts/menu_scripts/theme.js"></script>
<link href="../age_0/themes/supwar.css" rel="stylesheet " type="text/css" />
<link href="../age_0/themes/supwar.css" rel="stylesheet " type="text/css" />
<script type="text/javascript" src="http://pagead2.googles yndication.com/pagead/show_ads.js">
</script>
</head>
<body bgcolor="#00000 0" >
<br />
<b>Warning</b>: session_start() [<a href='function. session-start'>function .session-start</a>]: Cannot send session cookie - headers already sent by (output started at /home/supre8/public_html/main/session_control .php:4) in <b>/home/supre8/public_html/main/session_control .php</b> on line <b>7</b><br />
<br />
<b>Warning</b>: session_start() [<a href='function. session-start'>function .session-start</a>]: Cannot send session cache limiter - headers already sent (output started at /home/supre8/public_html/main/session_control .php:4) in <b>/home/supre8/public_html/main/session_control .php</b> on line <b>7</b><br />

<p class="error">S ession: 82d0c7588b67e05 558a2723fcb1d1a 6f view number: 1.</p>
<p class="error">N ame: .</p>
<table style="width:10 0%; border:2px solid #660000;" cellpadding="0" cellspacing="0" >
<tr>
<td><a href="../main/home.php"><img src="../main/pics/Banner.gif" alt="Banner" name="Banner" style="height:1 99px;" border="0"></a></td>
</tr>
</table>


<!-- /////////////////////////////////////////////////////////////////////////////////
//////// Menu Code //////
///////////////////////////////////////////////////////////////////////////////////-->
<div id="myMenuID">
<script type="text/javascript"><!--
var myMenu =
[
[null,'Home','../main/home.php','_sel f','Goto Home'],
[null,'Forums',' ../forums/index.php','_bl ank','Goto Forums'],
[null,'About Us','../main/about.php','_se lf','Goto About Us'],
[null,'Contact Us','../main/contact.php','_ self','Goto Contact Us'],
[null,'Links','. ./main/links.php','_se lf','Goto Links',
[null,'War of Empires','http://www.warofempire s.com/','_blank','Got o War of Empires'],
[null,'Lunar Pages Hosting','http://www.lunarpages. com/id/TheGodfather',' _blank','Goto LunarPages'],
[null,'AW Surveys','http://www.AWSurveys.c om/HomeMain.cfm?Re fID=TheServant' ,'_blank','Goto Surveys']
],
[null,'Flash Games','../main/games.php','_se lf','Goto Games'],
[null,'Supreme Warfare','','', '',
[null,'Command', '../age_0/command.php','_ self','Goto Command'],
[null,'Attack',' ../age_0/attack.php','_s elf','Goto Attack'],
[null,'Attack Log','../age_0/attacklog.php', '_self','Goto Attack Log'],
[null,'Heroes',' ../age_0/hero.php','_sel f','Goto Hero'],
[null,'Army','../age_0/army.php','_sel f','Goto Army'],
[null,'Alliance' ,'../age_0/alliance.php',' _self','Goto Alliance'],
[null,'Citizens' ,'../age_0/citizens.php',' _self','Goto Citizens'],
[null,'Register' ,'../main/register.php',' _self','Goto Register'],
[null,'Logout',' ../main/log_out.php','_ self','Goto Logout'],
],
];
--></script>
</div><br /><br />

<script type="text/javascript"><!--
cmDraw ('myMenuID', myMenu, 'hbr', cmTheme);
--></script>
<!-- /////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////-->

<table style="width:10 0%; background-color:#000;" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td style="width:20 0px;" rowspan="5" valign="top">
<table class="side_bar _main" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="side_bar _T">&nbsp;</td>
</tr>
<tr>
<td class="side_bar _BG">
<center>
<div id="form">
<b align="center"> Username:</b><br />
<input name="user_name " type="text" style="width:15 0px;" /><br />
<b align="center"> Password:</b><br />
<input name="user_pass word" type="password" style="width:15 0px;" /><br /><br />
<input type="image" src="../age_0/pics/side_bar_login. gif" alt="Login" />
</div>
<a href="../age_0/forgot_password .php" target="_self"> <b>Forgot Password</b></a><br />
<a href="../main/register.php" target="_self"> <b>Register</b></a> </center>
</td>
</tr>
<tr>
<td class="side_bar _B">&nbsp;</td>
</tr>
</table></td>
<td>&nbsp;</td>
<td style="height:6 0px;" valign="top">
</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="TL_1">&n bsp;</td>
<td class="T_1">&nb sp;</td>
<td class="TR_1">&n bsp;</td>
<td style="width:14 0px;" rowspan="5" align="center" valign="top">
<script type="text/javascript"><!--
google_ad_clien t = "pub-862525100401654 2";
//skyscraperadd
google_ad_slot = "5420140263 ";
google_ad_width = 120;
google_ad_heigh t = 600;
//--></script>
</td>
</tr>
<tr>
<td class="L_1">&nb sp;</td>
<td class="BG_1" valign="top"> <!-- Logged in check for login display -->
<table style="width:10 0%; background-color:#000;" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="TL_2">&n bsp;</td>
<td class="T_2">&nb sp;</td>
<td class="TR_2">&n bsp;</td>
</tr>
<tr>
<td class="L_2">&nb sp;</td>
<td class="title">L ogin Test</td>
<td class="R_2">&nb sp;</td>
</tr>
<tr>
<td class="L_2">&nb sp;</td>
<td class="text"></td>
<td class="R_2">&nb sp;</td>
</tr>
<tr>
<td class="BL_2">&n bsp;</td>
<td class="B_2">&nb sp;</td>
<td class="BR_2">&n bsp;</td>
</tr>
</table>
</td>
<td class="R_1">&nb sp;</td>
</tr>
<tr>
<td class="BL_1">&n bsp;</td>
<td class="B_1">&nb sp;</td>
<td class="BR_1">&n bsp;</td>
</tr>
<tr>
<td class="creator" colspan="3">Cre ated by xxxx</p></td>
</tr>
</table>


<!-- /////////////////////////////////////////////////////////////////////////////////
//////// Adds Code //////
///////////////////////////////////////////////////////////////////////////////////-->

<table style="width:89 9px;" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td style="width:46 5px;"><!-- Begin BidVertiser code -->
<SCRIPT LANGUAGE="JavaS cript1.1" SRC="http://bdv.bidvertiser .com/BidVertiser.dbm ?pid=60848&bid= 241793" type="text/javascript"></SCRIPT>
<noscript><a href="http://www.bidvertiser .com">marketing </a>
</noscript>
<!-- End BidVertiser code --><br /><br /></td>

<td width="234"><a href="http://www.lunarpages. com/id/TheGodfather" onMouseOver="wi ndow.status='ht tp://www.lunarpages. com';return true" onMouseOut="win dow.status='';r eturn true" target="_blank" ><img src="http://www.lunarpages. com/banners/images/06_lunarpages_2 34x60.gif" alt="Lunarpages .com Web Hosting" border="0" style="border: none" /></a><br /><br /></td>

<td width="200"><fo rm action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="../main/pics/Donate.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted " value="-----BEGIN PKCS7-----MIIHVwYJKoZIhvc NAQcEoIIHSDCCB0 QCAQExggEwMIIBL AIBADCBlDCBjjEL MAkGA1UEBhMCVVM xCzAJBgNVBAgTAk NBMRYwFAYDVQQHE w1Nb3VudGFpbiBW aWV3MRQwEgYDVQQ KEwtQYXlQYWwgSW 5jLjETMBEGA1UEC xQKbGl2ZV9jZXJ0 czERMA8GA1UEAxQ IbGl2ZV9hcGkxHD AaBgkqhkiG9w0BC QEWDXJlQHBheXBh bC5jb20CAQAwDQY JKoZIhvcNAQEBBQ AEgYCiRC302+GGR EnBgNvkoqLfV0QB iZ9s736r36xSVM2 bTiMqu3JqZtBYmZ ZCs6SMqJfiLe5hv d29LyxlJL5WItI9 XbmgEFGSqXxOgmB vwg9TunBoIjpbud uDEcQt+LOhL8eoq Vw/MgFMJYoRoGluIr8 Se5Ld/EmNqusopSnFBBWf ejELMAkGBSsOAwI aBQAwgdQGCSqGSI b3DQEHATAUBggqh kiG9w0DBwQIX+i0 tN4ES4SAgbDbdZR 743tCGcdwHwSW7x mczKdKxpajr0jZn HWhX1SIlsjzjdv8/jUakTzq4NPf6Oiz 6D0GHgiBTnr7gn/GIn35Jaipxbwj02 XmnlNeeweFr46pt SlLH8wuuVuPdpo1 PO6WqShKLmz9VaO gRN8r7Z8mezYXbb l8Qsjobk9isKjO6 gqpyVlN5jDFe8k5 uUwJnlhDf82Ghkw CU8nEPwrtj2WTGK iFGRHoGjPMmvFjp 7EW96CCA4cwggOD MIIC7KADAgECAgE AMA0GCSqGSIb3DQ EBBQUAMIGOMQswC QYDVQQGEwJVUzEL MAkGA1UECBMCQ0E xFjAUBgNVBAcTDU 1vdW50YWluIFZpZ XcxFDASBgNVBAoT C1BheVBhbCBJbmM uMRMwEQYDVQQLFA psaXZlX2NlcnRzM REwDwYDVQQDFAhs aXZlX2FwaTEcMBo GCSqGSIb3DQEJAR YNcmVAcGF5cGFsL mNvbTAeFw0wNDAy MTMxMDEzMTVaFw0 zNTAyMTMxMDEzMT VaMIGOMQswCQYDV QQGEwJVUzELMAkG A1UECBMCQ0ExFjA UBgNVBAcTDU1vdW 50YWluIFZpZXcxF DASBgNVBAoTC1Bh eVBhbCBJbmMuMRM wEQYDVQQLFApsaX ZlX2NlcnRzMREwD wYDVQQDFAhsaXZl X2FwaTEcMBoGCSq GSIb3DQEJARYNcm VAcGF5cGFsLmNvb TCBnzANBgkqhkiG 9w0BAQEFAAOBjQA wgYkCgYEAwUdO3f xEzEtcnI7ZKZL41 2XvZPugoni7i7D7 prCe0AtaHTc97CY gm7NsAtJyxNLixm hLV8pyIEaiHXWAh 8fPKW+R017+EmXr r9EaquPmsVvTywA AE1PMNOKqo2kl4G xiz9zZqIajOm1fZ GWcGS0f5JQ2kBqN bvbg2/Za+GJ/qwUCAwEAAaOB7jC B6zAdBgNVHQ4EFg QUlp98u8ZvF71ZP 1LXChvsENZklGsw gbsGA1UdIwSBszC BsIAUlp98u8ZvF7 1ZP1LXChvsENZkl GuhgZSkgZEwgY4x CzAJBgNVBAYTAlV TMQswCQYDVQQIEw JDQTEWMBQGA1UEB xMNTW91bnRhaW4g VmlldzEUMBIGA1U EChMLUGF5UGFsIE luYy4xEzARBgNVB AsUCmxpdmVfY2Vy dHMxETAPBgNVBAM UCGxpdmVfYXBpMR wwGgYJKoZIhvcNA QkBFg1yZUBwYXlw YWwuY29tggEAMAw GA1UdEwQFMAMBAf 8wDQYJKoZIhvcNA QEFBQADgYEAgV86 VpqAWuXvX6Oro4q J1tYVIT5DgWpE69 2Ag422H7yRIr/9j/iKG4Thia/Oflx4TdL+IFJBAy PK9v6zZNZtBgPBy nXb048hsP16l2vi 0k5Q2JKiPDsEfBh GI+HnxLXEaUWAcV fCsQFvd2A1sxRr6 7ip5y2wwBelUecP 3AjJ+YcxggGaMII BlgIBATCBlDCBjj ELMAkGA1UEBhMCV VMxCzAJBgNVBAgT AkNBMRYwFAYDVQQ HEw1Nb3VudGFpbi BWaWV3MRQwEgYDV QQKEwtQYXlQYWwg SW5jLjETMBEGA1U ECxQKbGl2ZV9jZX J0czERMA8GA1UEA xQIbGl2ZV9hcGkx HDAaBgkqhkiG9w0 BCQEWDXJlQHBheX BhbC5jb20CAQAwC QYFKw4DAhoFAKBd MBgGCSqGSIb3DQE JAzELBgkqhkiG9w 0BBwEwHAYJKoZIh vcNAQkFMQ8XDTA3 MTIyNzA4Mjc1OFo wIwYJKoZIhvcNAQ kEMRYEFDQsWyik7 RdNLuDGmo3CLXn/Yl8JMA0GCSqGSIb 3DQEBAQUABIGAI0 ikuA6Y9gUTS+ovh EcikgYkWSPN8epO zEqO8h8e9f5CXB+ HaxTBqqC94Hg5pS nRnTJANvMOfE/qnTxz7M7pWehzWU hPxxUc/MfL5D02pTto+UHm HCIKCAYPABwrmVa D8+wHixMScALr6S Im/h2GltCegqACGjo5 5WWJ3WsWsjQ=-----END PKCS7-----
">
</form>
</td>
</tr>
</table>
<!-- /////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////-->

</body>
</html>

[/HTML]

^_^ Thanks, Death

[TheServant]

You rock Death! I have fixed a lot of errors using that validator. Didn't realise teaching myself meant it was also possible to teach myself wrong ways! Well, I apparently have no more syntax errors, but my problem is still there and now it is also in Firefox. Have another look at my site, http://supremewarfare. com and see if you (or anyone else) can tell me what the gap at the top of the page and the gaps around the content part are from?

The Servant

[Death Slaught]

No problem, it's what I'm here for.

I don't even have to look at the page to tell you how to fix that. Add this rule to one of your CSS files.

 * { 
margin:0;
padding:0;
}
 

^_^ Thanks, Death

PS - After you get this working, try making your site XHTML 1.0 Strict, instead of transitional. This will give you a little more experience in fixing errors and invalid code.

[Death Slaught]

As for your spaces around your images I know that using:

vertical-align:bottom;

will get rid of the one in your register page, but as for the other ones i'm not really sure. drhowarddrfine will know, he's the almighty one around here. :)

^_^ Thanks, Death