Member Avatar for hsmukunda

Hi

html layout not rendering properly in internet explorer.

I have attached the screenshot of the layout rendering in firefox and internet explorer.

Please see the area of red rendering in internet explorer and gap between yellow bar and red in firefox where as the same gap is not rendering properly in internet explorer.

Also the color of body tag in css has been set to white but where as in internet explorer it is rendering gold color.


code for html page

<html>
<head>
<title></title>

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

<link rel="stylesheet" type="text/css" href="../css/LifeSangaati_css.css" media="screen">
<!-- include the Tools for carousel -->
	<script src="../javascript/jquery.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/slideshow/tabs-slideshow.css">

    
</head>
<body>
<div id="login">
</div>
<div id="masthead">
</div>
<div id="menu">
</menu>



<div class="images">

	<!-- first slide -->
	<div style="display: none;">
		<h3>First pane</h3>

		<img src="slideshow_files/screens.png" alt="Flying screens" style="float: left; margin: 0pt 30px 20px 0pt;">

		<p style="font-weight: bold;">
			The promise of marriage. 
		</p>

		<p>
			Times have changed and perhaps not use so numerous more formalities, and you tell it sufficient. 
		</p>

	</div>

	<!-- second slide -->
	<div style="display: none;">
		<h3>Second pane</h3>


		<img src="slideshow_files/eye192.png" alt="Flying screens" style="float: left; margin: 0pt 30px 20px 0pt;">

		<p style="font-weight: bold;">
			Registration
		</p>

		<p>
			abcd ehakdkad a dajdkadkadf afkafkakfakfkafafjafkafkakfakf    afmakfkafkafkakf afkafkakfkafkakfkaf afkafkafkkafkaf afkafkakfkafkaf afkafkakfkafkafkafkakfakfkafkaf akfkafkafkafkakf fkakfkaf afkakf afkakf afkaf afk akfaf afafkafkakfkafkaf kafkfafkaf a a f af a af afafafa a fa afaffkfkfkakkakfkfkfkk.
		</p>
	</div>

	<!-- third slide -->
	<div style="display: block;">
		<h3>Third pane</h3>

		<p style="font-weight: bold;">
			Premium Membership.
		</p>

		<p>
			Hello How are you.
		</p>
	</div>

</div>


<!-- the tabs -->
</p><div class="slidetabs">
	<a class="" href="#"></a>
	<a class="" href="#"></a>
	<a class="current" href="#"></a>
</div>

<div style="clear: both; margin: 30px 0pt; text-align: center; padding-right: 40px;">

<!--<button onclick='$(".slidetabs").data("slideshow").play();'></button>
<button onclick='$(".slidetabs").data("slideshow").stop();'></button>-->
</div>


<script language="JavaScript">

$(function() {

$(".slidetabs").tabs(".images > div", {

	// enable "cross-fading" effect
	effect: 'fade',
	fadeOutSpeed: "slow",

	// start from the beginning after the last tab
	rotate: true

// use the slideshow plugin. It accepts its own configuration
}).slideshow();
});
</script>



<div id="quick-search">

</div>
<div id="area">
</div>
<body>
</html>

code for CSS

body {
width: 990px;
height:968px;
background-color: white;
}

#login{
	width:990px;
	height:50px;
	background-color:blue;
}
#masthead{
	width:990px;
	height:90px;
	background-color:green;
}
#menu{
	width:990px;
	height:50px;
	background-color:gold;
}

#tab{
	width:650px;
	height:300px;
	margin-top:60px;
	background-color:green;
	float:left;
}
#quick-search{
	width:330px;
	height:400px;
	margin-top:-280px;
	margin-right:3px;
	float:right;
	background-color:red;
}
#area{
	width:990px;
	height:300px;
	
}

thanks.
Looking forward to your reply.

explorer.JPG 81 KB
Edited by hsmukunda because: Had not attached images
  • 2 Contributors
  • 2 Replies
  • 140 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by hsmukunda

Dani AI

Generated

A couple of quick, targeted notes that follow on from s correction (the bad closing tag): fixing that helps, but broken HTML can still leave IE in quirks mode or produce very different box/float results. The snippet posted also contains other markup problems (a duplicate/opened <body> and stray tags) that will cause inconsistent rendering across browsers. Running the page through the W3C validator will reveal every mismatched tag and is the fastest first step (W3C Validator).

A short checklist of reliable fixes to apply next:

  • Force standards mode by adding a proper DOCTYPE and an IE-compatible header. For modern pages, use:

    <!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

  • Reset the page base instead of sizing the body. Don’t set a fixed width/height on body; use a centered wrapper for the fixed layout. Example reset:

    html, body {
height: 100%;
margin: 0;
padding: 0;
background: #fff;
}
.wrapper { width: 990px; margin: 0 auto; }

  • Replace the negative-top-margin trick with a two-column float or positioning scheme inside that wrapper, and contain floats with a clearfix. Example patterns:

    .left { float: left; width: 650px; }
.right { float: right; width: 330px; }
.wrapper::after { content: ""; display: table; clear: both; }

Extra debugging tips: use IE’s F12 tools to check Document Mode (quirks vs standards), and test removing the negative margin to see which element is shifting. For very old IE versions, the “hasLayout” bug can be worked around by zoom:1 on the affected element. For background-color oddities, also try setting the same background on html as a diagnostic step. A short validation + DOCTYPE + removing negative-margin hacks will resolve most cross-browser gaps. For reference on DOCTYPE and mode, see MDN: Doctype.

Recommended Answers

All 2 Replies

Member Avatar for macgurl70

on line 20 you have

</menu>

instead of

</div>

Firefox is a tad bit more forgiving on the syntax. So, IE thinks the menu div has not ended yet.

Member Avatar for hsmukunda

thanks

even correcting the closing tag the layout and top margin for red box is not rendering properly in internet explorer.
I have attached screen shot of the layout in both firefox and explorer, the second screen shot is of explorer where we can see the margin difference when rendered in explorer.

explorer.JPG 88.35 KB
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.