CSS background not showing up on page.

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I got the same problem here. It is driving me up the spiked wall with no clothes on. This is making me really angry in other words and I have no way of figuring out how to fix it. My CSS (layout.css) is...

Quote:
/* Reset browsers default margin, padding and font sizes */
* {
margin: 0;
padding: 0;
}
/* General commands of the website */
body, html {
width: 100%;
height: 100%;
background-color: #000000;
}
blockquote {
background-color: #777777;
border-color: #000000;
border-style: dashed;
border-width: thin;
font-family: monospace;
font-size: 14px;
font-variant: normal;
float: right;
width: 70%;
margin-top: 5px;
margin-right: 20px;
}
p {
margin-top: 0px;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0px;
margin-bottom: 0px;
}
/* Website DIVs commands */
.wrap {
background-color: #FFFFFF;
height: 100%;
width: 60%;
margin-left: auto;
margin-right: auto;
position: relative;
}
/* Edges and corners DIVs commands */
.left_top {
background-image: url('Images/left_top.PNG');
width: 2px;
height: 2px;
}
.right_top {
background-image: url('Images/right_top.PNG');
width: 2px;
height: 2px;
}
.left_bottom {
background-image: url('Images/left_bottom.PNG');
width: 2px;
height: 2px;
}
.right_bottom {
background-image: url('Images/right_bottom.PNG');
width: 2px;
height: 2px;
}
.top_main {
background-image: url('Images/top_main.PNG');
width: 100%;
height: 2px;
}
.bottom_main {
background-image: url('Images/bottom_main.PNG');
width: 100%;
height: 2px;
}
.left_main {
background-image: url('Images/left_main.PNG');
width: 2px;
height: 100%;
}
.right_main {
background-image: url('Images/right_main.PNG');
width: 2px;
height: 100%;
}
.left_end {
background-image: url('Images/left_end.PNG');
}
.logo {
background-image: url('Images/logo.PNG');
}
.logo_2 {
background-image: url('Images/logo_2.PNG');
}


and my HTML (Index.html) is

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Infomania - The place where everybody goes for information</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="en-gb" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="Infomania" />
<meta name="description" content="The place where everybody goes for information" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="Scripts/layout.css" type="text/css" />
</head>
<body>
<div class="wrap">
<blockquote>
<p>This is *peach* messed up</p>
</blockquote>
<div class="left_main">

</div>

</div>
</body>
</html>



Right now, only the background and "wrap" works, but the images don't show up. If you want to test that CSS and HTML just make up an image by the name and put it in directory Images which is in the same directory you saved the CSS and HTML file. If someone finds a solution to that problem I'll greatly appreciate it. I worked on it for about 2 hours and can't figure out why it doesn't work. If I use IMG tags in HTML than it would work but then I would have problems updating my site.

The CSS is valid according to W3. And the page is valid XHTML 1.0 Strict.

I figured out as much that it doesn't work if the images are in a directory. I tried many things in attempt to fix it, but it still doesn't work.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • maxxximus
  • Beginner
  • Beginner
  • maxxximus
  • Posts: 42
  • Loc: UK

Post 3+ Months Ago

You dont need single quotes round your images in the css file. Might be the cause of your problem.

Also just for good measure i'd take it back to plain transitional - doubt your benefiting yourself by using strict. Also dont like the master reset - but thats up to you.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6241
  • Loc: Seattle, WA

Post 3+ Months Ago

maxxximus wrote:
You dont need single quotes round your images in the css file. Might be the cause of your problem.

Just the opposite, actually. The W3C specification calls for quotes around the URL in CSS2.
maxxximus wrote:
Also just for good measure i'd take it back to plain transitional - doubt your benefiting yourself by using strict.

I disagree. Running into a few design problems is no reason to head back to transitional. Writing the site in strict from the beginning will help you out in the long run. The strict doctype is the way XHTML is supposed to be written, whereas the transitional doctype is meant for people moving older legacy markup to newer XHTML.
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

Is the your map really called 'Images' or just 'images', mind the cap ;).
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Damn! I hate when I get a mind fart. I mean a very major one. :oops: that was my problem in the location of the files. Oh my God! I feel so stupid right now. Very stupid :oops: I put the CSS file in a directory titled 'Scripts" and my Images were in a new directory titled "Images" and that directory was in the same directory that the directory titled "Scripts" were in. :oops: I forgot the ../ in the CSS :oops:

But now, there is a different problem. Below are my current HTML and CSS

HTML

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Infomania - The place where everybody goes for information</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="en-gb" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="Infomania" />
<meta name="description" content="The place where everybody goes for information" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="Scripts/layout.css" type="text/css" />
</head>
<body>
<div class="wrap">
<div class="left_end"> </div>
<div class="content">
Please...
<blockquote>
<p>This is *peach* messed up</p>
</blockquote>
...help!

</div>
<div class="right_end"> </div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>Infomania - The place where everybody goes for information</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. <meta http-equiv="content-language" content="en-gb" />
  7. <meta http-equiv="imagetoolbar" content="no" />
  8. <meta name="resource-type" content="document" />
  9. <meta name="distribution" content="global" />
  10. <meta name="copyright" content="Infomania" />
  11. <meta name="description" content="The place where everybody goes for information" />
  12. <meta name="keywords" content="" />
  13. <link rel="stylesheet" href="Scripts/layout.css" type="text/css" />
  14. </head>
  15. <body>
  16. <div class="wrap">
  17. <div class="left_end"> </div>
  18. <div class="content">
  19. Please...
  20. <blockquote>
  21. <p>This is *peach* messed up</p>
  22. </blockquote>
  23. ...help!
  24. </div>
  25. <div class="right_end"> </div>
  26. </div>
  27. </body>
  28. </html>


