[WSG] Container Background Image Does Not Appear in Firefox
I'm new to this group, and I'm not sure if it's okay to post a question, but
here it is:
I've designed a website and am now creating the CSS for the home page. This
is the CSS for my main container div:
#container {
width: 760px;
background-color: #00;
color: #00;
margin: 0 auto;
padding: 0;
text-align: left;
background-image: url(images/bg_container.jpg);
background-repeat: repeat-y;
}
The problem is that the bg_container.jpg image does not appear in Mozilla
Firefox; however it appears in IE 7. bg_container.jpg is 760 px wide with
the first pixel and the last pixel being black. All the pixels in between
are white, thus creating a thin black border on the left and right hand
sides of the 760 px container. In the latest version of Firefox, I do not
see these two black lines.
Could someone please advise.
Thanks!
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Container Background Image Does Not Appear in Firefox
We need to see more of your code or a link to your page but I suspect your
container probably contains floated content and you haven't cleared your
floats properly.
I have to ask though, if your image is just creating black borders on
either side of the container, why don't you use borders in CSS instead?
On Wed, 20 Jun 2007 09:40:15 +1000, Joyce Evans
[EMAIL PROTECTED] wrote:
I'm new to this group, and I'm not sure if it's okay to post a question,
but
here it is:
I've designed a website and am now creating the CSS for the home page.
This
is the CSS for my main container div:
#container {
width: 760px;
background-color: #00;
color: #00;
margin: 0 auto;
padding: 0;
text-align: left;
background-image: url(images/bg_container.jpg);
background-repeat: repeat-y;
}
The problem is that the bg_container.jpg image does not appear in Mozilla
Firefox; however it appears in IE 7. bg_container.jpg is 760 px wide
with
the first pixel and the last pixel being black. All the pixels in
between
are white, thus creating a thin black border on the left and right hand
sides of the 760 px container. In the latest version of Firefox, I do
not
see these two black lines.
Could someone please advise.
Thanks!
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Container Background Image Does Not Appear in Firefox
Joyce Evans wrote:
I’m new to this group, and I’m not sure if it’s okay to post a
question, but here it is:
I’ve designed a website and am now creating the CSS for the home
page. This is the CSS for my main container div:
#container {
width: 760px;
background-color: #00;
color: #00;
margin: 0 auto;
padding: 0;
text-align: left;
background-image: url(images/bg_container.jpg);
background-repeat: repeat-y;
}
The problem is that the bg_container.jpg image does not appear in
Mozilla Firefox; however it appears in IE 7. bg_container.jpg is 760
px wide with the first pixel and the last pixel being black. All the
pixels in between are white, thus creating a thin black border on the
left and right hand sides of the 760 px container. In the latest
version of Firefox, I do not see these two black lines.
Hi, Joyce, and welcome.
Of course it's OK; that's what we're here for!
It's difficult to tell what the problem might be just from your post,
because you don't say whether your css is in the HTML file or a
separate css file - in any case, if you can, it's always a good idea to
post a link to a live page where we can see your code in action.
A couple of points, though:
First, your #container div has a black background, but you're filling
it with a white image file - so you'd need too be aware of any problems
this might create with legibility of the content that sits over the top
of that background;
Second, is there any reason why you're using a bg img instead of simply
using left anf right borders on the #container div?
Third, if you do need to use that image as the bg, consider a gif
instead of the jpeg. It will be a lot smaller in file size, and
sharper, too, if you knock out all the colours in it except black and
white...
HTH
Nick
___
omnivision. websight.
http://www.omnivision.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Container Background Image Does Not Appear in Firefox
Here is the link to the incomplete home page. It's as far as I have gotten
with the CSS. The CSS file name is brookgrooves_home.css, and it is an
external style sheet, which you'll be able to download.
http://www.nichemktghouston.com/bookgrooves/index.html
Notice that the dark lines appear to the left and the right in IE but not in
Firefox.
This is how the design sample looks prior to my programming. This is simply
one jpg file:
http://www.nichemktghouston.com/bookgrooves/HomePageSample17e_ltGrnTitles.ht
ml
I can't even imagine how I'm going to handle the Topic and Members columns
with CSS, as well as the three columns for Popular Reads with the images of
the books. It's been painful, but I'm trying not to use tables.
Nonetheless, I'm not using a border because I need to figure out how to get
the background image to appear in Firefox. I use background images often,
and they usually aren't as simple as a border.
Thank you.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of John Faulds
Sent: Tuesday, June 19, 2007 7:00 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Container Background Image Does Not Appear in Firefox
We need to see more of your code or a link to your page but I suspect your
container probably contains floated content and you haven't cleared your
floats properly.
I have to ask though, if your image is just creating black borders on
either side of the container, why don't you use borders in CSS instead?
On Wed, 20 Jun 2007 09:40:15 +1000, Joyce Evans
[EMAIL PROTECTED] wrote:
I'm new to this group, and I'm not sure if it's okay to post a question,
but
here it is:
I've designed a website and am now creating the CSS for the home page.
This
is the CSS for my main container div:
#container {
width: 760px;
background-color: #00;
color: #00;
margin: 0 auto;
padding: 0;
text-align: left;
background-image: url(images/bg_container.jpg);
background-repeat: repeat-y;
}
The problem is that the bg_container.jpg image does not appear in Mozilla
Firefox; however it appears in IE 7. bg_container.jpg is 760 px wide
with
the first pixel and the last pixel being black. All the pixels in
between
are white, thus creating a thin black border on the left and right hand
sides of the 760 px container. In the latest version of Firefox, I do
not
see these two black lines.
Could someone please advise.
Thanks!
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Container Background Image Does Not Appear in Firefox
It's as I said before. Your layout contains floated content and you
haven't cleared your floats. Adding overflow: hidden to #container will
make the borders appear in Firefox but you should do some reading up on
'clearing floats'.
On Wed, 20 Jun 2007 10:35:50 +1000, Joyce Evans
[EMAIL PROTECTED] wrote:
Here is the link to the incomplete home page. It's as far as I have
gotten
with the CSS. The CSS file name is brookgrooves_home.css, and it is an
external style sheet, which you'll be able to download.
http://www.nichemktghouston.com/bookgrooves/index.html
Notice that the dark lines appear to the left and the right in IE but
not in
Firefox.
This is how the design sample looks prior to my programming. This is
simply
one jpg file:
http://www.nichemktghouston.com/bookgrooves/HomePageSample17e_ltGrnTitles.ht
ml
I can't even imagine how I'm going to handle the Topic and Members
columns
with CSS, as well as the three columns for Popular Reads with the images
of
the books. It's been painful, but I'm trying not to use tables.
Nonetheless, I'm not using a border because I need to figure out how to
get
the background image to appear in Firefox. I use background images
often,
and they usually aren't as simple as a border.
Thank you.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of John Faulds
Sent: Tuesday, June 19, 2007 7:00 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Container Background Image Does Not Appear in Firefox
We need to see more of your code or a link to your page but I suspect
your
container probably contains floated content and you haven't cleared your
floats properly.
I have to ask though, if your image is just creating black borders on
either side of the container, why don't you use borders in CSS instead?
On Wed, 20 Jun 2007 09:40:15 +1000, Joyce Evans
[EMAIL PROTECTED] wrote:
I'm new to this group, and I'm not sure if it's okay to post a question,
but
here it is:
I've designed a website and am now creating the CSS for the home page.
This
is the CSS for my main container div:
#container {
width: 760px;
background-color: #00;
color: #00;
margin: 0 auto;
padding: 0;
text-align: left;
background-image: url(images/bg_container.jpg);
background-repeat: repeat-y;
}
The problem is that the bg_container.jpg image does not appear in
Mozilla
Firefox; however it appears in IE 7. bg_container.jpg is 760 px wide
with
the first pixel and the last pixel being black. All the pixels in
between
are white, thus creating a thin black border on the left and right hand
sides of the 760 px container. In the latest version of Firefox, I do
not
see these two black lines.
Could someone please advise.
Thanks!
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Container Background Image Does Not Appear in Firefox
Thank you to all who responded. I added overflow: hidden; to #container,
as suggested by John Faulds below, and I now see the background image in
Firefox, as well as IE.
I obviously have much reading/learning to do.
Thank you.
Joyce
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of John Faulds
Sent: Tuesday, June 19, 2007 7:56 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Container Background Image Does Not Appear in Firefox
It's as I said before. Your layout contains floated content and you
haven't cleared your floats. Adding overflow: hidden to #container will
make the borders appear in Firefox but you should do some reading up on
'clearing floats'.
On Wed, 20 Jun 2007 10:35:50 +1000, Joyce Evans
[EMAIL PROTECTED] wrote:
Here is the link to the incomplete home page. It's as far as I have
gotten
with the CSS. The CSS file name is brookgrooves_home.css, and it is an
external style sheet, which you'll be able to download.
http://www.nichemktghouston.com/bookgrooves/index.html
Notice that the dark lines appear to the left and the right in IE but
not in
Firefox.
This is how the design sample looks prior to my programming. This is
simply
one jpg file:
http://www.nichemktghouston.com/bookgrooves/HomePageSample17e_ltGrnTitles.ht
ml
I can't even imagine how I'm going to handle the Topic and Members
columns
with CSS, as well as the three columns for Popular Reads with the images
of
the books. It's been painful, but I'm trying not to use tables.
Nonetheless, I'm not using a border because I need to figure out how to
get
the background image to appear in Firefox. I use background images
often,
and they usually aren't as simple as a border.
Thank you.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of John Faulds
Sent: Tuesday, June 19, 2007 7:00 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Container Background Image Does Not Appear in Firefox
We need to see more of your code or a link to your page but I suspect
your
container probably contains floated content and you haven't cleared your
floats properly.
I have to ask though, if your image is just creating black borders on
either side of the container, why don't you use borders in CSS instead?
On Wed, 20 Jun 2007 09:40:15 +1000, Joyce Evans
[EMAIL PROTECTED] wrote:
I'm new to this group, and I'm not sure if it's okay to post a question,
but
here it is:
I've designed a website and am now creating the CSS for the home page.
This
is the CSS for my main container div:
#container {
width: 760px;
background-color: #00;
color: #00;
margin: 0 auto;
padding: 0;
text-align: left;
background-image: url(images/bg_container.jpg);
background-repeat: repeat-y;
}
The problem is that the bg_container.jpg image does not appear in
Mozilla
Firefox; however it appears in IE 7. bg_container.jpg is 760 px wide
with
the first pixel and the last pixel being black. All the pixels in
between
are white, thus creating a thin black border on the left and right hand
sides of the 760 px container. In the latest version of Firefox, I do
not
see these two black lines.
Could someone please advise.
Thanks!
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
