Please help with IE7 problems

[godsteruk]

Hi there.

I'm in deperate need with some help getting my website off the ground. This is something i've been developing between project, so i'm afraid the code could be a little dirty.

I have put this live at: <snip> and whilst it redners fine in IE8 and Firefox, i'm getting a number of problems when displaying using IE7.

The two main issues i'm having are:

1. On the homepage, the centre box is shifting down the screen. I have tried all cominations of floats, but cannot seem to figure out why its doing this and why only in IE7?

2. On both the homepage and projects page, I have some containers (with blue borders) that feature image links. When displayed through IE7 these images have dissapeared and you are just left with the black container. IE8 and firefox show the image links as expected.

You can access the style sheet at: <snip>

Please help, i'm tearing my hair out here and cannot dismiss that a share of my potential visitors would still be using IE7.

Many thanks.

[edited by: swa66 at 1:21 pm (utc) on Oct. 22, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

[BeeDeeDubbleU]

I would guess that a very significant share of your visitors are still using IE7. The majority of my IE website visitors are still using it.

These problems are generally something to do with the width of a column. Try shaving a couple of pixels off the columns width of the columns or the adjacent columns.

[Godster]

Thanks for that. I've managed to resolve my layout problem to a degree. It was something to do with me adding left padding to the central column, which was adjacent to my floated navigation.

Does anyone have any take on why my image links, that sit within floated containers might not be displaying in IE7, when they are in IE8 and Firefox?

I have tried changing the image type from jpeg to png, tried giving them a realtive position etc. Still cant figure this one out?

I know the pathways to be correct as I am using css background images on other elements of the page and they display fine....most bizzare!

[swa66]

IE7 has a known bug that causes it to forget to draw the background (happens on solid color backgrounds as well).
The solution I've used is to throw "position: relative;" at it and/or give it hasLayout (zoom:1;).

[Godster]

Hi swa66.

Does this bug still apply where the background colour for the container is black, then over the top of that i'm insreting an image link?

I beleive I tried using position: relative to no success. How would I go about implementing hasLayout as mentioned, within my style sheet?

Code is as follows:

HTML:

<div id="features">
<div class="feature1"><a href="http://www.example.co.uk"></a><p>example.co.uk<br />
<span>Specifics removed</span></p></div>
</div>

CSS:

#features {
width: 900px;
margin: 0 auto;
margin-bottom: 275px;
}
.feature1{
float:left;
height: 175px;
width: 275px;
border: 4px solid #26ace2;
background-color: #000;
padding: 3px;
margin-left:1%;
}

Many thanks for your help. I'm determined to crack this...with some assistance of course :)

[edited by: swa66 at 11:17 am (utc) on Oct. 23, 2009]
[edit reason] No URLs, no specifics, PLEASE! [/edit]

[swa66]

over the top of that i'm insreting an image link?

What do you mean ?

In the code you posted I see no image at all, pretty sure that there is no image going to show up that way :) .

[Godster]

Sorry, im being a wally and have missed a section of the code.

CSS:

#features {
width: 900px;
margin: 0 auto;
margin-bottom: 275px;
}
.feature1{
float:left;
height: 175px;
width: 275px;
border: 4px solid #26ace2;
background-color: #000;
padding: 3px;
margin-left:1%;
}
.feature1 p {
margin-top:170px;
font-size:200%;
font-family: 'Calibri', Arial;
}
.feature1 span {
color:#B8B4A5;
display:block;
font-family: 'Calibri', Arial;
font-size:65%;
text-shadow:0 0 0 #3E3A37;
}
.feature1 a {
background-image: url(../Images/kjl_example_grey.png);
background-repeat: no-repeat;
background-position: top left;
padding-left: 275px;
padding-bottom: 175px;
}
.feature1 a:hover {
background-image: url(../Images/kjl_example.png);
background-repeat: no-repeat;
background-position: top left;
padding-left: 275px;
padding-bottom: 175px;
}

This is repeated for features 2 and 3 respectively.

As you will see, i'm attempting to add the image link using the class .feature1 a {}

[Godster]

Managed to get images to show by adding zoom: 1 to the containing element.

Problems I'm having now are more around alignment. There seems to be space added from somewhere between the image and the downed link/text underneath?

Also, I'm having strange top alignment issues with leftnav, boxlarge and rightnav...even though they have exactly the same top margin.

Please help.

[Godster]

Any suggestions anyone? Hair is depleting rapidly! I can post some more of the code if that would help. I did put a section of it up previously, but it would appear to have been removed.