And below is the CSS

Code: [ Select ]
    /* Reset browsers default margin, padding and font sizes */
* {
    margin: 0;
    padding: 0;
}
    /* General commands of the website */
body, html {
    width: 100%;
    height: 100%;
    background-image: url('../Images/main_body_bg.PNG');
}
blockquote {
  background-color: #777777;
  border-color: #000000;
  border-style: dashed;
  border-width: thin;
  font-family: monospace;
  font-size: 14px;
  font-variant: normal;
  float: right;
  width: 70%;
  margin-top: 5px;
  margin-right: 20px;
}
p {
    margin-top: 0px;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0px;
    margin-bottom: 0px;
}
    /* Website DIVs commands */
.wrap {
    position: relative;
    background-image: url('../Images/main_body_bg.PNG');
    height: 100%;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.content {
    position: absolute;
    width: 100%;
    height; 100%;
    margin-left: auto;
    margin-right: auto;
    float: right;
}
    /* Edges and corners DIVs commands */
.left_top {
    background-image: url('../Images/left_top.PNG');
    width: 2px;
    height: 2px;
}
.right_top {
    background-image: url('../Images/right_top.PNG');
    width: 2px;
    height: 2px;
}
.left_bottom {
    background-image: url('../Images/left_bottom.PNG');
    width: 2px;
    height: 2px;
}
.right_bottom {
    background-image: url('../Images/right_bottom.PNG');
    width: 2px;
    height: 2px;
}
.top_main {
    background-image: url('../Images/top_main.PNG');
    width: 100%;
    height: 2px;
}
.bottom_main {
    background-image: url('../Images/bottom_main.PNG');
    width: 100%;
    height: 2px;
}
.left_main {
    background-image: url('../Images/left_main.PNG');
    width: 2px;
    height: 100%;
}
.right_main {
    background-image: url('../Images/right_main.PNG');
    width: 2px;
    height: 100%;
}
.left_end {
    background-image: url('../Images/left_end.PNG');
    width: 20px;
    height: 100%;
}
.right_end {
    background-image: url('../Images/right_end.PNG');
    width: 17px;
    height: 100%;
    float: right;
    position: relative;
}
.logo {
    background-image: url('../Images/logo.PNG');
}
.logo_2 {
    background-image: url('../Images/logo_2.PNG');
}
  1.     /* Reset browsers default margin, padding and font sizes */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6.     /* General commands of the website */
  7. body, html {
  8.     width: 100%;
  9.     height: 100%;
  10.     background-image: url('../Images/main_body_bg.PNG');
  11. }
  12. blockquote {
  13.   background-color: #777777;
  14.   border-color: #000000;
  15.   border-style: dashed;
  16.   border-width: thin;
  17.   font-family: monospace;
  18.   font-size: 14px;
  19.   font-variant: normal;
  20.   float: right;
  21.   width: 70%;
  22.   margin-top: 5px;
  23.   margin-right: 20px;
  24. }
  25. p {
  26.     margin-top: 0px;
  27. }
  28. h1, h2, h3, h4, h5, h6 {
  29.     margin-top: 0px;
  30.     margin-bottom: 0px;
  31. }
  32.     /* Website DIVs commands */
  33. .wrap {
  34.     position: relative;
  35.     background-image: url('../Images/main_body_bg.PNG');
  36.     height: 100%;
  37.     width: 60%;
  38.     margin-left: auto;
  39.     margin-right: auto;
  40. }
  41. .content {
  42.     position: absolute;
  43.     width: 100%;
  44.     height; 100%;
  45.     margin-left: auto;
  46.     margin-right: auto;
  47.     float: right;
  48. }
  49.     /* Edges and corners DIVs commands */
  50. .left_top {
  51.     background-image: url('../Images/left_top.PNG');
  52.     width: 2px;
  53.     height: 2px;
  54. }
  55. .right_top {
  56.     background-image: url('../Images/right_top.PNG');
  57.     width: 2px;
  58.     height: 2px;
  59. }
  60. .left_bottom {
  61.     background-image: url('../Images/left_bottom.PNG');
  62.     width: 2px;
  63.     height: 2px;
  64. }
  65. .right_bottom {
  66.     background-image: url('../Images/right_bottom.PNG');
  67.     width: 2px;
  68.     height: 2px;
  69. }
  70. .top_main {
  71.     background-image: url('../Images/top_main.PNG');
  72.     width: 100%;
  73.     height: 2px;
  74. }
  75. .bottom_main {
  76.     background-image: url('../Images/bottom_main.PNG');
  77.     width: 100%;
  78.     height: 2px;
  79. }
  80. .left_main {
  81.     background-image: url('../Images/left_main.PNG');
  82.     width: 2px;
  83.     height: 100%;
  84. }
  85. .right_main {
  86.     background-image: url('../Images/right_main.PNG');
  87.     width: 2px;
  88.     height: 100%;
  89. }
  90. .left_end {
  91.     background-image: url('../Images/left_end.PNG');
  92.     width: 20px;
  93.     height: 100%;
  94. }
  95. .right_end {
  96.     background-image: url('../Images/right_end.PNG');
  97.     width: 17px;
  98.     height: 100%;
  99.     float: right;
  100.     position: relative;
  101. }
  102. .logo {
  103.     background-image: url('../Images/logo.PNG');
  104. }
  105. .logo_2 {
  106.     background-image: url('../Images/logo_2.PNG');
  107. }


The content and right_end on the HTML don't show correctly. Once you tried that you would see what I mean by that.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 37 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.