Minor IE7 fix

[johnsmith153]

http://page-test.co.uk/layout.html

The above is from another forum and works great in decent browsers, but there's a problem in IE7. I cant seem to find a fix for IE7.

The problem is that some of the boxes don't align up perfectly like they would in a modern browser. Testing on any modern browser and IE7 would show the obvious problem.

I don't want to use JS to fix it. It must be pure CSS.

It works fine in IE8.

Btw. I have no care for IE7, but this is to be used as a page layout, and I think that should be supported as a minimum - even if things aren't pixel perfect.

[fireplace_tea]

Could you post your code? And take screen shots of the good layout and the misbehaving layout? Thanks.

[johnsmith153]

Thanks, but can't you just view source on the link I provided?

I've attached a screenshot of how it looks in IE7. View the link in any other browser (not IE6) to see how it should look.

[fireplace_tea]

Thanks for posting a screenshot. After looking through your code, here are some things to look into:

(1) does IE 7 support multiple class names per class? You have up to three. For example: <div class="box half row">1/2</div>

(2) does IE 7 support .className + elementName selector? I know IE 7 supports elementName + elementName as long as you have a doctype.

(3) does IE 7 support long decimal numbers? You have 74.5000% for example.

(4) IE 7 might require you to clear: both, right after your <div class="box onefourth row"> div element.

Check out this article for info about what selectors IE7 supports:
http://www.impressivewebs.com/browse...ss3-selectors/

[coothead]

Hi there johnsmith153,

how do you expect us to test code in IE7.

I have two test computers, the old one has Windows XP and IE8, the new Windows 7 and IE9.

To test in IE7 I would need to uninstall IE8, which would probably leave me with IE6, and then install updates to get IE7.

You say that the code works OK in IE8, so why worry about those who could not be bothered to update their browsers.

coothead

[bigcasey123]

You could add this

 <!--[if IE 7 ]> <link href="ie7.css" rel="stylesheet" type="text/css" /> <![endif]-->

to the header (under the meta tags) then make a ie7.css and mess around with it. It will only change stuff in IE7 and not other browsers.

[johnsmith153]

Originally Posted by coothead

Hi there johnsmith153,

how do you expect us to test code in IE7.

I have two test computers, the old one has Windows XP and IE8, the new Windows 7 and IE9.

To test in IE7 I would need to uninstall IE8, which would probably leave me with IE6, and then install updates to get IE7.

coothead

You are joking right? I'm an amateur, but even I would never say something like this.

[coothead]

Hi there johnsmith153,

You are joking right? I'm an amateur, but even I would never say something like this.

Wrong.

I am also an amateur.

Why would you not say something like this.

I would guess that, like me, many professionals have long since lost IE7 from their computers.

Some professionals may not even have Windows XP from which to lose IE7.

coothead

[johnsmith153]

Originally Posted by coothead

Hi there johnsmith153,


Wrong.

I am also an amateur.

Why would you not say something like this.

I would guess that, like me, many professionals have long since lost IE7 from their computers.

Some professionals may not even have Windows XP from which to lose IE7.

coothead

http://blogs.msdn.com/b/thebeebs/arc...ons-of-ie.aspx

...or Google "test IE 7".

...and remember, it was just a request to test one layout, not a thorough test to get a website ready for launch (before you tell me the obvious).

[coothead]

Hi there johnsmith153,

thank you very much for the informative link, I was not aware of that browser facility in IE9.

The least I could do in return, was to find a possible solution for IE7 for you.

Check out the attachment, to view the result of my endeavours.

coothead

Edit: I think that IE7 has a problem with partial percentages, as you will discover on horizontal window re-sizing.

[johnsmith153]

Thanks,

The only thing is the need to have an ID on each row, but I guess there's no other option.

I was hoping for a couple of lines of CSS to fix it, but I suppose that would be too easy.

Thanks for looking at this though. Another forum hasn't found a solution either, although I don't know if that's because there isn;t one, or because of their lack of care for IE7!

Thanks again.

[coothead]

Hi there johnsmith153,

the problem with IE7 is the "next sibling" selector - "+".

Static
The browser doesn’t correctly update the styles of the original element when another element is placed before it.

Hence the need for the "id" usage for that browser.

Source:-

• http://www.quirksmode.org/css/contents.html

coothead