Member Avatar for plarsen111

Hi,

My web page looks fine in FireFox, but broken in IE.

http://www.hmstechnology.com/

Does anyone know how I can fix this?

Thanks,

Phil

You can probably view the code even though I use frames, but here is the code with CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
  
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}
</script>
<style type="text/css">
<!--
body {
	background-color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif
}
body,td,th {
	color: #000000;
}
a:link {
	color: #FF0000;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #FF0000;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: underline;
}

h1 {
	font-size:36px;
	text-align:left;
	letter-spacing:1px;
	border-top: 1px solid;
	border-left: 2px solid;
	padding:15px;
	margin-left:25px;
	margin-top:25px;
	}
	
#assignmentblock {
	width:30%;
	height:400px;
	}
	
#assignmentblock p {
	padding:15px;
	font-size:18px;
	border-left: 2px solid;
	}
	
.lesson {
    font-size: 14px;
	color:#FF0000;
	}
	
#extras {
	position: absolute;
	top:28px;
	left:300px;
	width:400px;
	border: 2px solid;
	margin-left:30px;
	padding:18px;
	font-size:22px;
	color:#666666;
	}
	
img {
	float:left;
	margin:15px;
	}

-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body alink="#ffffff" onLoad="MM_CheckFlashVersion('7,0,0,0','Got Flash?  Download here!');">

<div id="assignmentblock">

     <h1>6th Grade<br>
      <span class="lesson">We are either starting a new assignment or having another Make-Up Free Day.  You get to vote!</span>
	 </h1>

	<h1>7th Grade<br>
      <span class="lesson">We are either starting a new assignment or having another Make-Up Free Day.  You get to vote!</span>
	 </h1>
	 
	 <h1>8th Grade<br>
      <span class="lesson">We are either starting a new assignment or having another Make-Up Free Day.  You get to vote!</span>
	 </h1>
	
</div>

<div id="extras">
<p><img src="owen.jpg" height="241" width="182">Owen got a little case of pnemonia. Doing much better now. He spent a few nights in the hospital. He didn't like the "pokes", but he sure did get a lot of toys.
</p>
</div>

</body>
</html>
  • 4 Contributors
  • 4 Replies
  • 131 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by peter_budo
Member Avatar for peter_budo

No, page is looking wrong in both browsers. Two of your DIV tags are overlaping

#assignmentblock {
	width:30%;
	height:400px;
	}	

#extras {
	position: absolute;
	top:28px;
	left:300px;
	width:400px;
	border: 2px solid;
	margin-left:30px;
	padding:18px;
	font-size:22px;
	color:#666666;
	}

This tutorial will help you solve your problem. If however you can't work it out just let me know I will correct it and explain

Member Avatar for jhaycutexp

it looks fine in IE to me... just for some extra spacing to the sides

add this to your css teach

*{margin:0;
padding:0;
}

Member Avatar for MidiMagic

It's the same (and working) in both browsers for me.

Member Avatar for peter_budo

That will be because plarsen111 removed this section from original code ;)

<div id="extras">
<p><img src="owen.jpg" height="241" width="182">Owen got a little case of pnemonia. Doing much better now. He spent a few nights in the hospital. He didn't like the "pokes", but he sure did get a lot of toys.
</p>
</div>
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.