MSIE, CSS et al
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.
Is their any reason why MSIE would act like this with that simple CSS?
background-position: center center;
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!
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...
As set by Kompozer.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
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.
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.
background: url(bg_image.jpg) center center no-repeat fixed #780000;
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.
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.
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.
Originally Posted by jamesbcox1980
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.
I'm not saying they're all right, I'm saying they don't fix your mistakes like firefox does.
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
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)
the div's are
padding:5 5 5 5;
background: url(images/black_box.gif) center no-repeat;
~dj-name~ is a folder of the name of the person, in it will be a css and php/html page.
background: url(images/dj_pics/~dj-name~/dj.jpg) center no-repeat;
padding: 0 0 0 0;
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)