Displays wrong in IE

**thenajsays** · 05-15-2008, 05:16 PM

I redesigned a site I am working on to resize a few things and now IE displays things incorrectly. FF displays it perfectly, but IE is way wrong...
ALSO my anchors work in FF but not IE... how come?

**Medyman** · 05-15-2008, 09:14 PM

That's way too vague of a question. We'll need to see some code or something to make that judgement.

We're not psychics here.

Post your markup, or better yet, a link to your site.

**thenajsays** · 05-16-2008, 02:07 PM

the site isnt live yet...

Code:

<!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>
<!--
Author:	AJ Pinto
Date:	05/12/2008
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equus Development | Not The Same Old Thing</title>
<link href="css/pc.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/thw.js"></script>
</head>
<body>
<div id="head"><img src="images/Eq_dev_logo_2.gif" alt="Equus Development L.L.C." width="320" height="118" border="0" usemap="#Home" />
<map name="Home" id="Home">
  <area shape="poly" coords="75,41,74,0,179,0,164,43,231,44,211,79,180,80,172,116,64,116,73,79,23,78,34,38" href="index.html" alt="Equus Development L.L.C." />
</map><div id="hlinks"><a href="#CurrentP" alt="Current Projects">Current Projects</a> | <a href="#FutureP" alt="Future Projects">Future Projects</a> | <a href="#PastP" alt="Past Projects">Past Projects</a> | <a href="#ContUs" alt="Contact Equus Development L.L.C.">Contact Us</a> | <a href="#Inv" alt="Investors">Investors</a> | <a href="http://www.chicagohomeestates.com" target="_blank" alt="Search Chicago Real Estate">Chicago Real Estate</a></div>
</div>
<div id="slidingcell">
<table border="0" cellspacing="0" cellpadding="0" style="height:500px">
  <tr>
    <td class="tablecells"><div class="tablebody" id="bHome" name="#bHome">
    	<div id="homelinkbar">
        	<a href="#CurrentP" alt="Current Projects"><img src="images/Current_Projects.gif" alt="Current Projects" /></a>
            <a href="#FutureP" alt="Future Projects"><img src="images/Future_Projects.gif" alt="Future Projects" /></a>
            <a href="#PastP" alt="Past Projects"><img src="images/Past_Projects.gif" alt="Past Projects" /></a>
        	<a href="#ContUs" alt="Contact Us"><img src="images/Contact_Us.gif" alt="Current Projects" /></a>
            <a href="#Inv" alt="Investors"><img src="images/Investors.gif" alt="Future Projects" /></a>
            <a href="http://www.chicagohomeestates.com" target="_blank" alt="Chicago Real Estate"><img src="images/Chicago_Real_Estate.gif" alt="Past Projects" /></a></div>
        <div id="homeheading"><img src="images/Not_The_Same_Old_Thing.gif" alt="Not The Same Old Thing" width="365" height="33" /></div>
        <div id="homebody">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec a tellus. Morbi at odio. Mauris pharetra tortor scelerisque mi. Fusce aliquam erat at elit. In sem. Duis vel mauris. Aliquam fringilla. Mauris viverra, mauris ac facilisis feugiat, velit urna pharetra diam, id vehicula augue metus vitae sem. Curabitur vehicula mattis lectus. Etiam in lectus. Sed fermentum malesuada leo. Vivamus dapibus, purus sit amet fringilla ultricies, arcu velit consectetuer risus, vestibulum sollicitudin orci dui ac velit. Vestibulum feugiat iaculis tellus. Nullam consequat mollis sapien. Curabitur egestas. Praesent ante quam, posuere vel, posuere at, suscipit id, neque. Nulla quis dolor. Aliquam eleifend. Mauris ultrices. Praesent porttitor sodales eros.</p>
          <p>Sed non arcu. Integer augue libero, varius in, luctus nec, tincidunt vel, lectus. Mauris nulla neque, aliquet eu, hendrerit in, accumsan at, lectus. Fusce at turpis a ligula mattis facilisis. Integer pellentesque. Duis et lectus sed sem pulvinar condimentum. Proin dapibus consequat eros. Donec purus. Morbi elit justo, eleifend non, tempus nec, tempus et, justo. Sed ac ligula. Proin eget sem vel magna fermentum varius. In at massa et libero mattis euismod. Donec bibendum pellentesque lorem.</p>
        </div>
        <div id="featuredheading"><img src="images/Featured_Project.gif" alt="Not The Same Old Thing" width="360" height="35" /></div>
        <div id="featuredbody"><img name="FeatProj" src="" width="140" height="180" alt="" style="background-color: #00CCFF" />
          <h2>Project Address</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec a tellus. Morbi at odio. Mauris pharetra tortor scelerisque mi. Fusce aliquam erat at elit. In sem. Duis vel mauris. Aliquam fringilla. Mauris viverra, mauris ac facilisis feugiat, velit urna pharetra diam, id vehicula augue metus vitae sem. Curabitur vehicula mattis lectus. Etiam in lectus. Sed fermentum malesuada leo.</p></div>
	  </div></td>
    <td></td>
    <td class="tablecells"><div class="tablebody" id="CurrentP" name="#CurrentP"><div id="backhome"><a href="#bHome" alt="Back Home"><img src="images/back_home.gif" alt="Back Home" /></a></div>
    </div></td>
    <td class="tablecells"><div class="tablebody" id="FutureP"><div id="backhome"><a href="#bHome" alt="Back Home"><img src="images/back_home.gif" alt="Back Home" /></a></div></div></td>
	<td class="tablecells"><div class="tablebody" id="PastP"><div id="backhome"><a href="#bHome" alt="Back Home"><img src="images/back_home.gif" alt="Back Home" /></a></div></div></td>
    <td class="tablecells"><div class="tablebody" id="ContUs"><div id="backhome"><a href="#bHome" alt="Back Home"><img src="images/back_home.gif" alt="Back Home" /></a></div></div></td>
    <td class="tablecells"><div class="tablebody" id="Inv"><div id="backhome"><a href="#bHome" alt="Back Home"><img src="images/back_home.gif" alt="Back Home" /></a></div></div></td>
  </tr>
