ie7 issues

HTML & CSS
1

Hi

This site is under construction. It was actually a template done in tables (client provided the template). I tried to modify the code to adapt to the client’s requirements, and used divs for that.

The problem is that the pages look ok in ie8 and ie6 even. But not in ie7. I think it is a haslayout issue, but I am confused how to solve it.

Can anyone help please?

2

Hi,

It would be helpful if you told us what looks okay and what isn’t okay. I now don’t know where to look at.

3

Hi!
Below menu “Home, About us, Services, …” , there is a text area. In IE7, the background of this text area is not loading, while in IE8 and other borwsers like FF, Opera, chrome , it is loading perfectly alright.

As well as, some ending lines of text are disturbed in IE7 (in text area).

Thanks in advance

4

Hello? The div I am talking about has the class “interior_designing”. This div controls the text to the right of the main image, below the main menu.

This div has a background as well as the text needs to slide under the left image (on becoming larger than the image). It does neither in ie7.

Anyone?

5

What I would do is to give interior_designing a width (layout) and make it floating just as header_image. The background is obviously behind your header image in IE7

6

I can’t give a width to interior_designing. because then the text will remain on the right side and not float under the left mage.

Also the text bg is already moved 434px to the right. It is not behind the header_image.

7

Hi,

The problem is that interior_designg already has a layout due to the min-height and in IE7 and under an element with haslayout will form a rectangular box to the side of a floated element and the background does not slide underneath as it should.

Your background is actually 434px out to the right of that element which is why it doesn’t show.

A quick fix would be to remove the min-height and the background will show.


.interior_designing {
    background:#45524e url(http://swindondecorating.com/images/interior-designing-bg3.gif) 434px 0 no-repeat;
    border-right:7px solid #2f3834;
    padding-bottom:10px;
}

A more robust fix may be to float that block instead with a correct width as suggested by donboe and then adjust the background image position (and remember to clear floats etc).

8

I can’t believe it was that simple! Everything fits perfectly now. Thanks a lot.

I only removed the min-height though. Because as I said to donboe, if you look here, if I give interior_designing a width, the text will form a long right column leaving empty space below the header_image.