Complability problem of IE

Question

ankit.pandey3 -8 Junior Poster in Training

15 Years Ago

<?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

html-css javascript

4 Contributors
6 Replies
111 Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by drjohn

Dani AI

Generated 9 Months Ago

and correctly spotted the headline problems (missing DOCTYPE and duplicate tags). The layout differences in IE are almost always caused by what the browser actually receives, not the PHP source: IE will flip into quirks/compatibility mode if the response is not an exact, standards-mode HTML stream.

A short, practical checklist to diagnose and fix this kind of breakage:

Inspect the delivered HTML (View Source or fetch the page with curl) and confirm there is exactly one <html> and one <body> and that the DOCTYPE is the very first bytes sent (no BOM or stray whitespace from PHP includes).
Validate the HTML and CSS with the W3C validator to catch mismatched tags or missing braces; a broken style block will often make IE ignore the rest of the stylesheet (W3C Markup Validation Service).
Open IE’s developer tools (F12) and check Document Mode and the Console for JavaScript errors — a JS error or a trailing comma can stop scripts and affect layout.
Remove duplicated resources (stylesheets/meta tags) and move all head elements into a single, coherent head section. Consider adding an X-UA-Compatible header/meta if the site must force a particular IE mode; also confirm any third‑party plugins (jMagnify etc.) support the IE versions in question.

A focused debug workflow that works reliably: use a minimal test page that renders correctly in both browsers, then add groups of your original page’s elements back in (CSS, scripts, PHP includes) until the problem recurs. That isolates the culprit quickly. For background on why a missing or malformed DOCTYPE changes IE’s behavior see Mozilla’s explanation of quirks vs standards mode (Quirks Mode and Standards Mode).

All 6 Replies

shaya4207 8 Junior Poster

15 Years Ago

Hi, are you getting a JS error? what do you mean 'webpage breaks', it doesn't load, or it loads bad?

floatingDivs 21 Junior Poster

15 Years Ago

Remove the PHP echo for the DOCTYPE, and everything above the <head> tag. See what happens...I have a feeling that's your problem. If I recall, DOCTYPE is read-only and shouldn't be outputted like that.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ankit.pandey3 -8 Junior Poster in Training · Answer 1 · 2011-03-07T09:57:27+00:00

Hi, are you getting a JS error? what do you mean 'webpage breaks', it doesn't load, or it loads bad?

It means some of elements load in different places...................

ankit.pandey3 -8 Junior Poster in Training · Answer 2 · 2011-03-09T13:32:20+00:00

It means some of elements load in different places...................

Frs get a look in this link in IE and then firefox

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

floatingDivs 21 Junior Poster · Answer 3 · 2011-03-09T20:29:18+00:00

ankit.pandey3,

You're missing a DOCTYPE declaration. You HAVE to have a declared DOCTYPE, otherwise all kinds of funky things happen in browsers. Put this AT THE TOP of the page (above the <html> tag):

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

---EDIT---

Also, from now on, try to use this "template" when designing pages so errors like these don't happen. Notice how a DOCTYPE (as well as XMLNS attribute are used? Good standards = good pages.

<!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>

</head>
<body>

</body>
</html>

drjohn 56 Posting Pro in Training · Answer 4 · 2011-03-10T01:35:33+00:00

If you view the source code as delivered to the browser, you can see that the doctype has not been used. So follow the earlier advice about placing the doctype declaration outside the php part of the page.

Also there are a few oddities about your page

There are THREE occurrences of the <html> tag. And two of the <body> tag.

And the style sheet is loaded twice, once in the usual place and once halfway down the source code.

You can find these using firefox, view source and then the edit>find option

Complability problem of IE

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers