I’m using a wordpress theme with a 2 sidebar layout. My problem is that only certain content in the sidebar when you hover over it moves the entire column move down below the left column in IE. It works perfectly with firefox…I’ve never seen this before.
Here’s the code:
.sidebar-ads {
float: left;
width: 328px;
margin: 0px;
padding: 10px;
}
.sidebar-ads img {
border: 2px solid #F5F5F5;
margin: 0px 5px 5px 0px;
padding: 0px;
float: left;
}
.sidebar-ads2 {
float: left;
width: 308px;
margin: 0px;
padding: 10px 20px;
}
.sidebar-ads2 p {
font-size: 13px;
line-height: 18px;
color: #FFFFFF;
margin: 8px 0px 0px 10px;
padding: 5px;
float: left;
width: 276px;
background: #990000;
font-family: "Trebuchet MS", Tahoma, "VAGRounded BT", Verdana;
font-weight: bold;
border: 1px solid #990033;
}
.sidebar-ads2 p a {
color: #F8F8F8;
text-decoration: underline;
}
.sidebar-ads2 p a:hover {
color: #FFFFCC;
text-decoration: none;
}
.sidebar-ads2 img {
border: 2px solid #F5F5F5;
margin: 0px 0px 8px 12px;
padding: 0px;
float: left;
}
.sidebar-ads2 img:hover {
border: 2px solid #CCCCCC;
margin: 0px 0px 8px 12px;
padding: 0px;
float: left;
}
.sidebar-ads2 h3 {
font-size: 18px;
line-height: 24px;
font-weight: bold;
color: #000000;
margin: 0px 0px 8px;
padding: 0px;
float: left;
width: 308px;
border-bottom: 1px solid #ededed;
}
Is there something I should be adding to ensure IE can read the css properly?