• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 300
  • Last Modified:

CSS Problems IE

Dear Experts,

Our current site: www.goldwynacademy.com has some issues with the internet explorer.

- First of all the grey bar below the slideshow seems to be to big on the right side in IE while it works just fine in Firefox.

- Also the load time seems to be way longer than in Firefox.

- A click on the button "Mission" doesn't black out the background like it should.

- The borders on the slideshow should be round


I guess the problem lies somewhere in the CSS which the IE interprets wrong, any suggestion what could cause this different problems?
craftyslide.css
custom.css
demo.css
skitter.css
style.css
tinyscrollbar.css
0
goldwynexe
Asked:
goldwynexe
3 Solutions
 
Ray PaseurCommented:
Take a step back from what you're doing and correct the markup.  It's almost always impossible to get CSS to behave correctly, cross-browser, with this many errors.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.goldwynacademy.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

You might want to adopt the HTML5 doctype, too.
0
 
COBOLdinosaurCommented:
I agree with Ray especially on the DOCTYPE.  Even after you fix the errors, the weak doctype is going to put IE in quirksmode and you have very little chance of getting anything close to cross-browser compatibility.

Even after you get it perfect there may still be differences IE9 will be pretty close, but anything prior to IE9 are lacking in support for current standards.

Cd&
0
 
Slick812Commented:
hello   goldwynexe, , I.E. and the newer css (CSS3) are not a good mix, if the I.E. version is less than 10, although I.E. 9 does attempt to support a few of the newer css like  border-radius  . There are some "javascript" hacks to try and get "rounded corners" in IE 7 and 8, but since 7 and 8 do not have round corners css, then the users usually will not miss or notice that there are no round corners, so I for one, never try and make the IE 7 and 8 do any of the newer css3.
I looked at a couple of the CSS files as "demo.css" and "skitter.css", and the css there is inconsistent, , some of the css call like this with ONE line -
border-radius:10px;

and other places in the SAME css call this with 3 lines -
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

This would not cause or prevent your problem of no rounded corners in IE, I am just saying that the CSS should be consistent, but not some thing you should try and do.

and NO IE related changes or hacks for older IE browsers that I could see.

As to your problem - "A click on the button "Mission" doesn't black out the background like it should.", this is a complex mix of javascript animation, and css. there are differences in the IE and others for some things, but, to get some help on this , you best should contact the people that created the "Pop UP" add on, and see if there is some fix.

I would advise that you simplify your page display , and not have so much moving around, although animation can help a site, if you move two or more things at the same time, it is distracting and not helpful.
0
 
goldwynexeAuthor Commented:
Thank you all for your fast an helpful comments. I'll get behind the website to fix all html errors and will definitely look into the new doctype!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now