CSS bug in internet explorer?

DrToxic · 25 Jul 2011

EDIT: I know, the source code is messy....but im going to clean it up when im finished.

Okay, using the same piece of code for each of the four pictures attached, why am I getting one really odd result?

source files attached as zip

Top Left - Internet Explorer
bottom left - opera
top right - opera
bottom right - internet explorer

What I want, is everything to be compatible in internet explorer as well as Opera.

**cluberti** · 25 Jul 2011

The reason you've got issues with the first badlands page is because IE is rendering it in quirks rather than IE9 standards - give it a valid standards (not QUIRKS) doctype, and the page renders properly:

IE will render QUIRKS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

IE will render STANDARDS/STRICT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Looking into the second page, you've omitted the value 'border="0"' in your img src tag, hence IE draws a border around the images.

Note that neither of these pages validate, so you have some cleanup to do (which it seems you already know). IE8 and 9 are FAR less forgiving than, say, Opera, Firefox, Chrome, or Safari when you put in incorrect markup. Kind of ironic that this is the sort of thing that IE used to get flack for, but memories are short.

DrToxic · 25 Jul 2011

cluberti said:

The reason you've got issues with the first badlands page is because IE is rendering it in quirks rather than IE9 standards - give it a valid standards (not QUIRKS) doctype, and the page renders properly:

IE will render QUIRKS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

IE will render STANDARDS/STRICT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Looking into the second page, you've omitted the value 'border="0"' in your img src tag, hence IE draws a border around the images.

Note that neither of these pages validate, so you have some cleanup to do (which it seems you already know). IE8 and 9 are FAR less forgiving than, say, Opera, Firefox, Chrome, or Safari when you put in incorrect markup. Kind of ironic that this is the sort of thing that IE used to get flack for, but memories are short.

Useful information. Thank you. I will try this next time i'm on my laptop.

Yes, I have quite a bit of cleaning up to do.. I am surprised that you made sense of my mess... :P

Yes, it seems that IE in general just hate being alive and will pick at everything possible...

I Love opera for that.. (not advertising here), Opera just .. Works.

**cluberti** · 25 Jul 2011

Yes, but it encourages bad code. The kind of thing IE used to do and get lambasted for it, it now doesn't do - and gets crap for not doing it now

.

DrToxic · 26 Jul 2011

cluberti said:

The reason you've got issues with the first badlands page is because IE is rendering it in quirks rather than IE9 standards - give it a valid standards (not QUIRKS) doctype, and the page renders properly:

IE will render QUIRKS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

IE will render STANDARDS/STRICT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Looking into the second page, you've omitted the value 'border="0"' in your img src tag, hence IE draws a border around the images.

Note that neither of these pages validate, so you have some cleanup to do (which it seems you already know). IE8 and 9 are FAR less forgiving than, say, Opera, Firefox, Chrome, or Safari when you put in incorrect markup. Kind of ironic that this is the sort of thing that IE used to get flack for, but memories are short.

Okay, I'm on the laptop, I've tried the method you described, didn't make any difference.
What I have done, and it has worked (partly), is un-commented some style sheet for IE6. (I knew it, they only change how IE looks!!

).

Code:

<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>

Now the picture is full-screen, but doesn't stay there. (when you scroll the page, the picture moves with the text, where as I want the background image to stay on the visible screen).

Anthony · 28 Jul 2011

Do you have links to the problem pages?

DrToxic · 28 Jul 2011

Anthony said:

Do you have links to the problem pages?

download the ZIP file I uploaded in a previous post in this thread. they're the sites im having problems with.