Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background image showing only partly in Firefox

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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:
    Code:
    #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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    "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.
    Last edited by Junesun; 01-31-2007 at 10:14 PM. Reason: new thing I noticed

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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).
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by Excavator View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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/cs...bg/bgcolor.htm

    Thanks Arbitrator
    I really thought it had been phased out, not sure where I got that idea now though...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Junesun; 02-01-2007 at 11:22 AM. Reason: already found one problem

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Junesun View Post
    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. Have a look at it again - http://www.nopeople.com/Junesun/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •