IE 7 sucks!!

[Ruth.Adele]

So i've made this website, and it looks great on every browser except IE7.
This is the page where it breaks :

http://mist.net.au/collectionsmisaki.html

Any ideas on how to make it work in IE7 ???
Kinda urgent cos I'm getting my butt kicked my the client..

thanks in advance!

 

[R and S Writing]

I have no idea how to fix the IE7 problem, but the site loads very slowly in Google Chrome.

 

[leroy30]

Hi Ruth.

IE7 has many issues with standards compliance. It's common knowledge amongst web designers. Basically if it works on IE7 then it'll break on everything else and if it works on everything else then it will break on IE7.

Luckily we can get around this. Find out what style is causing the issue (usually position:relatives; floats; text-align:center or widths/heights having issues). Once you have worked out the IE7 fix then have a look at this tutorial:

http://virtuelvis.com/archives/2004/02/css-ie-only

Anyhow you'll probably find it's because your <div class="container"> has no closing div. It's not really IE7 it's just that IE7 is less tolerant of this mistake

Found it pretty easy using internet explorer's development tools.

 

[PixelPusher]

Ruth,

You have unneeded styles and elements in several sections of that vertical scroller. My guess is those could be causing some of your issues with IE.

Here what I saw at a glance:

div#vertical_carousel

• remove position relative
• remove height (in elements that follow the natural flow of the doc, their height will be determined by the content within)
• change padding to margins (margins are used to space an element externally, padding is used to pad the contents within)

div.container

• delete it, not needed

ul

• lists act as a block level element just like a div so there is not need to wrap it here.
• remove left zero
• remove top zero
• remove position relative
• change height from 10K (wow) to 400px
• add overflow hidden

FYI, you also have a script error on this page.

Other suggestions:

The image you are using as a background for the left panel (backgroundcollections.gif) is a solid color with a drop shadow.

You could make that a background color (light grey) and use CSS3 for the drop shadow (box-shadow style).

That being said, I am not sure you even need the shadow. The whole page is flat other than that panel?

 

[Ruth.Adele]

thanks guys

I'm very new to this (about 2-3 months), so i'm kinda learning as i go.. i just started open university, studying web design, so i'm sure in a year or so i'l look back on this site and wonder what the hell i was doing!!

i will have a look at those things you mentioned PixelPusher.
and yeah, i know there are script errors, but it was a free script i found online, and i don't know how to fix the errors...

also, leroy30 - where did you see that there was no closing div? i had a look through it and i can't find it.

Thanks everyone for your comments, i REALLY appreciate it!!
Ruth.

 

[Ruth.Adele]

PixelPusher: i'm in IE7 at the moment, trying to fix the page. most of your suggestions worked (well, didn't have any effect whatsoever, so they were unnecessary css rules) so thanks heaps!!!

However, in the <ul> when i get rid of the position:relative, it fixes the way it looks, but stops the carousel from working...
and changing the height to 400px and overflow to hidden, moves the visible pictures to the bottom of the list, and half way up the page! (kinda the opposite of what it was doing before.. lol) and doesnt work at all

So i'm thinking that the script i am using needs the css to have position:relative for it to look right and for it to work.. unless there is something else other than this that i haven't considered...

I hope its not something so simple that i'll need to smack myself on the head for not realizing........

 

[Ruth.Adele]

OK, so from what i can figure out, IE 7 is giving taking height from #vertical_carousel UL instead of #vertical_carousel .container. (container is set to 400px high, and UL is set to 'unlimited' - its seems to me that this is what allows the carousel to work, and the position must be relative in order for it to scroll through)

So i guess the question is - how do i make IE7 take the height from #vertical_carousel .container ???

Any ideas or thoughts as to whether i am right or wrong?

Thanks,
Ruth.

 

[Ruth.Adele]

Well after much stuffing around, it turns out that the javascript i'm using doesnt work in IE7 when it is vertical. (i used a free 'prototype' that i found on the net, and stupidly didnt test if it would work in all browsers...)

So i'm back to square one, looking for a new carousel that will work vertically..
Thanks everyone for your help.

EDIT: New carousel now done, using flash instead. seems to be working in all browsers

 

[aracaris]

I have no idea how to fix the IE7 problem, but the site loads very slowly in Google Chrome.

Odd, but it does load slow in Chrome for me as well, though not too slow in my opinion. In FF however it loaded quite fast, and I usually find FF to be pretty much the slowest browser (I still like it despite that). I wonder why.