Catch-22 With Crappy IE

Get Started
1

Hi,

I have an area on a page which I’m really pleased with. In the latest version of IE and Firefox it looks fine but in older versions of IE and in compatability test it places an annoying gap at last DIV area. I have tried a number of ways to deal with it seems to be Catch-22. If works in the new IE and it doesn’t working the older IE and vice versa.

Does anyone have any suggestions on what I can do please?

<div id="innercellright">
<div id="innercellrightimageleft">
<a href="/products/extendingdiningtable/extending-dining" rel="nofollow"><img src="images/extendingdiningtablehome.png" alt="Extending Dining Tables" /></a>
</div>
<div id="innercellrighttitleleft">
<a href="/products/extendingdiningtable/extending-dining" rel="nofollow" class='furnitureguidelink'>Wonderful Extending Dining Tables
</div>
</div>
<div id="innercellright">
<div id="innercellrightimageright">
<a href="/products/computerdesks/computer-desk" rel="nofollow"><img src="images/computerdeskshome.png" alt="Computer Desks" />
</div>
<div id="innercellrighttitleright">
<a href="/products/computerdesks/computer-desk" rel="nofollow" class='furnitureguidelink'>Quality Computer Desks
</div>
</div>
2

You forgot to close the <a> tag in the last few <div>s.

Also, it might just be the image; put that to display: block and see if that helps matters.

3

Thanks,

How do I apply the display: block ?

4

Basically with img {display: block;}, although you’ll want to target just the relevant image(s) with classes or whatever.

You haven’t closed off several of your <a>s in that sample. A live link would make it easier to help.

5

Hi,

I have added the <a> to each link. Thanks for pointing that out.

With the {display: block;}, do I add to this class class=‘furnitureguidelink’ but create a new one just for the last image and call it class=‘furnitureguidelinkblock’

Its so frustrating, it works perfectly in FireFox.

6

You could do, but by golly, those class name are long! Save yourself some pain and make them shorter. Also, you don’t need to slap a class on every element. For example, if you wanted to style the image here:


<a href="/extending-dining" [COLOR="#FF0000"]class="whatever"[/COLOR]>
    <img src="extend.png" alt="Extending Dining Tables" >
</a>

rather than put a class on the image, use the class on the <a>, like so:

.whatever a { [I]... styles here ... [/I]}
7

Sorted cheers dudes.