Hi guys. I have decided to go on a new venture and finally got the courage to code a tableless website . You can view it at www.cinvid.com . As you can see , In Firefox it works perfectly . However , in IE , the menu is completely screwed up. I have no idea how to fix the issue . Here is my current index.php : <?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> <!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" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>"> <head> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <?php if ($my->id) { initEditor(); } ?> <?php mosShowHead(); ?> <script type="text/javascript"> </script> <!--http://www.bluerobot.com/web/css/fouc.asp--> <link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrap"> <div id="header"> </div> <div id="menu"> <div id="mtext"> <?php mosLoadModules('user3', -3); ?> </div> </div> <div id="behindm"> </div> <div id="empty"> </div> <div id="bd"> <div id="content"> <div class="inside"> <?php mosMainBody(); ?> </div></div> <div id="bodyright"> <div id="search"> <?php mosLoadModules ( 'user4', -1 ); ?> </div> <div id="new"> <?php mosLoadModules ( 'user1', -1 ); ?> </div> </div> <div id="underbd"> </div> <div id="footer"> <div id="ad1"> <?php mosLoadModules('user5'); ?> </div> <div id="ad2"> <?php mosLoadModules('user6'); ?> </script> </div> </div> </div> </div><!--end of wrap--> </body> </html> Code (markup): here is my template_css.css file /*Compass Design layout.css CSS file*/ body { text-align:center; /*center hack*/ } #wrap { width:984px; /*center hack*/ height:528px; margin:0 auto; /*center hack*/ text-align:left; } #header { height:160px; width:983px; text-align:left; } #behindm { height:29px; width:204px; text-align:left; } #menu { height:29px; width:764px; text-align:left; } #mtext{ margin-top:7px; text-align:left; } #empty { height:28px; width:968px; text-align:left; } #bd { text-align:left; float:left; } #content{ width:746px; text-align:left; float:left; } #bodyright{ height:505px; width:237px; text-align:left; float:left; } #underbd{ width:238px; text-align:left; float:left; } #search{ margin-left:40px; margin-top:48px; } #new{ margin-left:30px; margin-top:140px; } #footer { height:138px; width:984px; text-align:left; float:left; clear:both; } #ad1 { margin-left:20px; margin-top:8px; float:left; } #ad2 { margin-right:40px; margin-top:8px; float:right; } .inside { padding:10px; } /*Compass Design Customize.css file */ * { margin:0; padding:0; } h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address { margin: 0.5em 0; } li,dd { margin-left:1em; } fieldset { padding:.5em; } body { font-size:76.1%; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:1.3em; } ul#mainlevel { margin: 0; padding: 0; } ul#mainlevel li { display: inline; /* Shows each item side-by-side */ list-style-type: none; /* Gets rid of the bullet points */ font-size:13pt; font-family: Verdana; } ul#mainlevel a { display: block; float: left; padding: 0 1em; /* Provides horizontal separation between menu items */ } .contentheading { font-family: Arial Narrow, Helvetica, sans-serif; padding: 0px 0px 5px 0px; font-size: 24px; font-weight: normal; height: 45px; vertical-align: bottom; text-align: left; width: 100%; } #header { background:url(../images/header.jpg); } #behindm { background:url(../images/behindmenu.jpg); } #menu { margin-left:204px; float:left; background:url(../images/menu.jpg); } #empty { float:left; background:url(../images/empty.jpg); } #bd { background: url(../images/content.jpg); } #content { background: url(../images/content.jpg); } #bodyright { background: url(../images/bodyright.jpg); } #footer { background:url(../images/footer.jpg); } } Code (markup): I checked with the w3c validator to make sure everything in the code was fine and it seems to be so. does anyone have an insight to what is going on?
There may be multiple things going on, but this is number one: <?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Anything before the doctype, whether is be a space, a newline, or a bunch of PHP crapola, will take IE6 and I think also 7 out of their "Standards" modes and into "Quirks" mode, where they don't even obey the box model. They act like IE5.5 and under, and MS did this so that all those crappy sites written long ago for 5.5's quirks, and which normally don't have doctypes, still work. Move that php thingie anywhere else.
im kind of confused to what you just said :S do you mean to remove <?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> or to move it somewhere else? If i am to move it , where exactly?
The very first line of your HTML page MUST be <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Other browsers don't worry so much if there's a line of something else on top, but IE6 does. The php stuff has to go elsewhere. I don't use PHP so I dunno where it can go.