asked on

CSS Firefox And IE

Ok in firefox the right hand column works and does show the news correctly however in IE it doesn't any ideas? Here is the link
http://www.grbackup.com/ee/css/

ASKER CERTIFIED SOLUTION

Eternal_Student

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

seanpowell

Actually I would remove the absolute positioning and use float instead. You also have an issue with the footer div.

Add this to your css at the bottom to see how IE renders what you have:
div { border:1px solid black; }

This would be my preference for layout, given what you have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1 ISPMaker, ISP Maker, LLC, L.L.C., Backup, Custom Software, Custom Solutions, Remote HardDrive, Remote Hard Drive, Automatic Backup, Off-site Backup, Off Site Backup, OffSite Backup">
<title>Golden Retriever Backup</title>
<style>

body
{
      background-color:#C6C6C6;
      color:#000000;
      margin:0;
      padding:0;
}

#container
{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      background-position: top;
      background-repeat: repeat-x;
      background-color: #C6C6C6;
      width: 770px;
}

#header
{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      height: 100px;
      background-image: url(http://www.grbackup.com/ee/css/Banner.jpg);
}

#menulist
{
      float: left;
      width: 145px;
      background-color: #0D00A5;
      background-image: url(http://www.grbackup.com/ee/css/menucap.jpg);
      background-repeat: no-repeat;
      background-position: right bottom;
      padding:15px 0 30px 0;
}

a.Menuitem
{
      display:block;
      width: 125px;
      height: 19px;
      background-image: url(http://www.grbackup.com/ee/css/menuitem.jpg);
      padding-top: 5px;
      background-position: 100% 0;
}

a.Menuitem:hover
{
      background-image: url(http://www.grbackup.com/ee/css/menuitemdark.jpg);
}

#content
{
      float: left;
      width: 337px;
      padding-left: 10px;
      background-color: #C6C6C6;
}

* html #content
{
      width: 347px;
      w\idth: 337px;
}

#News
{
      float:right;
      width: 263px;
      background-color: #0D00A5;
      padding-left: 10px;
}

* html #News
{
      width: 273px;
      w\idth: 263px;
}

#tdGray
{
      font-family: Aria, Helvetica, sans-serif;
      font-size: 10px;
      background: #f1f1f1;
      color: #000000;
}

#tdcopyright
{
      clear:both;
      width: 770px;
      height: 12px;
      font-family: Aria, Helvetica, sans-serif;
      font-size: 8px;
      text-align: right;
      background: #C6C6C6;
      color: #000000;
}

</style>
</head>

<body>

<div id='container'>

      <div id='header'>
             
      </div>

      <div id='menulist'>
            <a class='Menuitem' href='index.html'>Testing</a>
            <a class='Menuitem' href='index.html'>testing 2</a>
            <a class='Menuitem' href='index.html'>testing 2</a>
            <a class='Menuitem' href='index.html'>testing 2</a>
            <a class='Menuitem' href='index.html'>testing 2</a>
            <a class='Menuitem' href='index.html'>testing 2</a>
            <a class='Menuitem' href='index.html'>testing 2</a>
            <a class='Menuitem' href='index.html'>testing 2</a>
      </div>

      <div id='content'>
            Body! Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
            Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
            Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
      </div>

      <div id='News'>
            News<br>
            Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br><br><br><br><br><br><br><br><br>
      </div>

</div>

<div id='tdcopyright'>
      Copyright © 2004-2005 ISP Maker L.L.C.
</div>

</body>
</html>

Sean