</table>
</div>
<div id="contactfooter"><a href="http://maps.google.com/maps?hl=en&client=firefox-a&q=916+W+Diversey+Pkwy,+Chicago,+IL+60614,+USA&ie=UTF8&ll=41.933173,-87.652102&spn=0.00961,0.023518&z=16&iwloc=addr" alt="Equus Developmetn L.L.C" target="_blank">916 W Diversey Parkway</a> | Chicago, IL 60614 | 773.883.4701</div>
</body>
</html>

and heres the CSS:

Code:

@charset "utf-8";
/* CSS Document */
body {
	margin:20px;
	background-color:#000000;
	font-family:Verdana
}
.anchors {
	position:relative;
	top:-20px;
	left:-20px;
	width:0px;
	height:0px
}
#head {position:fixed;
	width:800px;
	height:118px}
#head img {
	border:none;
	vertical-align:baseline
}
#hlinks {
	position:relative;
	bottom:20px;
	font-size:9pt;
	color:#FFFFFF;
	text-align:right;
	width: 610px;
	float: right
}
#hlinks a {
	color:#FFFFFF;
	text-decoration:none
}
#hlinks a:hover {
	color:#FFFF00
}
#slidingcell {
	font-size:11px;
	width:800px;
	height:500px;
	position:absolute;
	top:138px;
	left:120;
	overflow:hidden
}
#contactfooter {
	position:absolute;
	top:638px;
	font-size:10pt;
	color:#FFFFFF;
	text-align:left;
	margin-bottom: 10px;
}
#contactfooter a {
	color:#FFFFFF;
	text-decoration:none
}
#contactfooter a:hover {color:#FFFF00}
.tablecells {
	background-image:url(../images/background_2.gif);
	background-position:top, left;
	background-repeat:no-repeat;
	width:800px;
	height:400px;
}
.tablebody {
	width:800px;
	height:500px;
	padding: 20px;
}
#homeheading {position:relative;
	top:10px;
	left:10px;
	width:250px}
