Solved

CSS Problems IE

Posted on 2013-06-03
4
283 Views
Last Modified: 2013-06-04
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
Comment
Question by:goldwynexe
4 Comments
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 166 total points
Comment Utility
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 167 total points
Comment Utility
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
 
LVL 33

Accepted Solution

by:
Slick812 earned 167 total points
Comment Utility
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
 

Author Comment

by:goldwynexe
Comment Utility
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now