CSS gurus

[moose]

Could anyone here familiar with CSS help me debug this?

The page comes up fine in Firefox, but in IE all my containers are moved way to the right. Hard to explain and I'm sans a web host to show an example at the moment.

I know I rely too much on absolute positioning..but it was never a problem before... I feel like im missing something very simple here...


--
index.css

body  {
   text-align: center;
   background-color:#003333;
   margin: 0;
   padding: 0;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}

#sign {
position:absolute;
   left:260px;
   top:130px;
}

#collage{
position:absolute;
   left:500px;
   top:135px;
}
#wrapper {
   background-repeat:repeat-y;
   background-position:center;
   background-color:#FFFFFF;
   width:750px;
   height:920px;
   padding:0 0px;
   margin: 0 auto;
}

#links   {
position:absolute;
left:450px;
top:860px;
text-align:center;
font:Arial, Helvetica, sans-serif;
font-size:12px;
}

#button {
position:relative;
left:10px;
top:120px;
   width: 176px;
   padding: 100px 10px 10px 10px;
   margin-bottom: 1em;
   font-family: Arial, Verdana, Tahoma;
   font-size:12px;
   color: #333;
   }
#button ul {
      list-style: none;
      margin: 0;
      padding: 0;
      border: none;
      }
      
   #button li {
      border-bottom: 1px solid #0f3120;
      margin: 0;
      }
#button li a {
      display: block;
      padding: 5px 5px 5px 0.5em;
      color: #000;
      text-decoration: none;
      width: 100%;
      }

   body #button li a {
      width: auto;
      }

   #button li a:hover {
      background-color: #0f3120;
      color: #fff;
      }

#text {
position:absolute;
width:400px;
left:520px;
top:550px;
text-align:left;
font:Arial, Helvetica, sans-serif;
font-size:12px;
}      

#bottom {
font-size:10px;
color:#FFFFFF;
width:750px;
   height:60px;
   padding:10px 0px;
   margin: 0 auto;
position:absolute;
   left:253px;
   top:920px;
   background-image:url(../images/bottom.jpg);
}

---

[ghostdancer]

Actually impossible to say without actually looking at the HTML code of your home page. You may have a missing closing </div> or it may be your nesting structure of elements.

You need to give the url to the home page so it can be examined.

[soda72]

What version of IE?  7.0 or 6.0?

[Spikes]

IE has always had problems with CSS. Takes a lot of re-coding to get it cross-browser compatible.

[forHIM]

down with IE!

yes, without a page/url to view it's sort of hard to tell where the problem is.  I'd look at the web developer add-on to firefox and/or firebug to help find CSS/html issues.

[RTHolmes]

IE sucks, cant even comply with CSS 1 which has been an open standard for over 12 years now. just another piece of junk out of redmond 


point the page at the W3C css validator page, thats a good place to start.

[moose]

alright, so its been a while but i finally got the site in a temporary location
http://66.147.240.170/~capecodh/

right now its alittle off in firefox, which i think is just a cause of me messing around, but its the total screwup in IE thats driving me nuts

you smart guys please let me know what you think! thanks a lot!

[Lord ReDhAwK]

Nice design.  Write the entire thing in Flash and drop the completed .swf into a blank html document.  No cross-browser issues at all 

ReDhAwK

[Wayout]

It's hard to say when both IE and Firefox are messed up but maybe you could try this.

Paste this snippet to your main HTML page before </HEAD>


<script type="javascript">
<!--
[if gte IE 5.5000]>
<style type="text/css">

#sign {
position:absolute;
   left:260px;
   top:130px;
}

#collage{
position:absolute;
   left:500px;
   top:135px;
}

#bottom {
font-size:10px;
color:#FFFFFF;
width:750px;
   height:60px;
   padding:10px 0px;
   margin: 0 auto;
position:absolute;
   left:253px;
   top:920px;
   background-image:url(../images/bottom.jpg);
}

</style>
<![endif]-->
</script>


(my comments) The above snippet contains the code from your CSS so it will display as before.  Try changing the 'left:'  and 'top:'  values and see what happens.  Any changes you make here will only show up in IE 5 or above.  BTW- I'm guessing the problem lies in the CSS code shown,  there could be other parts of your CSS that will need to be added to this snippet for the entire page appear correctly.   Good luck and let me know what you find.

