MSIE, CSS et al

@JunkMaleNov 16.2009

Whilst the initial holding page I put up was showing up perfectly fine and in accordance with instructions… The background image fails as far as I am aware on the MSIE browser the image does not display correctly.

What appears to be happening is the image will sit with the bottom half hanging from the top of the screen with a large blank space for the rest. It will also display the opposite with a large blank area above the image and only showing the top half.

It will also sit central at the top only showing 2/3rds the background.

Under about 20 other lesser known Linux based browsers and the more popular FireFox and Opera browsers and including Seamonkey, the thing shows up perfectly fine.

[CODE]body{ background-image: url(“bg_image.jpg”); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #780000; }[/CODE]

Is their any reason why MSIE would act like this with that simple CSS?

to post a comment

CSS

10 Comments(s) _↴

@opifexNov 16.2009 — #Which versions of IE are you concerned with?

And do you have the DOCTYPE declared so that IE doesn't go into quirks mode?

...and YES the answers to these questions are important!

@JunkMaleauthorNov 16.2009 — #Good question... I will have to find out what browser version, think its still MSIE 6 thats on the machine. I guess it would be a question of what it looks like in what MSIE version...

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/code]

As set by Kompozer.

I think I shall try IE Tester on the target machine to see what browser version shows up the site in what fashion and see then if it specific or general.

@opifexNov 16.2009 — #OK... IE5.5, IE6, IE7 & IE8 will all act differently.

background-attachment: fixed is buggy in different ways for each version before IE8. There are a number of hacks for each one, but the end solutions depend on the rest of the layout and what you can live with.

The best bet is to search up "ie background-attachment hacks" and start playing.

@JunkMaleauthorNov 16.2009 — #OK, Surfs UP!

@jamesbcox1980Nov 16.2009 — #

[CODE]
 body
 {
 background: url(bg_image.jpg) center center no-repeat fixed #780000;
 }
 [/CODE]

@JunkMaleauthorNov 16.2009 — #Shorthand?

MSIE I think is the problem as I am finding many articles on how it treats images where all the rest treat images in pretty much the same way. Microsoft appears to be doing its own thing, like opacity for example.

@jamesbcox1980Nov 16.2009 — #MSIE is the only browser which sticks to standards and does not try to repair mistakes in your programming. Did you try my example? It's not just shorthand. It's the proper way to denote as many properties at once for an element. Use separate properties when setting individual properties. It also removes the quotes from the URL (they're not supposed to be there.

@opifexNov 17.2009 — #MSIE is the only browser which sticks to standards... [/QUOTE]
I really don't understand this statement considering that M$ even admitted that the Trident engine has a broken box model. Not to mention the differences in rendering errors between IE versions.

Sorry to inform you that M$ didn't write the standards and are only just starting to contribute to the RFCs in the last couple of years.

@jamesbcox1980Nov 17.2009 — #I'm not saying they're all right, I'm saying they don't fix your mistakes like firefox does.

@JunkMaleauthorJan 04.2010 — #Well I spent hours writing a CSS sheet that works in Opera, Firefox but not MSIE despite putting in things that are meant to be MSIE specific like

[CODE]  border:0;
 opacity:0.9;
 alpha.opacity:90;[/CODE]

which in all browsers does render except for MSIE.

The other issue is that the overflow from the DIV is not hidden and no scroll bar is present despite it working in other browsers.

The position of the image is also off by a long way and sits above the text rather than side by side as I have float:left and float:right propert settings for those elements and alignment is top, the menu displays fine, atleast MSIE is observing that setting....

for example, the td element of the table that has the div's containing the text and a picture is (as it appears in kwrite)

[CODE]td[COLOR="DarkOrange"]#picture[/COLOR] {
 [B]opacity:[/B][COLOR="#0000ff"]0.8[/COLOR];
 [I][U][COLOR="Red"]alpha[/COLOR][/U][/I][B].opacity:[/B][COLOR="#0000ff"]80[/COLOR];
 [B]padding:[/B][COLOR="#0000ff"]5 5 5 5[/COLOR];
 [B]background:[/B] [COLOR="#0000ff"]url([/COLOR]images/black_box.gif[COLOR="#0000ff"]) center no-repeat[/COLOR];
 [B]height:[/B][COLOR="#0000ff"]450px[/COLOR];
 }[/CODE]

the div's are

[CODE]div[COLOR="#ff8c00"]#dj_pic[/COLOR] {
 [B]float:[/B][COLOR="#0000ff"]left[/COLOR];
 [B]background:[/B] [COLOR="#0000ff"]url([/COLOR]images/dj_pics/[COLOR="Gray"]~dj-name~[/COLOR]/dj.jpg[COLOR="#0000ff"]) center no-repeat[/COLOR];
 [B]width:[/B][COLOR="#0000ff"]250px[/COLOR];
 [B]height:[/B][COLOR="#0000ff"]250px[/COLOR];
 [B]margin-left:[/B][COLOR="Blue"]150px[/COLOR];
 [B]margin-top:[/B][COLOR="#0000ff"]75px[/COLOR];
 }
 div[COLOR="#ff8c00"]#dj_biog[/COLOR] {
 [B]max-height:[/B][COLOR="#0000ff"]80&#37;[/COLOR];
 [B]width:[/B][COLOR="#0000ff"]45%[/COLOR];
 [B]padding: [/B][COLOR="#0000ff"]0 0 0 0[/COLOR];
 [B]overflow:[/B][COLOR="#0000ff"]auto[/COLOR];
 [B]float:[/B][COLOR="#0000ff"]right[/COLOR];
 [B]margin-right:[/B][COLOR="#0000ff"]180px[/COLOR];
 [B]margin-top:[/B][COLOR="#0000ff"]0px[/COLOR];
 [B]text-align:[/B][COLOR="#0000ff"]left[/COLOR];
 }[/CODE]

~dj-name~ is a folder of the name of the person, in it will be a css and php/html page.

Any suggestions on what I am doing wrong or where I can improve. Does MSIE need more CSS settings to make overflow of the one div produce the desired scroll bars and what do I do to position the image so it won't move when things like text size or browser resolution is changed as that seems to be an issue too.

Also in #CSS _↴

Does CSS create html text on web pages?A: Cursor Size of text in a drop down box

Success!

Help @JunkMale spread the word by sharing this article on Twitter...

Tweet This

MSIE, CSS et al

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

MSIE, CSS et al

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