Greetings: You can see my problem at http://www.daisyblossoms.com/index3.html
I have a Container div that holds my header, maincontent and footer div. The body has a background that repeats on Y, and the Header and Footer div each have a background image that matches up with the background image of the body.
The problem is that in IE and Firefox the horizontal lines in all these background images match up. But in Safari and Opera, it is like the container div is pushed to the right 1px. I can even add a "left: 1px;" to the container div and it will line up in Safari and Opera, but ultimately break IE and Firefox.
Can someone tell me what is occurring here? Again you can see it happen going to http://www.daisyblossoms.com/index3.html opening with these browsers.
Ok, another solution would be to use a transparent PNG for your header image - remove the pattern element from it and allow that space to be transparent - then you won't be trying to line-up the background image.
Unfortunately, I have tried the transparency option, but PNG8 just doesn't give the quality that I need in the image especially regarding shadows. I know that PNG24 would, but it isn't supported enough on past browsers, I will have to wait a few more rounds of browser versions until we can safely feel the unsupported older browsers are out of the picture.
Thanks Nick for pointing the outline out, didn't realize that. Definitely will add that rule.\
I think what I will do is actually put a div at the top of the container that is X pixels high and has the same background in it. I will also extend the footer to the bottom of the website also. This will then take care of this problem and the problem of keeping everything center when resizing the window in some of the browsers which cause it to break.
You can see my problem at http://www.daisyblossoms.com/index3.html
I have a Container div that holds my header, maincontent and footer div. The body has a background that repeats on Y, and the Header and Footer div each have a background image that matches up with the background image of the body.
The problem is that in IE and Firefox the horizontal lines in all these background images match up. But in Safari and Opera, it is like the container div is pushed to the right 1px. I can even add a "left: 1px;" to the container div and it will line up in Safari and Opera, but ultimately break IE and Firefox.
Can someone tell me what is occurring here? Again you can see it happen going to http://www.daisyblossoms.com/index3.html opening with these browsers.
Thanks in advance for any help
a {
outline: none;
}
that will get rid of the grey outline around your buttons when clicked
Unfortunately, I have tried the transparency option, but PNG8 just doesn't give the quality that I need in the image especially regarding shadows. I know that PNG24 would, but it isn't supported enough on past browsers, I will have to wait a few more rounds of browser versions until we can safely feel the unsupported older browsers are out of the picture.
Thanks Nick for pointing the outline out, didn't realize that. Definitely will add that rule.\
I think what I will do is actually put a div at the top of the container that is X pixels high and has the same background in it. I will also extend the footer to the bottom of the website also. This will then take care of this problem and the problem of keeping everything center when resizing the window in some of the browsers which cause it to break.
Get IE PNG Fix - problem solved ;)