Solved

CSS Problems IE

Posted on 2013-06-03
4
286 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 109

Assisted Solution

by:Ray Paseur
Ray Paseur earned 166 total points
ID: 39215750
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
ID: 39216788
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
ID: 39216927
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
ID: 39218437
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
HTML5 frame 5 25
Presenting past 6 months bug 7 26
Add email address from a web page to outlook 2010 contacts ? 8 22
Else condition 9 16
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

786 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