Whats wrong with IE?

Forum Moderators: not2easy

Message Too Old, No Replies

Whats wrong with IE?

Website is ok in FF but not in IE. Can't find the error.

gombi

4:24 pm on Jan 6, 2010 (gmt 0)

I'm new in css and html. My site works well under ff but not under IE (including v8).
I'm not sure whats wrong. Please could anybody give me a hint?

See the screen shots:

IE
<snip>

Firefox
<snip>

I think the problem is my html, but I'm not sure.

Thanx a lot!

No URL's please, see TOS [webmasterworld.com]

[edited by: limbo at 6:16 pm (utc) on Jan. 6, 2010]

KenB

4:31 pm on Jan 6, 2010 (gmt 0)

Without knowing more, my first advice would be if you haven't done it already, make sure your code validates to W3C HTML and CSS specifications. Next make sure your DOCTYPE is the very first thing on the page. IE doesn't like it when there are any characters of any sort before the DOCTYPE tag.

gombi

4:42 pm on Jan 6, 2010 (gmt 0)

Here are the first lines of the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"><title>example.com</title>

I did the validation before and there are a few errors but I think thats not the problem.
Thank you very much for your quick answer!

[edited by: limbo at 6:17 pm (utc) on Jan. 6, 2010]

StoutFiles

5:09 pm on Jan 6, 2010 (gmt 0)

You will likely need to cut out parts of your site and test code piece by piece till you find the problem. When building in the future I suggest you periodically check how your site is displaying in multiple browsers.

gombi

6:04 pm on Jan 6, 2010 (gmt 0)

For example why is the header graphic not displayed whith the IE?

Thats the css:

#header {

background: url(images/Unbenannt.jpg) repeat-x left top;

margin: 0px auto;

width: 800px;
height: 190px;

padding: 0px 0px 0px 10px;

/**-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;*/

}

#headerpic {
background: url(images/header_grafik.png)no-repeat top;

position:relative; left:25px; top:13px;
width: 744px;
height: 187px;

}

And here the part of the html:

</div>

Is that a position problem?

Thanx

rocknbil

7:36 pm on Jan 6, 2010 (gmt 0)

Look at this,

then this.

background: url(images/Unbenannt.jpg) repeat-x left top;
background: url(images/header_grafik.png)no-repeat top;

CSS loads images relative to the css file, not the document. So depending on which style sheet this is, it is expecting an images directory in /css, /css/dropdown, or css/dropdown/themes/default.

These are all fixed by putting a leading slash for all references, this means "start at the domain root."

Now, no matter where your documents are or your css/images are, it will always find them.

The down side is this won't work on your local computer, you have to do what I call "toothpic syndrome:"

background: url(../../images/Unbenannt.jpg) repeat-x left top;

It was probably working in one instance or another because the images or style sheet were cached.

gombi

8:22 pm on Jan 6, 2010 (gmt 0)

Thank you very much!

I found the problem!

For example:

background: url(images/footer.jpg) repeat-x;

If there is no space between ")" and "repeat-x;", it doesn't work in IE.
Now I put spaces after all url's and it worked!

I hate IE!

KenB

8:25 pm on Jan 6, 2010 (gmt 0)

I did the validation before and there are a few errors but I think thats not the problem.

Don't be too quick to dismiss validation errors. They can throw IE into quirks mode really quickly, which can have all kinds of unexpected results. It is always best to eliminate all validation errors first and then start isolating out other issues. It is the only way to be sure.

gombi

8:40 pm on Jan 6, 2010 (gmt 0)

Now I'm fine and I have no validation errors but another question.

In FF when I click on a element for example my header or the content box or the footer, I get a blinking courser on the left side of the element. (not in IE)
Why that?