Complability problem of IE

<?php 
echo '<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />';?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/jquery.jMagnify.js" ></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".menu2 a").append("<em></em>");
    
    $(".menu2 a").hover(function() {
        $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
        var hoverText = $(this).attr("title");
        $(this).find("em").text(hoverText);
    }, function() {
        $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
    });


});
$().ready(function() {
    $('#first').jMagnify();
});

      $(document).ready(function() {
   
        $('div.demo-show:eq(0)> div:gt(0)').hide();  
   
        $('div.demo-show:eq(0)> h3').click(function() {
   
          $(this).next('div:hidden').slideDown('fast')
   
          .siblings('div:visible').slideUp('fast');
   
        });
   
      });

$().ready(function() {
    $('#color').jMagnify({
        centralEffect: {'color': 'yellow'},
        lat1Effect: {'color': 'orange'},
        lat2Effect: {'color': 'red'},
        lat3Effect: {'color': 'magenta'},
        resetEffect: {'color': '#E3F1F2'}
    });
});

</script>
<style type="text/css">
body 
    

.menu2 {
    margin: 100px 0 0;
    padding: 0;
    list-style: none;
}
.menu2 li {
    padding: 0;
    margin: 0 2px;
    float: left;
    position: relative;
    text-align: center;
}
.menu2 a {

    display: block;
    color: #000000;

    text-decoration: none;
    font-weight: bold;
    
}
.menu2 li em {
    font-weight: normal;
    background: url(images/hover.png) no-repeat;
    width: 180px;
    height: 45px;
    position: absolute;
    top: -85px;
    left: -15px;
    text-align: center;
    padding: 20px 12px 10px;
    font-style: normal;
    z-index: 2;
    display: none;
}
</style>
</head>
<?php echo '
<body>


<div class="wrapper">
    <div class="header_wrapper">
    <div class="left_hand_symbol"><img src="images/header_hand_img.png" height="115" width="162"/></div>
        <div class="header">            
            <div class="logo"><img src="images/logo.png" height="171" width="136"/></div>
            <div class="title" > <img src="images/banner_title.png" width="500" height="56" /></div>
            <div class="right">
                <div class="link">';
                    if(isset($_COOKIE['LoginIdCookie'])){ }
                        //echo '<div class="login"><a href="log_out.php">Log out</a></div>';
                        //require_once('LoginStatement.php');}
                            
                            else{
                        echo'<div class="register" ><a href="RegistrationAndActivity.php">Register</a></div>
                        <div class="link_ruler"> | </div>
                        <div class="login"><a href="LoginValidator.php">Login</a></div>';
                        }
                        echo'<div class="clear"><!-- --></div>
                </div>
                
                <div class="clear"><!-- --></div>
            </div>
            <div class="clear"><!-- --></div>
        </div>
    </div>
    <div class="container_wrapper">
    <div class="nav"> 
        <ul class="menu2">
        <li>
            <a href="index1.php" title="Go to homepage">Home </a>        
        </li>
    
            <li><a href="#" title="Our Voluntee">Voluntee </a></li>
            <li><a href="AboutUs.php" title="Find out who I am">About Us </a></li>
            <li><a href="EventDisplay.php" title="Show All Events">Events</a></li>
            <li><a href="NewsLinksAll.php" title="Latest News"> News </a></li>
            <li ><a href="PhotoGallery.php" title="Visit Elite Brigade Photo Gallery"> Photo Gallery</a></li>
        </ul>    
    </div>
    
    <div class="clear"><!-- --></div>
    <div class="home_container">
        <div><img src="images/body_top.png" width="906" height="12"></div>
        <div class="container_bg">
        <div class="left">
            <div><img src="images/left_box_top_img.png" width="219" height="14" /></div>
            <div class="background">
                <div class="title">EVENTS</div>
                    <div class="pruduct">                    
                        <ul>
                            <li>* <a href="#">Whatexpect on Sundays</a></li> 
                            <li>* <a href="#">Location and directions</a></li> 
                            <li>* <a href="#">Where to go to wear</a></li> 
                            <li>* <a href="#">What  for your child</a></li> 
                            <li>* <a href="#">Meet the staff</a></li> 
                            <li>* <a href="#">ExploreFaith.org</a></li> 
                            <li>* <a href="#">Mission Opportunities</a></li> 
                        </ul>    
                    </div>
            </div>            
            <div><img src="images/left_box_bottom_img.png" width="219" height="15" /></div>
        </div>
        
        
        <div class="contain_box">
                <div class="contain_title"  id="color">Welcome to Elite Brigade</div>
                <div class="text">';
                ?>

Hi Friends…
Above code perfectly runs in Firefox but when i try to run above code in IE(any version) then webpage breaks…
I think its compatibilty issue but how it will resolved???
Plz help me
Thx in advance

