SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two problems with Firefox

    Hello,

    I am having a couple of problems with my pages in Firefox (looks okay in IE). The link is here.

    First, I get a space in between my header div and the body in Firefox. The space doesnt show up in IE. I added a margin-top: -15px to the body div and it fixed the Firefox space, but then in IE the text was cutoff. Any ideas?

    Also, in Firefox the blog pages ("Gossip" and "Stuff" links from top) dont have the background images for the body div show up while the static pages (Home Page and "The Girls") do. In IE the background image shows up for both.

    Finally, is there a way to make the background image for the body div go all the way down to the footer. Right now, it just goes as far as the text. I tried repeat-y for the background image and height and min-height at 100% but it didn't work.

    Thanks a ton. This forum has been extremely helpful for me!
    Tate

  2. #2
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just fixed my first problem with the space in firefox, which was an easy answer. I added the * {margin:0;padding:0} and it took care of it.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    First, I get a space in between my header div and the body in Firefox. The space doesnt show up in IE. I added a margin-top: -15px to the body div and it fixed the Firefox space, but then in IE the text was cutoff. Any ideas?
    I'm not seeing the gap in Firefox 2.
    Also, in Firefox the blog pages ("Gossip" and "Stuff" links from top) dont have the background images for the body div show up while the static pages (Home Page and "The Girls") do. In IE the background image shows up for both.
    If it's looking how you want in IE, then there is no need for any of the 100% heights or min-heights. Try removing them and seeing what happens, this is why in Firefox the footer is stuck at the bottom.
    I'm stilling working on the white background image behind the text, try this
    Code:
    #body{
    	width:600px;
    	margin: 0 0 0 97px;
    	padding: 0;
    	background: white url(images/whiteback.png) repeat-y top left;	
    }
    I don't think I'm exactly sure what you are wanting here
    Finally, is there a way to make the background image for the body div go all the way down to the footer. Right now, it just goes as far as the text. I tried repeat-y for the background image and height and min-height at 100% but it didn't work.
    The footer is directly after the #body in IE and that's what you said you were wanting, sorry.
    Thanks a ton. This forum has been extremely helpful for me!
    Me too.

  4. #4
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for responding... I don't think I explained this as well as I could have =)

    I have two separate problems with my #body div and it's white background (whiteback.png). First, it doesn't show up at all on blog posts in Firefox for some reason even though the posts are wrapped in the #body div when you view source. What's really weird is that it shows up in IE and what's even more weird is that if I change the font color, the changes take effect in Firefox, but I can't change anything having to do with the background and have it show up in Firefox.

    The second problem is that when I can make the whiteback.png image appear, I can not make it reach all the way to the footer. The footer is acting like I want it to (which means sticking to the bottom of the browser) but I can't figure out a way to make the #body div stretch all the way to the footer (which mean the background image keeps repeating all the way down to the footer, even if there isn't enough text to reach down that far).

    Link to my page

    Thank you so much for taking a look at my CSS,
    Tate

  5. #5
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Validate your html and your css and fix your errors there.

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,
    I have two separate problems with my #body div and it's white background (whiteback.png). First, it doesn't show up at all on blog posts in Firefox for some reason even though the posts are wrapped in the #body div when you view source. What's really weird is that it shows up in IE and what's even more weird is that if I change the font color, the changes take effect in Firefox, but I can't change anything having to do with the background and have it show up in Firefox.
    The white background is not showing because you are not clearing your floats! It's always the case.
    You can either add the overflow property or add a clearing element just after the floats in the #body.
    Code:
    #body{
    	width:600px;
    	margin: 0 0 0 97px;
    	padding: 0;
    	background: white url(http://www.jarboetax.com/wordpress/wp-content/themes/smoochboys/images/whiteback.png) repeat-y top left;
    overflow: hidden;
    }
    
    OR
    
    <div style="clear: both;"></div>

  7. #7
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    markbrown4: thank you very much, this worked perfectly!

    drhowarddrfine: you're right, i validated it when i started but it had been a while.

    thanks!
    tate


Bookmarks

Posting Permissions

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