Solved

CSS Problems IE

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

679 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