Background styling not appearing in content div in Firefox

Discussion in 'CSS' started by invictis, Aug 8, 2009.

0
  1. #1
    Hello,

    I've been looking for answers to a seemingly simple problem I'm having with firefox with no luck. I can't get any of my styling for my content div to show up in FF, but it shows up in Safari and Opera. Is there any true way to have cross browser compatibility here? Any advice is greatly appreciated.



    XHTML thus far....


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    <link href="assets/invic_style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="wrapper">
    <div id="bg">
    <div id="masthead">
    <div class="banner-home"><a href="http://www.invictisgraphics.com"></a></div>
    </div>
    <!---------- End of Masthead --------->
    <div id="content" class="frontpage">
    <div class="primary-content">
    <div class="featured-box">
    <!---------- Featured Content Slider --------->
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>




    CSS thus far...


    @charset "UTF-8";

    * {
    margin: 0px;
    padding: 0px;

    }

    html {
    background: #000000 url(images/invic_temp_sliver.jpg) repeat-x;
    position: relative;

    }

    body {
    background-image: url(images/invic_temp_bkg.jpg);
    background-repeat:no-repeat;
    height: 826px;
    width: auto;
    text-align: center;
    margin: 0px auto 0px;
    background-position: center top;

    }


    #wrapper {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 1000px;

    }

    #clear {
    clear: both

    }

    #masthead {
    background-image:url(images/invic_logo.png);
    height:208px;
    width:346px;
    margin-left: 32.5%;

    }

    #masthead .banner-home {
    background-position: center top;
    height:208px;
    width:346px;

    }

    #content.frontpage {

    }

    #content {
    background:#808080;
    background-image:url(images/invic_content_bg.png) repeat-x scroll center top;
    background-color:#808080;
    border:1px solid #ffffff;
    clear:both;
    display:block;
    margin-bottom:20px;
    min-height:800px;
    padding:20px;
    overflow: auto;

    }

    .primary-content {
    float:left;
    width:640px;
    }
     
    invictis, Aug 8, 2009 IP
  2. ptalent

    ptalent Peon

    Messages:
    26
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Change:

    
#content {
background:#808080;
background-image:url(images/invic_content_bg.png) repeat-x scroll center top;
background-color:#808080;
    Code (markup):
    To

    
#content {
background:#808080 url(images/invic_content_bg.png) repeat-x scroll center top;
    Code (markup):
     
    ptalent, Aug 9, 2009 IP
  3. invictis

    invictis Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you for your response. I applied the code to no avail, though I did see my redundant code after you pointed it out... Here is what I have now and FF still isn't showing anything even after I added a pic in the content area to test things out. All that shows is my background in the body and html tags. No other content is showing up in the divs in FF!



    CSS

    @charset "UTF-8";

    * {
    margin: 0px;
    padding: 0px;

    }

    html {
    background: #000000 url(images/invic_temp_sliver.jpg) repeat-x;
    position: relative;

    }

    body {
    background-image: url(images/invic_temp_bkg.jpg);
    background-repeat:no-repeat;
    height: 826px;
    width: auto;
    text-align: center;
    margin: 0px auto 0px;
    background-position: center top;

    }


    #wrapper {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 1000px;

    }

    #clear {
    clear: both

    }

    #masthead {
    background-image:url(images/invic_logo.png);
    height:208px;
    width:346px;
    margin-left: 32.5%;

    }

    #masthead .banner-home {
    background-position: center top;
    height:208px;
    width:346px;

    }

    #content.frontpage {

    }

    #content {
    background:#6e6e6e url(images/invic_content_bg.jpg) repeat-x scroll center top;
    border:1px solid #808080;
    clear:both;
    display:block;
    margin-bottom:20px;
    min-height:800px;
    padding:20px;
    overflow: auto;


    }

    .primary-content {
    float:left;
    width:640px;
    }









    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    <link href="assets/invic_style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="wrapper">
    <div id="bg">
    <div id="masthead">
    <div class="banner-home"><a href="http://www.invictisgraphics.com"></a></div>
    </div>
    <!---------- End of Masthead --------->
    <div id="content" class="frontpage">
    <div class="primary-content">
    <img src="assets/images/dearsummer2.jpg" alt="pic" />
    <div class="featured-box">
    <!---------- Featured Content Slider --------->
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
     
    invictis, Aug 9, 2009 IP
  4. ptalent

    ptalent Peon

    Messages:
    26
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Can you post a link to it if it's online?
     
    ptalent, Aug 9, 2009 IP
  5. invictis

    invictis Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5

    Unfortunately it's not. Would it make a difference since I'm viewing it through firefox via dreamweaver?
     
    invictis, Aug 9, 2009 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    It would make a big difference. We would have the images in the mix. More importantly, the folks that can help you are more likely to open a page and look it over than they are to copy/paste your html and css to incompletely recreate your page locally.

    cheers,

    gary
     
    kk5st, Aug 9, 2009 IP
  7. My220x

    My220x Member

    Messages:
    624
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    35
    #7
    Would help but like others said I would rather have a online page.
     
    My220x, Aug 9, 2009 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    Looking at the code, I'd think the {overflow: auto;} on #content would fix your problem. That it doesn't, says there are other issues not immediately evident.

    When posting code, please wrap the code in bbcode tags, &#91;code] and &#91;/code]. That will maintain formatting such as indented nesting, etc..

    cheers,

    gary
     
    kk5st, Aug 9, 2009 IP
  9. invictis

    invictis Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9


    That's exactly what I was thinking after thoroughly researching my issue, but no luck as of yet. I'm going to try and post up what I have thus far to my domain and see if that makes a difference. Thanks to all for their responses, hopefully I'll be back in a flash with the link.
     
    invictis, Aug 9, 2009 IP
  10. invictis

    invictis Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    The url is http://www.invictisgraphics.com



    I believe the godaddy banner is pushing my logo into the content area now too. Will this be corrected with me purchasing the hosting and them removing the godaddy ads? Thanks
     
    invictis, Aug 10, 2009 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    I should have noticed; it's your comments. 
    	</div>
        <!---------- End of Masthead --------->
        <div id="content" class="frontpage">
        	<div class="primary-content">
            		
            	<div class="featured-box">
                <!---------- Featured Content Slider ---------> 
                </div>
    Code (markup):
    The html comment marker is the double hyphen. The first pair turns comments on, the next turns them off, the next, on, then off. Never ever use more than two hyphens to open the comment, then two to close. Do not use a hyphen pair within the comment.

    Always validate your markup before posting. The validator caught this error.

    Get some paid hosting. Godaddy is adding crap to your page.

    cheers,

    gary
     
    kk5st, Aug 10, 2009 IP
  12. invictis

    invictis Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Thanks Gary, will do. This was my first time uploading a page, so I hadn't bothered upgrading my account. Time to call Godaddy I suppose, nobody likes banners...
     
    invictis, Aug 10, 2009 IP
  13. Love*

    Love* Well-Known Member

    Messages:
    1,739
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    165
    Digital Goods:
    1
    #13
    Did it work out? Otherwise, try adding "div" to all your ids / classes for divs in your stylesheet, example:

    div#wrapper { style }
     
    Love*, Aug 14, 2009 IP
  14. invictis

    invictis Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14

    It worked, but thanks for the additional advice. I'm on to figuring out how I'm going to style the footer. Hopefully I'll be ready to send it into joomla after that...
     
    invictis, Aug 15, 2009 IP