It would be better to post just the actual HTML that’s rendered in the browser, rather than the PHP stuff. But really, a link would be better. Then we can really see what’s going on.

All I can see is that a few times you have

$().ready(function() {

instead of

$(document).ready(function() {

I don’t know if that makes any different, though.

Off Topic:

EDIT: PS, I’ve moved this thread to the JavaScript forum.

Hi frd…
This is all HTML code and those two lines of PHP doesn’t effect at all. I already checked it…
Thx for reply

In what way does it “break” in IE, eg are some elements out of place?

Where is the rest of the XHTML? It looks like you only have a small portion of it showing.

Anyway the XHTML is malformed, for example missing the mandatory TITLE and the META is outside of the HEAD.

Furthermore like SpacePhoenix said are you having a CSS issue or markup issue? Because the CSS is malformed as well, which might cause further rendering anomalies. Then we have to consider if the JavaScript is coming into play. So please can you expand upon what is not functioning correctly?

Yes frd…
U r right…

If you have this page published, try validating the code first. If your markup is valid, it’s much easier to spot what is going wrong. Also it’s important that you define for us what exactly “breaks” in the page.

Frs get a look in this link in IE and then firefox
Micro Elite Brigade - Home Page

U will understand my problem more correctly///////////

This part:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

is missing from the link you gave. That makes IE go in quirks mode and break your page.

I’m just sitting here trying to figure out what all the jquery for nothing is for… particularly all that ‘menu2’ manipulation nonsense.

Or is that for the annoyingly broken ‘gee ain’t it neat’ animated news box. (that only seems to show up in FF here…) OH, it’s marquee – at tag that doesn’t even EXIST in modern HTML.

As I often say CSS is only as good as the markup it’s applied to – and in this case – as with for many sites, you’ve got a endless selection of DIV and classes for NOTHING… clearing DIV like it’s 1998, presentational images in the markup making the CSS off appearance a train wreck, nonsensical heading tag orders, LINK tags in the BODY (they don’t go there – ever), characters that don’t match your encoding (styled quotes), non-semantic tables inside a form for no fathomable reason… MULTIPLE tables inside that form for no reason either… on content that… isn’t a form?!? Multiple BODY tags, multiple /body /html tags… Which is how you’re ending up with 11.3k of markup to do 6 to 7k’s job.

LOOKING at your page, there is no reason to be outputting more markup than:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Micro Elite Brigade
</title>

</head><body>

<div id="header">

	<h1>
		Micro Elite Brigade
		<span></span>
	</h1>

	<ul id="userMenu">
		<li><a href="RegistrationAndActivity.php">Register</a></li>
		<li class="last"><a href="LoginValidator.php">Login</a></li>
	</ul>

<!-- #header --></div>

<div id="widthWrapper">

	<ul id="mainMenu">
		<li><a href="index1.php">Home</a></li>
		<li><a href="#">Voluntee</a></li>
		<li><a href="AboutUs.php">About Us</a></li>
		<li><a href="EventDisplay.php">Events</a></li>
		<li><a href="NewsLinksAll.php">News</a></li>
		<li><a href="PhotoGallery.php">Photo Gallery</a></li>
	</ul>	
	
	<div class="borderTop"></div>
	<div class="borderSides">
	
		<div id="content">
		
			<h2>Welcome Guest to Elite Brigade</h2>
			<p>
				Elite Brigade is a social initiative from Micro technologies India Ltd.
			</p><p>
				The main purpose behind the formation of the "Elite Brigade" is to contribute to the development of young people in achieving their full physical, intellectual, social and spiritual as individuals, as responsible citizens and as members of the local and national communities.
			</p><p>
				This volunteers need to follow certain guidelines & principles like duty towards the society, duty towards the nation & duty to self. Helping the common people in panic situation & managing the crowd in different places. Social activities like educating labor class people rights & duties giving them primary education. To educate them for keeping surrounding & environment clean. Informing them about government schemes for their benefits and providing basic facilities like water & first aid medical treatment.
			</p><p>
				An "Elite Brigade" would be trained for is to deal with situations during Flood, Earth Quake, Fire, Terrorism etc. To enforce &#8216;order and discipline&#8217; in the surrounding area is another important responsibility of the "Elite Brigade". Prevention of anything that would affect the peace, harmony, discipline and order in the building is the prime responsibility of the "Elite Brigade" of the area. Timely information of the malfunctioning of any facilities of the building would certainly help in avoiding a chaotic scenario and avoidable commotion in the area. The "Elite Brigade" will have with enough powers to mobilize all the staff connected with the services to act and react to an emergency situation. They should be in a position to visualize these problems and alert the concerned staff of the impending failure of the system and get it rectified on time to avoid chaos and commotion.
			</p><p>
				The main aim of "Elite Brigade" also includes educating people about safety and security measures. The Elite Brigade would be stuffed with all necessary information right from basic to technical in case of implementing security to specific locality or asset.
			</p>
			
			<h2>Recent Events</h2>
			
			<div class="event">
				<div class="borderTop"></div>
				<div class="borderSides">
					<img
						src="upload/DSC_0004.JPG"
						width="80" height="60"
						class="leadingPlate"
						alt="Training Brigade, 1st Batch Together"
					/>
					<h3><span>Navi Mumbai</span> 2010-11-18</h3>
					<p>
						Training of Elite Brigade 1st Batch
					</p>
					<a href="KnowMore.php?EventId=131">Know more </a> /
					<a href="EventParticipator.php?Title=Training of Elite Brigade 1st Batch">click here to participate</a>
				<!-- .borderSides --></div>
				<div class="borderBottom"></div>
			<!-- .event --></div>
			
			<div class="event">
				<div class="borderTop"></div>
				<div class="borderSides">
					<img
						src="upload/DSC_0001.JPG"
						width="80" height="60"
						class="leadingPlate"
						alt="Training Brigade, 1st Batch In Class"
					/>
					<h3><span>Navi Mumbai</span> 2010-11-18</h3>
					<p>
						Training of Elite Brigade 1st Batch
					</p>
					<a href="KnowMore.php?EventId=129">Know more </a> /
					<a href="EventParticipator.php?Title=Training of Elite Brigade 1st Batch">click here to participate</a>
				<!-- .borderSides --></div>
				<div class="borderBottom"></div>
			<!-- .event --></div>
			
			<div class="event">
				<div class="borderTop"></div>
				<div class="borderSides">
					<img
						src="upload/DSC_0047.JPG"
						width="80" height="60"
						alt="Training Brigade, 1st Batch with Fire Extinguisher"
					/>
					<h3><span>Navi Mumbai</span> 2010-11-18</h3>
					<p>
						Training of Elite Brigade 1st Batch
					</p>
					<a href="KnowMore.php?EventId=128">Know more </a> /
					<a href="EventParticipator.php?Title=Training of Elite Brigade 1st Batch">click here to participate</a>
				<!-- .borderSides --></div>
				<div class="borderBottom"></div>
			<!-- .event --></div>
									
		<!-- #content --></div>
						
		<div id="firstSideBar">
			<div class="borderTop"></div>
			<div class="borderSides">
				<h2>EVENTS</h2>
				<ul>
					<li>* <a href="#">Whatexpect on Sundays</a></li> 
					<li>* <a href="#">Location and directions</a></li> 
					<li>* <a href="#">Where to go to wear</a></li> 
					<li>* <a href="#">What  for your child</a></li> 
					<li>* <a href="#">Meet the staff</a></li> 
					<li>* <a href="#">ExploreFaith.org</a></li> 
					<li>* <a href="#">Mission Opportunities</a></li> 
				</ul>	
			<!-- .borderSides --></div>
			<div class="borderBottom"></div>
		<!-- #firstSideBar --></div>
		
		<div id="secondSideBar">
			<div class="borderTop"></div>
			<div class="borderSides">
				<h2>Daily News</h2>
				<a href="NewsDescription.php?NewsId=64">News 7</a><br>
				<br>
				<a href="NewsDescription.php?NewsId=63">News 6</a><br>
				<br>
				<a href="NewsDescription.php?NewsId=62">News 5</a><br>
				<br>
				<a href="NewsDescription.php?NewsId=61">News 4</a><br>
				<br>
				<a href="NewsDescription.php?NewsId=60">News 2</a><br>
			<!-- .borderSides --></div>
			<div class="borderBottom"></div>
		<!-- #secondSideBar --></div>
		
	<!-- .borderSides --></div>
	<div class="borderBottom"></div>
	
	<div id="footer">
		<ul>
			<li><a href="AboutUs.php">About Us</a></li>
			<li><a href="#">Contact us</a></li>
			<li><a href="#">Privacy Policy</a></li>
			<li><a href="#">Copyright statement</a></li>
		</ul>	
	<!-- #footer --></div>
	
<!-- #widthWrapper --></div>

</body></html>

… and if you don’t care about IE8/earlier getting a simpler layout, the ‘border’ classes and div’s I put in could all have an axe swung at them too. Pretty much for the layout you have everything else can be handled from the CSS.

Though if I was writing it a few empty DIV would be added for dynamic widths using my ‘eight corners’ technique since I don’t do fixed width layouts, and I’d also suggest not putting black text over dark gray since that’s illegible to many people; gotta keep the WCAG in mind.

Basically you are outputtting invalid markup with dozens of errors/issues, you’re using tables for things that don’t need to be tables and should not be tables from a semantic standpoint, and you have that bloated train wreck of nonsense jquery doing CSS’ job!

Thx dear for ur hardwork but even now I don’t know what exactly I should do???
Plz help…