www.webdeveloper.com
Results 1 to 11 of 11

Thread: MSIE, CSS et al

  1. #1
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131

    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.

    Code:
    body{
    background-image: url("bg_image.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #780000;
    }
    Is their any reason why MSIE would act like this with that simple CSS?

  2. #2
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    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!
    ...but stupidity is terminal.

  3. #3
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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...

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    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.

  4. #4
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    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.
    ...but stupidity is terminal.

  5. #5
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    OK, Surfs UP!

  6. #6
    Join Date
    Dec 2008
    Posts
    488
    Code:
    body
    {
        background: url(bg_image.jpg) center center no-repeat fixed #780000;
    }

  7. #7
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.

  8. #8
    Join Date
    Dec 2008
    Posts
    488
    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.

  9. #9
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    Quote Originally Posted by jamesbcox1980 View Post
    MSIE is the only browser which sticks to standards...
    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.
    ...but stupidity is terminal.

  10. #10
    Join Date
    Dec 2008
    Posts
    488
    I'm not saying they're all right, I'm saying they don't fix your mistakes like firefox does.

  11. #11
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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;
    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#picture {
      opacity:0.8;
      alpha.opacity:80;
      padding:5 5 5 5;
      background: url(images/black_box.gif) center no-repeat;
      height:450px;
    }
    the div's are
    Code:
    div#dj_pic {
      float:left;
      background: url(images/dj_pics/~dj-name~/dj.jpg) center no-repeat;
      width:250px;
      height:250px;
      margin-left:150px;
      margin-top:75px;
    }
    div#dj_biog {
      max-height:80&#37;;
      width:45%;
      padding: 0 0 0 0;
      overflow:auto;
      float:right;
      margin-right:180px;
      margin-top:0px;
      text-align:left;
    }
    ~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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles