Firefox resizing my background image

[Menard]

I swear I'm hating Firefox more and more; not only do I hate the mindless zombies that praise it to death think nothing wrong can happen, I especially hate trying to design for two browsers.

I have been working on a template, and had it looking good in IE; slight image offset by a pixel or two that I was having to workout.

Then, as I let it get by me, I thought I should check it in Firefox...

...oh dear god

The problem I'm having is that I'm using a div scroller for the content, and using a background image in the div which should fill the size of the window exactly, and not scroll with the content; it took some searching, but I accomplished that.

The problem is that Firefox resizes the image, making it a smaller than it is.

Now I still have Firefox 2, just because I like the speed better. I have tried 'background-size' attribute with no affect what so ever.

Of course, I did have some other minor adjustments to make. Using the simple   spacer helped me line up some images exactly how I wanted them in IE, but how Firefox translates that is a completely different animal.

Anybody know how to size an image in css?


This is the div scroller with its attributes:

Code:

<div style="border : solid 1px #7BD3FF; background-image : url(images/index2.jpg);

background-attachment:fixed; background-repeat:no-repeat;

color : #000000; padding : 4px; width : 800px; height : 448px; overflow :

hidden;"> blah blah blah obviously brilliant content blah</div>

It is a fixed window without a scrollbar in which the navigation is in the page itself (continue, back) rather like flipping pages of a book.


*Edit*

I have uploaded a test template. (Warning: This is an adult site template I have made) http://5g8.net/beachtest/noindex.html

Only that page has been uploaded, and not on its domain. The navigation in the text works, but the menu buttons lead nowhere.

I have the 'background-size' attribute in this test. If it works with Firefox 3, let me know, or if anybody experiences any other problems; trying to get the scroll lined up with the navigation so the pages don't overlap is a bit of a pain.

[Andy]

Menard - I suspect that you are not implementing the adult-size css attribute correctly?

[donecweb]

Menard, I checked the page in IE 8 64 bit version in Win7 and Firefox 3.5.4, the only difference I see is the text

As you will have noticed, and hopefully with your browser, as compatability is an issue, keeping the scrollbar hidden just makes the template look cleaner; not to mention it makes the site seem like it has more pages even though someone is just clicking through the same page.

is only shown in Firefox along with a difference in font size.

Have you tried using an external CSS style sheet? I have found that they are easier to make changes to and using Web Developer Toolbar for Firefox it is easier to trouble shoot the problems by making temporary changes right in your browser. I believe they have a version of the Web Developer Toolbar for IE also.

[Menard]

Menard - I suspect that you are not implementing the adult-size css attribute correctly?

Huh?


I'll have to check with bugs for Firefox 2 to see if there is a problem implementing the css3 background-size attribute with it. I guess it's entirely feasible that FF2 does not support background sizing; but I'll need to find out and see if there is some workaround.

If I am getting what you are saying, Don, the background is filling the div scroller in FF3, as well IE8 as it should? Other than the text sizing a bit differently between them?

[donecweb]

If I am getting what you are saying, Don, the background is filling the div scroller in FF3, as well IE8 as it should? Other than the text sizing a bit differently between them?

The background image is not completely seen it is pushed off the left side of the screen. This is from Firefox but the text at the bottom is missing in IE and the fonts are different otherwise the image is the same.

[Menard]

The background image is not completely seen it is pushed off the left side of the screen. This is from Firefox but the text at the bottom is missing in IE and the fonts are different otherwise the image is the same.

Creative blanking of the background, Don.

Then Firefox is apparently resizing the font (I'll have to try locking in a specific font size) as the bottom text in that picture should not be there; it should end after the continue button, which I'm presuming it does in IE.

Perhaps that could be a key as well, and I had not thought of that before, nor does it make much sense to me, but Firefox rarely does, is that I need to lock in the fonts by pixel size; maybe Firefox is interpreting the fonts and resizing the background in relation to that interpretation. Then, again, Firefox may be resizing the table and applying the background to the table rather than the div scroller.

There would be an easier way to do this template, which is just to leave the scrollbar in place and use a color code or repeating background, but dangit, I'm determined to somehow get it to do what I want.

Thankfully I don't care whether it works for Opera or not, or else I'd be bald from pulling out every bit of my hair.

[donecweb]

Creative blanking of the background, Don.

Hee hee I thought so.

Then Firefox is apparently resizing the font (I'll have to try locking in a specific font size) as the bottom text in that picture should not be there; it should end after the continue button, which I'm presuming it does in IE.

Firefox doesn't resize the font unless the individual has set their browser to a default font. But it may render the font different especially if the visitor does not have that font on their computer.

Perhaps that could be a key as well, and I had not thought of that before, nor does it make much sense to me, but Firefox rarely does, is that I need to lock in the fonts by pixel size; maybe Firefox is interpreting the fonts and resizing the background in relation to that interpretation. Then, again, Firefox may be resizing the table and applying the background to the table rather than the div scroller.

There would be an easier way to do this template, which is just to leave the scrollbar in place and use a color code or repeating background, but dangit, I'm determined to somehow get it to do what I want.

Thankfully I don't care whether it works for Opera or not, or else I'd be bald from pulling out every bit of my hair.

If a browser changes the font it will not effect the background image but it may alter the layout of the page other than the background. Font variations will not alter the size of a table if the table is set to a fixed size unless the table is completely full of text and I don't think it would change the table even then. I will give a quick check of how I would do the page using an external CSS style sheet and let you know how it comes out.

[donecweb]

Hey Menard, I was looking through your site and you have the background image twice once in the table background statement and once in the div statement that is right after the table background image. I think I see what you are trying to do. You want the menu at the top and the border images make a frame and the text and background to stay still as you scroll down and read the text. Yes? Oh! and you want to do this without seeing the extra scroll bar.

[Menard]

Hey Menard, I was looking through your site and you have the background image twice once in the table background statement and once in the div statement that is right after the table background image. I think I see what you are trying to do. You want the menu at the top and the border images make a frame and the text and background to stay still as you scroll down and read the text. Yes? Oh! and you want to do this without seeing the extra scroll bar.

I was looking over my HTML but still did not see a background statement in a table. I do have it four times in the div; 3 of which keep the background from scrolling with the text (even with the hidden scrollbar it would still scroll) and one to set the background at 100% height and width, which does not seem to be working in any  version of Firefox and IE doesn't need it.

[donecweb]

Check out this sit it is just up for a little while as it is just an attempt to get what I think you are trying for. It works the same in Firefox 3.5.4 and IE 8.0.7600.16385. It uses an external style sheet. It doesn't work too well as the size resolution goes down but I think that can be resolved.
http://webcentr.net/test/beachtest/

[Menard]

Check out this sit it is just up for a little while as it is just an attempt to get what I think you are trying for. It works the same in Firefox 3.5.4 and IE 8.0.7600.16385. It uses an external style sheet. It doesn't work too well as the size resolution goes down but I think that can be resolved.
http://webcentr.net/test/beachtest/

I was wondering about the ads being off in that one. Perhaps its not showing in later browsers, but on my IE and Firefox (5 and 2.0 respectively) the right side ads are cutting through the background image and one of the menu buttons. Other than that it looks good, save for some tinkering with the font size.

[donecweb]

That's because I used CSS columns to layout the page and they are tricky to get settled and I didn't go to the effort. At 1382 pixel width they don't cover any thing but as you go down in size the right hand one moves.