...

View Full Version : Background image showing only partly in Firefox



Junesun
01-31-2007, 07:53 PM
Hello,

I have a problem with my site www.learnlangs.com/biblelatin : I created a stylesheet for it that uses images as a background for divs and when I look at the page in Internet Explorer it displays fine, but when I look at it in Mozilla Firefox 1.5 the part that's in paragraphs (but not the part that is in headings) suddenly only has a white background. :-(

Oh and I tried to avoid using tables and tried all combinations of div attributes but just couldn't get it to work otherwise. It might be related to the fact that I can't use "position: absolute" on the divs defining the two sides because I need the background image to be repeated often enough for all the content to fit in.

I would really appreciate some expert help!
Thanks!

Yvonne

Excavator
01-31-2007, 08:44 PM
Hello Junesun,
I think the real question is why was it working in IE??? How odd. You had no background for #content and that is what FF was showing.
Start with this:


#top {
background: no-repeat left url(bibel_top.jpg);
background-color: #000000;
width: 1036px;
height: 77px;
}
.middle {
background: repeat-y left url(bibel_middle2.jpg);
background-color: #000000;
width: 1036px;
height: 88px;
}

#bottom {
background: no-repeat left url(bibel_bottom2.jpg);
background-color: #000000;
width: 1036px;
height: 56px;
}

#content {
text-align: center;
font: 14px Georgia, Times New Roman, Times, serif;
width: 1036px;
background: repeat-y left url(bibel_middle2.jpg);
color: #000000;
}
I tried styling left and right sides to get your text in the right place but tables are no fun so I'll leave that up to you. Would be better to get rid of the tables for sure.
One thing that's very important, to render the same in all browsers you really need a DocType - check the links in my sig below.

Junesun
01-31-2007, 08:57 PM
"content" is just a table within the div "middle". Do I always have to define a background for tables? I was hoping it would just take the image supplied by the div "middle", because if I specify that image as background for the table, the image doesn't align with the top and the bottom image.

What's very interesting is that the h1 title, which is already within the table "content", is showing up with the right background even in Firefox, whereas the text below doesn't.

Btw I spent several hours trying to get the divs for the two sides to align properly (I want the divs to only cover the parts of the book image where one would normally expect text) and I just couldn't get it. I tried position: relative, float: left, float: top and so on, but no matter what I did the div for the right page would always wind up below the one for the left page. The only way I could get the alignment of left and right page was to use that table and I'm really not happy about it. I'd appreciate any help.

Excavator
01-31-2007, 09:20 PM
Hello again Yvonne,
I recoded your page for you to show you how to do it with no tables. I didn't do anything about the 18 errors the validator (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.nopeople.com%2FJunesun%2F)showed in the code for your content.

Have a look at it at http://www.nopeople.com/Junesun/
Feel free to grab the code and use it, you'll just need to move the CSS over to it's own file (instead of in the <head> like it is now) and adjust the paths to your images.

Excavator
01-31-2007, 09:24 PM
What's very interesting is that the h1 title, which is already within the table "content", is showing up with the right background even in Firefox, whereas the text below doesn't.

That's because your loading a background in .middle where your h1 is.
In #content you have no background image, you have background-color: transparent; (no such thing...or deprecated, not sure which)



Btw I spent several hours trying to get the divs for the two sides to align properly (I want the divs to only cover the parts of the book image where one would normally expect text) and I just couldn't get it. I tried position: relative, float: left, float: top and so on, but no matter what I did the div for the right page would always wind up below the one for the left page. The only way I could get the alignment of left and right page was to use that table and I'm really not happy about it. I'd appreciate any help.
Positioning isn't always bad but it's defiinitely overused. No need for it here. Tables ARE always bad, hehe - that's just my opinion (and my warped sense of humor attempting a joke).

Arbitrator
01-31-2007, 10:35 PM
In #content you have no background image, you have background-color: transparent; (no such thing...or deprecated, not sure which)The background-color: transparent declaration is valid CSS1 and up. Itís not deprecated. Itís the default state of the background color and you use it to remove a background color on an element that would otherwise have a background color.

Excavator
01-31-2007, 11:25 PM
So it is!

transparent
[CSS1|CSS2] [IE4B1|N4B2|O3.5]
Type: Explicit
Description:
This specifies that the parent element background/image will shine through if one exists, else the system default background/image value is used.

http://www.blooberry.com/indexdot/css/properties/colorbg/bgcolor.htm

Thanks Arbitrator:thumbsup:
I really thought it had been phased out, not sure where I got that idea now though...

Junesun
02-01-2007, 10:19 AM
Wow, thank you so much!!! Your CSS looks so simple and beautiful. I'm going to convert my whole site to it and then tackle those validation errors. I wonder what I did wrong when I tried to float those divs. Maybe using "left: 130px" instead of "margin-left", would that do the trick? Or having the leftside and rightside div inside the content div? I noticed you eliminated that one.

Now I'll just need to figure out why the text is aligned nicely with the image in Firefox and it's more than 100 pixels to the right in Internet Explorer. And why my paragraphs suddenly just look like line breaks rather than paragraphs (edit: found it. I had to add padding to paragraphs and headers). I can probably find it.

Thanks! :-)

Yvonne

Excavator
02-01-2007, 04:23 PM
Wow, thank you so much!!! Your CSS looks so simple and beautiful. I'm going to convert my whole site to it and then tackle those validation errors. I wonder what I did wrong when I tried to float those divs. Maybe using "left: 130px" instead of "margin-left", would that do the trick? Or having the leftside and rightside div inside the content div? I noticed you eliminated that one.

You already have #middle repeating the image down the middle, no need for the content div to contain the floats.


Now I'll just need to figure out why the text is aligned nicely with the image in Firefox and it's more than 100 pixels to the right in Internet Explorer. And why my paragraphs suddenly just look like line breaks rather than paragraphs (edit: found it. I had to add padding to paragraphs and headers). I can probably find it.

Thanks! :-)

Yvonne

It's never just easy with IE, is it? Sorry about giving you messed up code, I never checked on IE6. It was the double margin bug. (http://www.positioniseverything.net/explorer/floatIndent.html) Have a look at it again - http://www.nopeople.com/Junesun/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum