Ok, part of the problem is here:
Quote:
#content {
background-color: #ffffff;
width: 538px;
min-height: 300px;
margin-top: 6.5px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 6.5px;
padding-left: 4px;
float: left;
}
|
You have a left-floated div with a left margin. One of IE's many bugs is the doubled float margin bug - which means IE is taking that 6px left margin and turning it into 12px.
For this, you need a 'hack', but you need to use conditional comments and a separate CSS file for IE fixes ONLY. The solution is this:
#content: {display: inline;}
Add this to the head of your page:
[quote}
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if gt IE 6]>
<link href="ie7fixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
[/quote]
You also need to remove the padding-left: 4px on #content - also because of IE's broken box model. Put the spacing on the <p> inside #content instead.
You've got lots of problems on your list because the width varies on hover, so you need to find a total width, including the hover styling, and make that the total width of the sidebar (and you have no styling on #sidebar).
All of IE's nasty bugs are outlined here, with solutions:
http://www.positioniseverything.net/explorer.html
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|