[CSS] FIrefox/IE7 issue - BG Picture position

the background picture for a table is not working right in FF or IE7
Here is part of the div...
I want the image to start in the top left corner of the table....but its starting at the top left of the screen..
in IE6/Maxthon.. it works fine.

Code:

---

#divInfo {
        background: rgb(124,130,84);
        background-image:url(../info/left_img.jpg);
        background-repeat: no-repeat;
        position: relative;
        background-attachment: fixed;
        background-position: 0 0;
        font-family: Times New Roman, serif;
        font-size: 13pt;
        color: rgb(255,255,255);
        overflow: Auto;
        left: 10px;
        top: 0px;
        height:340px;
        width:760px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        text-align: justify;

---

Code:

---

<table class="gallery" border="0" cellpadding="0" cellspacing="0" width=820 height=380 align="center">
                                                <tr>
                                                                <td>
                                                                        <div id="divInfo">

---

You are giving background-property twice. This is probably something that will cause problems. background as it is will do all background stuff at once you want to do. background-color is what you use when you only want to change the bgcolor. However, as you're giving that many rules, you probably want to use only the shorthand.

Code:

---

        background: rgb(124,130,84) url(../info/left_img.jpg) no-repeat fixed;

---

You don't need to give the left top values in the end as they'll be reseted anyway when using the shorthand background property.

A sample page would've been nice as there might be other things that have their effect into the end result.


Also, if you're styling with CSS, why you're not styling all the way with it? Messing up HTML style tags and attributes into the picture can cause unexpected problems as there really is no standards that control how things should work in that case.

No difference... still way off.. its like its ignoring the relative position?

(cant show u the page since it will screw up the stat counter.. and my wife LIVES to check her stats... lol)

Maybe I can throw a version somewhere else for testing...

Saying that IE6 is right and IE7 and FF are wrong is a losing bet ...
http://www.w3.org/TR/CSS21/colors.ht...und-properties

Quote:

---

If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding area.

---

Which makes sense, by the way, if you think about how fixed attachment really works.

OK, so what effect do you want to achieve?

I put the page up on a diff site and took out the stat counter ;)

Look at this with IE6 , then FF or IE7
http://home.rochester.rr.com/lgsstatic/info.html

the image should be located in the box.. at the left side.. next to the words. but needs to "stay" where it is....

From your description of the desired effect, either scroll or fixed should work, but scroll should have the element as the origin. But IE6 implements this stuff completely incorrectly.

Actually I don't think it's possible to do what you're trying to avoid, i.e. have the background image scroll with nested scrollable content.

no.. I want the image to stay where it is.. fixed.. not scroll... so it seems like part of the "frame".

What I said. Try it out. I can't try it for myself because my Firefox keeps hiding the image completely (no idea why) and I'm running Linux.

set your screen to 1024x768 (or smaller) and you will see the image peeking out from behind the green...

the page is table based.. to keep things in line. HELP!!

For Firefox (and maybe IE7) it should be enough that you give overflow : auto; - atleast with my design the background image has stayed fixed that way.

For IE6 you need to give the attachment fixed. So you need to give IE6 and below it's own stylesheet with conditional comments technique.

Code:

---

<!--[if lte IE 6]><style type="text/css">#divInfo { background-attachment: fixed; }</style><![endif]-->

---

So what ever you do, don't give fixed for other browsers.


I can make a simple sample page if you need to see it with your own eyes first.

Quote:

---

Originally Posted by Static

set your screen to 1024x768 (or smaller) and you will see the image peeking out from behind the green...

the page is table based.. to keep things in line. HELP!!

---

That post is just a load of horrors isn't it? :)

1) Layouts should work on any screen resolution. I'm not changing resolution just to view a page; it most likely will not even occur to most users to do that.

2) Table-based layout is BAD! Don't do it. It's wrong.
Mixed div and table layout is even worse, since you will confuse yourself further.

Also, stat counters are so... 90s... doesn't your host provide a statistics package?

penagate, well, he's been trying to do a layout that works, but he is having problems with the image's position. So your point #1 isn't valid in this case although it is generally true :)

But I highly agree with the point #2, mixing table layouts and div layouts couldn't make a day worse. The simple sample that I thought about making would've been purely with one or two divs just to show the effect. But I'll wait for reply to see if I need to do it.