#homebody {
	width:450px;
	height:160px;
	position:relative;
	top:15px;
	left:10px;
	text-align:justify;
	overflow:auto
}
#homebody p {
	margin-top:0px
}
#homelinkbar {
	float:right;
	margin-right:60px;
	text-align:right
}
#homelinkbar a {
	display:block;
	text-align:right;
	margin-top:35px;
	margin-bottom:35px
}
#homelinkbar img {
	border:none
}
#featuredheading {
	position:relative;
	top:30px;
	left:10px;
	width:250px
}
#featuredbody {
	width:450px;
	height:190px;
	position:relative;
	top:35px;
	left:10px;
	text-align:justify;
	overflow:auto
}
#featuredbody p {
	margin-top:0px
}
#featuredbody img {
	float:left;
	border:solid;
	border-width:1px;
	border-color:#000000;
	margin-right:7px
}
#featuredbody h2 {
	margin-top:0px;
	margin-bottom:0px;
	text-decoration:underline;
	font-weight:normal
}
#backhome {
	position:relative;
	top: 420px;
	width: 165px;
	left: 590px;
}
#backhome img {
	border:none
}

**Medyman** · 05-16-2008, 02:40 PM

What exactly isn't working for you? Please be very specific. Your markup is largely images -- thing which we don't have access to. I can't decipher your design with just the text portions.

As to your links, you're linking to anchors which don't exist. Internal anchors are created like so:

Code:

<a name="PastP"></a>

**thenajsays** · 05-16-2008, 02:59 PM

im linking to IDs...
in IE some of the DIVs drop out of view in the main DIV... i cant figure out why... it displayed perfectly until i resized things...

**Medyman** · 05-16-2008, 04:56 PM

Originally Posted by thenajsays

im linking to IDs...
in IE some of the DIVs drop out of view in the main DIV... i cant figure out why... it displayed perfectly until i resized things...

You can't link to ids (unless you're using javascript). You have to use anchors.

You should upload your page somewhere so someone can help you with your other issues. The markup here isn't enough to troubleshoot.

**JasonDFR** · 05-16-2008, 05:17 PM

I would start by correcting your markup so that it is W3C valid. In its current form, there are 27 errors. http://validator.w3.org/ and paste in your code.

You've also got two CSS errors:

44 #slidingcell Value Error : left only 0 can be a length. You must put an unit after your number : 120
62 .tablecells Value Error : background-position , is an incorrect operator : top,left

http://jigsaw.w3.org/css-validator/ to check your CSS.

Problem could go away once your code is valid.

The best advice I can give anyone who is authoring HTML and/or CSS is to use the W3C validation service after you write or change code.

**thenajsays** · 05-20-2008, 08:18 PM

ok, ive cleaned up my code and double checked it all and im still having the same issue. i also validated my CSS and that has passed as well... here is a link of what im working on... again, it displays perfectly in Firefox, but not IE
Equus Development

**thenajsays** · 05-21-2008, 05:19 PM

anyone?

**rangana** · 05-22-2008, 12:49 AM

What specifically is not working?..

Only the "anchor" problem is visible, which will be corrected by adding the highlighted:

Code:

<a onclick="javascript:document.getElementById('CurrentP').scrollIntoView();return false;" href="#" title="Current Projects">Current Projects</a>
 | <a onclick="javascript:document.getElementById('FutureP').scrollIntoView();return false;" href="#" title="Future Projects">Future Projects</a>
 | <a onclick="javascript:document.getElementById('PastP').scrollIntoView();return false;" href="#" title="Past Projects">Past Projects</a> | <a onclick="javascript:document.getElementById('ContUs').scrollIntoView();return false;" href="#" title="Contact Equus Development L.L.C.">Contact Us</a> 
| <a onclick="javascript:document.getElementById('Inv').scrollIntoView();return false;" href="#" title="Investors">Investors</a>

No need to change the Chicago Real Estate link as it's working fine.

Thread: Displays wrong in IE

Thread Tools

Search Thread

Displays wrong in IE

The Following User Says Thank You to JasonDFR For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions