Ok, first post on here but I'm pretty good with CSS... or so I thought. I've got four DIVs sitting in a float next to eachother. I'm using some jQuery to get four images inside each DIV to cycle through. In Firefox, Safari, and IE8 evertying looks fine - but in IE7 the images are not recognizing the 10px float that should be at the top. the site is derrickdesign.net (I'm not allowed to post live links yet) The CSS is like this: #fourImages{} #fourImageWrap{font-weight:bold; color:#666;} .showcase{float:left; background:url(../images/frontImgCase.png) center top no-repeat; width:212px; height:308px; padding:10px 0px 0px 13px;} .showcase div{text-align:right; padding:255px 10px 0px 0px;} .slider img { display: none } .first { display: block } HTML: And the HTML is like this: <div id="fourImages"> <div id="fourImageWrap"> <div class="showcase"><a class="slider" href="index.php?option=com_content&view=category&layout=blog&id=20&Itemid=2"> <img class="first" src="templates/derrickdesign/images/inhomerenovation.jpg" border="0" alt="Renovate Your Home" width="200" height="235" /> <img src="templates/derrickdesign/images/inhomerenovation2.jpg" border="0" alt="Renovate Your Home" width="200" height="235" /> <img src="templates/derrickdesign/images/inhomerenovation3.jpg" border="0" alt="Renovate Your Home" width="200" height="235" /> <img src="templates/derrickdesign/images/inhomerenovation4.jpg" border="0" alt="Renovate Your Home" width="200" height="235" /></a> <div><a href="index.php?option=com_content&view=category&layout=blog&id=20&Itemid=2"><img src="templates/derrickdesign/images/greenArrow.png" border="0" alt="greenArrow" /> In Home Renovations</a></div> </div> ... HTML: You can pull it all up on the page obviously... but anyway - help
With things like that it is usually a lot better to position it with the margin attribute, rather than the padding attribute. Also, none of your floats are cleared. Try setting overflow hidden onto any wrappers that contain floats and see where that gets you.