Website in IE is completely messed up. [Archive]

Lestatt

11-19-2012, 10:15 AM

Hello guys.
My problem is: my web page looks fine in every browser except IE9 (and every previous version too I guess).
Question: What can I do to make my site look fine even in IE? Conditional comments? Never used them before.

Here link: http://gasperowicz.pl/start.php

Beverleyh

11-19-2012, 10:52 AM

Yes - conditional comments and dedicated stylesheets are the way to "damage-control" IE's differences.
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Remeber that the order of your stylesheets is critical. in the head section you should first link to your master stylesheet (the one that suits Firefox and more compliant browsers), then come down the ranks and maybe have one overall IE stylesheet (to fix the majority of IE glithces), and then if you need to iron out the remaining kinks in IE7/6, have a stylesheet for those too.

Something like this;

<link rel="stylesheet" type="text/css" href="styles.css" />

Beverleyh

11-19-2012, 10:55 AM

BTW - You might find IETester useful for trouble shooting older versions of IE: http://www.my-debugbar.com/wiki/IETester/HomePage

keyboard

11-19-2012, 11:17 AM

Just a quick note, the website also malfunctions slightly in Opera... (latest version)
The orange bar is in the wrong place.

You shouldn't have to use conditional statements to fix it... (except in some cases)
Most of the time you just need to program it in a slightly different way, or add in a different rule.
It's pretty late here so I can't take a good look at it...

Lestatt

11-20-2012, 08:27 AM

Thank you guys for your answers.

keyboard1333, thanks for mentioning that, didn't thought Opera would render elements in other way than Firefox/Chrome. But first I must get rid of IE (;

molendijk

11-20-2012, 08:53 PM

The first thing I noticed about your site is that the page doesn't have a valid doctype. You always should have one. Try to put <!doctype html> on top (before the html-tag), and see what happens.
Arie.

Deadweight

11-21-2012, 01:29 AM

Ah i usually have this problem using DIV TABLES in ie. The only way i found to fix this problem is actually making something like this:


<link rel="stylesheet" type="text/css" href="css/main.css" />

gt IE 5.5 means greater then.
In that stylesheet ive the objects that contain the
display: table-cell and added a float left into one style like this:

.left, .right {
float:left;
}

For me that fixed my problem.
Let me know if that doesnt work.

Reason: IE doesnt not read div tables

Lestatt

11-21-2012, 10:44 AM

The first thing I noticed about your site is that the page doesn't have a valid doctype. You always should have one. Try to put <!doctype html> on top (before the html-tag), and see what happens.
Arie.
It does have valid one, since I'm converting page to HTML5.

Lestatt

11-21-2012, 10:48 AM

Ah i usually have this problem using DIV TABLES in ie. The only way i found to fix this problem is actually making something like this:


<link rel="stylesheet" type="text/css" href="css/main.css" />

gt IE 5.5 means greater then.
In that stylesheet ive the objects that contain the
display: table-cell and added a float left into one style like this:

.left, .right {
float:left;
}

For me that fixed my problem.
Let me know if that doesnt work.

Reason: IE doesnt not read div tables
I'm not using any display: table-cell in my css.

Deadweight

11-21-2012, 09:04 PM

Crap I'm in South Carolina until Sunday. If you can wait until that long I can go thru your code more extensively and actually see what's going on. To me it seems like a float issue but I could be wrong. Ill check once I get back unless you fix it before then

Lestatt

11-21-2012, 10:28 PM

Crap I'm in South Carolina until Sunday. If you can wait until that long I can go thru your code more extensively and actually see what's going on. To me it seems like a float issue but I could be wrong. Ill check once I get back unless you fix it before then
It's not very urgent, but thank you, I appreciate that.

janvl

12-17-2012, 11:45 AM

Hi,

Put the following metetag as the first one behind the head-tag then IE9 will look like IE8 and show the site like it was ment.

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >

Kind regards,
Jan

jscheuer1

12-17-2012, 03:13 PM

Using a meta tag for IE will not help in this case because the page looks poorly in IE 8 as well. There are at least two problems with the page, probably more. It doesn't have a valid DOCTYPE. It does, but not as the first thing. The first thing on the page is an opening <html> tag:

<html>
<head>
</head>
<body>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35881828-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script><!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="maszyny . . .

As you can see it has two of those, that's invalid. So validating the page would be a good idea:

http://validator.w3.org/

The other problem I see with IE is the use of text-align: center for the body in the ie.css stylesheet. This can actually cause more problems than it fixes. Use margin: 0 auto; to center individual elements that have width, and text-align center only for individual elements containing text that you want centered. The margin: 0 auto; won't work in IE however, until you have a valid DOCTYPE as the very first thing in the page's source code.