[Eagler]

your files: http://www.pogbird.com/X45/test.zip
played around with your files in DW CS3 and came up with this:
index.css
body  {
   text-align: center;
   background-color:#003333;
   margin: 0;
   padding: 0;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}

#sign {
   position:absolute;
   left:250px;
   top:126px;
   width: 223px;
   height: 207px;
}

#collage{
   position:absolute;
   left:471px;
   top:131px;
}
#wrapper {
   background-repeat:repeat-y;
   background-position:center;
   background-color:#FFFFFF;
   width:750px;
   height:920px;
   padding:0 0px;
   margin: 0 auto;
}

#links   {
   position:absolute;
   left:242px;
   top:859px;
   text-align:center;
   font:Arial, Helvetica, sans-serif;
   font-size:12px;
   height: 59px;
   width: 750px;
}

#button {
   position:absolute;
   left:242px;
   top:237px;
   width: 176px;
   padding: 100px 10px 10px 10px;
   margin-bottom: 1em;
   font-family: Arial, Verdana, Tahoma;
   font-size:12px;
   color: #333;
   height: 9px;
   }
#button ul {
      list-style: none;
      margin: 0;
      padding: 0;
      border: none;
      }
     
   #button li {
      border-bottom: 1px solid #0f3120;
      margin: 0;
      }
#button li a {
      display: block;
      padding: 5px 5px 5px 0.5em;
      color: #000;
      text-decoration: none;
      width: 100%;
      }

   body #button li a {
      width: auto;
      }

   #button li a:hover {
      background-color: #0f3120;
      color: #fff;
      }

#text {
   position:absolute;
   width:443px;
   left:477px;
   top:550px;
   text-align:left;
   font:Arial, Helvetica, sans-serif;
   font-size:12px;
}     

#bottom {
font-size:10px;
color:#FFFFFF;
width:750px;
   height:60px;
   padding:10px 0px;
   margin: 0 auto;
position:absolute;
   left:253px;
   top:920px;
   background-image:url(file:///C|/Documents%20and%20Settings/Administrator/Desktop/images/bottom.jpg);
}

index.html
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Cape Cod Holiday Estates</title>
</head>
<body>
<div id="wrapper"><img src="images/mainlogo.jpg" /> <!-- Beginning of background wrapper div -->
<div id="sign"><img src="images/text2.jpg" /></div>
<div id="button"> <!-- Menu -->
<ul>
   <li><a href="index.htm">Home[/url]</li>
   <li><a href="#">Resort Information[/url]</li>
   <li><a href="#">Accommodations[/url]</li>
   <li><a href="#">Rates and Reservations[/url]</li>
   <li><a href="#">Directions[/url]</li>
   <li><a href="#">Things to Do[/url]</li>
   <li><a href="#">Owner Info[/url]</li>
   <li><a href="#">Contact Us[/url]</li>
</ul>
</div>
<!-- end Menu -->
<div id="collage"><img src="images/collage.jpg" width="484" /></div>
<div id="text">
Welcome to Cape Cod Holiday Estates!

Located on the southern coast of Cape Cod, just a short distance from Nantucket Sound and South Cape Beach, Cape Cod Holiday Estates boasts both privacy and luxury. Each vacation home is located on a one-third acre lot and features a spacious sun deck or patio. A short trip to the Atlantic Ocean offers excellent boating, fishing and whale watching excursions. Enjoy all the warmth of New England in a memorable atmosphere at Cape Cod Holiday Estates.</div>
<div id="links"><!-- Beginning of affiliate links -->
<img src="images/VRI-Logo.jpg" border="0" /><img src="images/spacer.gif" width="20" height="20" border="0" />
<img src="images/rci-community.gif" border="0" /> <img src="images/spacer.gif" width="20" height="20" border="0" />
<img src="images/interval.gif" border="0" />
<p>
</div>
<!-- End of affiliate links -->

</div><!-- End of background wrapper div -->
<div id="bottom">
Cape Cod Holiday Estates

97 Four Seasons Drive

Mashpee, MA 02649

Phone and Fax: (508) 477-3377

cche@capecod.net</div>

</body>
</html>

both browsers look good locally - hope that helps