Hey just making a website at work and I have an image on my page that is appearing totally wrong compared to all the other images. (It is the pizza toasties image) The images load fine in firefox but then just this one is wrong in internet explorer, does anyone have any idea whats wrong with it? could be something really simple.

 

Any help would be much appreciated. Thank you

 

This is a link to the page: http://www.alanmturner.co.uk/goodwithfood/year7.html

the trick to diagnose would be to add a background-color to the .recipie div, the recipie box does not seem to be filling the full width on that row, try a clear float between recipies or define a width for the .recipie class as you site is fixed width anyway.

The tosties image is on the left of the others in Firefox as well as IE7.

 

The reason is that the height of the div class="recipe" is not stated and for all the other divs the text height is enough to create enough height for the image to go to the right but with the toasties div the image for the chowder above is projecting down below the div which blocks the position for the toasties image (don't ask me why because all the divs seem to have the same code).

 

Edit the style to add a background-color temporarily and you will see what is causing the problem:-

.recipe { background-color: #ccc;

border-left: #FF6600 dotted 2px;

padding-left: 5px;

margin: 7px;

}

 

Afterwards add a height of 185px which is a bit more than the height of all the images:-

.recipe { background-color: #ccc; height: 185px;

border-left: #FF6600 dotted 2px;

padding-left: 5px;

margin: 7px;

}

 

and the toasties image will have enough space on the right.

 

Edit: I didn't see the reply above but my answer is much the same. I didn't need to clear float.

correct but, better off asigning a width in css so as to accomodate user selected font sizes (so the box can grow). this gives the same desired effect.

hey just did the width of the div and it worked, thank you very much. Is it best practice to give every div i create a fixed width?

deffinatley not, only where required for your desired effects, the least you can limit sizes the better

I've just edited the height to 185px as I saw that Firefox didn't like 180px. In fact 183px is just enough for Firefox (IE7 was OK with 180px).

 

I checked out the width method using:-

.recipe { width: 750px;

border-left: #FF6600 dotted 2px;

padding-left: 5px;

margin: 7px;

}

 

instead of a height which worked in IE7 but not in Firefox. For Firefox you need to add clear: both as well:-

.recipe { clear: both; background-color: #ccc; width: 750px;

border-left: #FF6600 dotted 2px;

padding-left: 5px;

margin: 7px;

}