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] ***