Solved

CSS Problems IE

Posted on 2013-06-03
4
292 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 110

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 34

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

623 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