Yet Another IE Problem

[Ravenfire]

I just finished this layout and it looks and works great in every browser other than IE. In IE the background of the main section repeats instead of remaining stationary like in the other browsers.

Here's my css for that section:

PHP Code:

#body {
        float: left;
        width: 575px;
        height: 450px;
        overflow: auto;
        background: url(main.jpg);
        color: black;
} 


I've tried setting the background image to fixed and no-repeat but instead of fixing it in IE it just messes it up in all of the other browsers as well. So far I haven't found a solution that will fix it in IE at all.

I'd appreciate any help anyone could give.

Thanks!
Angie

[John]

You can use the CSS conditional:

<!--[if IE]>
CSS for IE here
<![endif]-->

[Death Slaught]

Use the bakground-repeat property.

background-repeat:no-repeat;

Add that, and it will work.

Hope it helps, Thanks, Death

[Ravenfire]

Thanks guys! I'm still trying to figure out how to actually get it fixed in IE. Then the CSS conditional will come in handy.

I've tried no-repeat, fixed and a combination of alignment properties but adding any of these throws the image off center.

I'm thinking that since this is an e-zine instead of a professional website, I'm just going to put up a notice that not all of the layouts will work in IE.

[John]

Originally Posted by Ravenfire

I'm thinking that since this is an e-zine instead of a professional website, I'm just going to put up a notice that not all of the layouts will work in IE.

Horrible idea.

[Ravenfire]

Originally Posted by Sidewinder

Horrible idea.

I can't tell if you're being serious or making a joke (I'm terrible at internet inflection lol). Do you think it would cut back on my number of readers significantly? I just hate the idea of having to change an entire layout just because it won't work in IE. And I'll be doing one a month so I can see it really starting to get old after a while. Since this is an art related zine the design of the layout is very important to me.

I haven't given up trying to get it to work, but I still haven't been able to make it happen yet.

Edit: Okay, I've been trying different things with the CSS conditional (thanks for that Sidewinder). No-repeat doesn't work because the background just ends and the text keeps going over the main page background. Fixed doesn't work because the image gets thrown off center (you can see an example here if you look at the page in IE). So, fixed accomplishes what I want it to, but does anyone have any ideas why it's messing the image up?

[John]

I was being serious. I don't have the current statistics, but I believe IE is still the MOST USED browser. Thus not optimizing your site for IE is just stupid in my opinion, and I'm sure most people will agree. Everyone strives to create sites that are optimized for at least IE and FF. I firmly believe [and many articles agree] that the success to any business / company is their software. Whether that software be a hotel reservation system or simply a website. Whether your site is a "professional" website or not, you should still strive for professionalism - and in this instance, it is appealing to the user. I can only judge from personal experience, but if I go to a website that doesn't look good [or not optimized for my browser], I'm probably not going to stay on it long.

As for the CSS syntax, I'm not 100% sure how to use it, as I never have. I was just throwing that idea out there is one of the many solutions to your problem.

[Ravenfire]

Thanks for the clarification. I know what you say is true, it just gets extremely frustrating sometimes when you're trying to incorporate an artistic element into the design and it ends up working great in every browser other than IE. But you make a great point and at least working out the IE issues will enhance my problem solving skills lol.

I've almost got my problem for this layout fixed. I got the CSS syntax to work (thanks for that BTW) and ended up using this for IE

PHP Code:

#body {
        background-attachment: fixed;
        background-position: 20% 80%;
        background-repeat:no-repeat;
} 


Now I just need to figure out how to get the background image to actually sit in it's designated box instead of fixed to the main background. I think this issue is also why I had to set the background-position like it is.

I really appreciate all of the help so far!

[TcM]

Sorry man, I really can't understand what's wrong with that.. It is displayed PERFECT on IE for me.

[Ravenfire]

Great! Thanks for looking! It's almost perfect in mine, the background in the main box still moves a bit on mine but it's nothing major at all.

Thanks so much for the help!