Hi - my site at www.toolhire2day.co.uk seems to be suffering the curse of IE- Cross Browser again! Looking at this page http://www.toolhire2day.co.uk/all-tool-hire in IE 8, Firefox, Opera, Safari looks ok - the text in the boxes sit niceley where they are supposed to do - but when viewing in IE6 and 7 (IE TEster) the text drops out of the box - arrgggh!

<div id="hirepanels">
<ul class="toolhirepanels">
<li class="woodworking" onclick="top.location='all-tool-hire/woodworking-tools'" style='cursor: pointer;'>
<h3><a href="all-tool-hire/woodworking-tools">Hire Woodworking Equipment</a></h3>
<div class="hire-tool-img"><a href="all-tool-hire/woodworking-tools" class="no-arrow"><img src="/wp-content/uploads/2009/10/hire-woodworking-tn.jpg" alt="Cross Cut Bench Saw" /></a></div>
<p>All your Woodworking and Joinery related tools for hire from Bench Saws to Clamps and Cramps to Planing and Sanding Tools</p>
<p class="lnk"><a href="all-tool-hire/woodworking-tools">Hire Woodworking Tools</a></p>
</li>

- this is the HTML for the boxes - and this is the custom CSS:
/* =HOMEPAGE PANELS
===========================================*/
#hirepanels ul.toolhirepanels {
margin-left: -8px;
font-size:11px;
display: inline;
float: left;
}
#hirepanels ul.toolhirepanels h3 {
/*display: none;*/
position: absolute;
left: -999px;
height: 1px;
width: 1px;
}
#hirepanels ul.toolhirepanels li {
float: left;
width: 300px;
height: 90px;
display: inline;
margin-left: 8px;
margin-bottom: 6px;
padding-left: 10px;
padding-top: 60px;
line-height: normal !important;
}
#hirepanels ul.toolhirepanels li p {
width: 180px;
margin-bottom: 3px !important;
margin-top: -5px;
}
#hirepanels ul.toolhirepanels li p.lnk {
margin-top: 10px;
}
#hirepanels ul.toolhirepanels a {
text-decoration: none;
font-weight: bold;
color: #ff7300;
padding-left: 12px;
background: url(/wp-content/themes/webdoggy/styles/webdoggy/bullet-arrow.jpg) no-repeat left center;
}
#hirepanels ul.toolhirepanels a:hover {
color: #000;
text-decoration: underline;
}
#hirepanels .hire-tool-img {float: right; margin-left:0px; padding-right: 18px;}
#hirepanels a.no-arrow:link {background:none !important;}
#hirepanels a.no-arrow:visited {background:none !important;}
/*--Start of Boxes ==================*/
ul.toolhirepanels li.woodworking {
background: url(http://www.toolhire2day.co.uk/wp-con...ng-joinery.jpg) no-repeat;
}


Dont you just love Internet explorer! - Just wondering if anyone can put me out of my misery

After looking a bit further into this - it appears that this might be part of the problem:
#hirepanels ul.toolhirepanels li {
float: left;
width: 300px;
height: 90px;
display: inline;
margin-left: 8px;
margin-bottom: 6px;
padding-left: 10px;
padding-top: 60px;
line-height: normal !important;
}

but if i change it then the box collapses - could sombody point out what i have done wrong here please - it's interesting that newer browsers display this ok - but i am completley lost on how to fix this! Any help would be appreciated - it took me a while to figure out this whole box thing and now my hard work has come crashing around my ears and the more i try to fix it the worse i mess it up!

Looks as though you have fixed it, I can not seem to find the problem.

But a good way to fix certain things in IE browsers is to use conditional comments:

<!--[if lte IE 7]><style type="text/css">Your styles for IE versions less then or equal to IE7</style><![endif]-->

so what are you going to do about this?

yes thanks i managed to fix it - the problem was something to do with this div :


<div class="hire-tool-img"><a href="all-tool-hire/woodworking-tools" class="no-arrow"><img src="/wp-content/uploads/2009/10/hire-woodworking-tn.jpg" alt="Cross Cut Bench Saw" /></a></div>

when i took that out and made the image part of the background it behaved itself. For some reason in IE 6 /7 - the image (in the div) pushed the content down - i wonder if it could have been something to do with that double margin bug - but i though that didn't affect IE7?

But i wasnt aware i had set out rulles for a margin in :
#hirepanels .hire-tool-img {float: right; margin-left:0px; padding-right: 18px;}

Never mind its fixed now and i can stop pulling whats left of my hair out.

could have been something to do with that double margin bug - but i though that didn't affect IE7?

That's a correct assumption, it wouldn't have affected IE7.