SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Enthusiast hobulus's Avatar
    Join Date
    Oct 2005
    Location
    Sheffield, UK
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Background Disappearance...

    Hi All,

    I have been working on the playout for a site.... seems that my "Content div is having an issue displaying the BG image in firefox. Can anybody emlighten me on as to why this may happen.... My eyes are square from gazing at the code for so long!


    Html

    <div id="content">
    <div id="contents">A World leading manufacturer of leisure, sport, golf and rain umbrella frames
    <h3>The Company</h3>
    <ul id="homelist"><li>The Hoyland Fox name reflects 150 years of dedication to the manufacture of high quality umbrella frames. </li>
    <li>Alexander Seven Marketing Co Ltd, has recently bought Hoyland Fox. With this merge of two of the top umbrella manufacturer's, we are excited about the future prospects of both companies.</li>
    <li>With the combination of advanced technology and innovative design Hoyland Fox offers an exciting range for the worldwide market.</li>
    <li>The Hoyland Fox range combines design flair with an exciting range of Colourways to provide a tailormade solution for every customer request.</li>
    </ul>
    <h2>Hoyland Fox - Where Quality is the Name of the Frame</h2>
    </div>
    </div>
    <div id="footer"><br /><span style="color:#990000; font-weight:bold; font-size:12px; font-family:Arial, Helvetica, sans-serif;">Hoyland Fox Limited, Fields End Business Park, Fields End Road, Goldthorpe, Rotherham, S63 9EU<br/>
    Tel: +44 (0) 1709 88 21 00 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Fax: +44 (0) 1709 88 21 11<br />COPYRIGHT Hoyland Fox Limited U.K.</span></div>
    </div>


    CSS

    div#wrapper {width:779px; margin: 0px auto;}

    div#header {width:779px; height:184px; background-image:url(../site_images/header_bg.png); clear:both;}

    div#menu {margin: 0, 0, 0, 0; width:460px; height:143px; padding-left:300px;}

    #menu ul { list-style:none; margin:0; padding:0 10px; }
    #menu li { float:left; }
    #menu li a span { display:block; color:#FFFFFF; font-family:Tahoma; font-size:12px; font-weight:bold; text-decoration:none; padding-top:120px;}
    #menu li a span:hover{ display:block; color:#000; font-family:Tahoma; font-size:12px; font-weight:bold; text-decoration:none; padding-top:120px;}
    #menu li a { display:block; height:143px; width:107px; background-position:center bottom; text-decoration:none;}

    #sun { background-image: url(../site_images/sun_frames.png); background-repeat:no-repeat;}
    #rain { background-image: url(../site_images/rain_frames.png); background-repeat:no-repeat;}
    #golf { background-image: url(../site_images/golf_frames.png); background-repeat:no-repeat;}
    #contact { background-image: url(../site_images/contact.png); background-repeat:no-repeat;}

    div#content {width:779px; height:100%; background-image:url(../site_images/content_bg.png); text-align:left; padding: 20, 20, 20, 20;}

    div#contents {width:400px; text-align:left; padding-left:30px; padding-right:30px; float:left; border-right-style:dashed; border-color:#999999; border-right-width:thin;}
    ul#homelist {list-style-image:url(../site_images/bullet.png);}

    div#footer { width:779px; height:84px; margin: 0px auto; background-image:url(../site_images/footer_bg.png); clear:both;}
    :: HOBULUS ::

    THIRSTY 4 DESIGN

  2. #2
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to validate your CSS. At first glance this line stood out, but there might be more errrors:
    Code CSS:
    div#content {width:779px; height:100&#37;; background-image:url(../site_images/content_bg.png); text-align:left; padding: 20, 20, 20, 20;}

    Correct CSS Rule, there can't be commas in the padding definition, it has to have 20px, 20% or 20 'something', and I used the shorthand version instead of writing 20px 4 times:
    Code CSS:
    div#content {width:779px; height:100%; background-image:url(../site_images/content_bg.png); text-align:left; padding: 20px;}

    Try to post your complete HTML and CSS file instead of just parts of it, *after* you've validated your HTML and CSS

  3. #3
    SitePoint Enthusiast hobulus's Avatar
    Join Date
    Oct 2005
    Location
    Sheffield, UK
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that JunJUn.

    I have validated the CSS as well as the Xhtml, and still I get the BG Image not showing in Firefox, but it shows in IE. Weird. Anybody else got any ideas?
    :: HOBULUS ::

    THIRSTY 4 DESIGN

  4. #4
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You still have not showed us the complete html/css

  5. #5
    SitePoint Enthusiast hobulus's Avatar
    Join Date
    Oct 2005
    Location
    Sheffield, UK
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Junjun,

    Ok, the page is up live http://hoylandfox.co.uk/test

    and the CSS is...

    /* CSS Document */

    html,body{margin:0;padding:0}
    body{font: 12px arial,sans-serif; background-image:url(../site_images/bg_large.png); background-attachment:fixed; text-align:center; height:100&#37;;}

    p {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000;}

    div#wrapper {width:779px; margin: 0px auto;}

    div#header {width:779px; height:184px; background-image:url(../site_images/header_bg.png); clear:both;}

    div#menu {margin: 0px; width:460px; height:143px; padding-left:300px;}

    #menu ul { list-style:none; margin:0; padding:0 10px; }
    #menu li { float:left; }
    #menu li a span { display:block; color:#FFFFFF; font-family:Tahoma; font-size:12px; font-weight:bold; text-decoration:none; padding-top:120px;}
    #menu li a span:hover{ display:block; color:#000; font-family:Tahoma; font-size:12px; font-weight:bold; text-decoration:none; padding-top:120px;}
    #menu li a { display:block; height:143px; width:107px; background-position:center bottom; text-decoration:none;}

    #sun { background-image: url(../site_images/sun_frames.png); background-repeat:no-repeat;}
    #rain { background-image: url(../site_images/rain_frames.png); background-repeat:no-repeat;}
    #golf { background-image: url(../site_images/golf_frames.png); background-repeat:no-repeat;}
    #contact { background-image: url(../site_images/contact.png); background-repeat:no-repeat;}

    div#content {width:779px; background-image:url(../site_images/content_bg.png); text-align:left;}

    div#contents {width:400px; text-align:left; font-family:Tahoma; font-size:12px; line-height:1.6; padding-left:30px; padding-right:30px; float:left; border-right-style:dashed; border-color:#999999; border-right-width:1px;}

    div#newproducts { float:left; background-image:url(../site_images/new_products_bg.png); background-repeat:no-repeat; width:200px; height:200px;}
    div#latest { position:relative; padding-top: 70px; padding-left:50px; width:135px; height:135px; color:#FFFFFF;}

    ul#homelist {list-style-image:url(../site_images/bullet.png);}

    div#footer { width:779px; height:84px; margin: 0px auto; background-image:url(../site_images/footer_bg.png); clear:both;}
    :: HOBULUS ::

    THIRSTY 4 DESIGN

  6. #6
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hobulus, not sure what the issue is, but I'm getting this:
    Server not found

  7. #7
    SitePoint Enthusiast hobulus's Avatar
    Join Date
    Oct 2005
    Location
    Sheffield, UK
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.hoylandfox.co.uk/test/index.html

    I just tried this link and it is working.
    :: HOBULUS ::

    THIRSTY 4 DESIGN

  8. #8
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All content inside is floated, so nothing is making the background expand. Add overflow: hidden; to your #content rule, and you will be fine:
    Code CSS:
    div#content {
    background-image:url(../site_images/content_bg.png);
    overflow:hidden;
    text-align:left;
    width:779px;
    }

    Sweet looking website btw.

  9. #9
    SitePoint Enthusiast hobulus's Avatar
    Join Date
    Oct 2005
    Location
    Sheffield, UK
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks JunJun.... I will try that in a sec.
    Glad you like the design. Seems that is what I am best at.
    Newbie to CSS, and struggling through it a little....


    JUst implemented the overflow, and all is GOOD! Woo hoo.

    Thanks so much JunJun!
    :: HOBULUS ::

    THIRSTY 4 DESIGN

  10. #10
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome


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
  •