DIV layer BG issues

  • Okashiko
  • Born
  • Born
  • User avatar
  • Posts: 2
  • Loc: Rhode Island

Post 3+ Months Ago

Ok, so here's my problem: In spite of having W3C valid HTML/CSS, none of my background images for my div layers are showing up when I try to view my page in my browser. I've used Safari and Firefox, and got the same problem both times.
Here's the code:
HTML Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sweet Surrender</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 
 
<body>
 
 
<div style="left: 0px; top: 0px; width: 200px; position: absolute; background-image: url(SS01.jpg);">
 </div>
<div style="left: 0px; top: 347px; position: absolute; background-image: url(SS09.gif);">
</div>
<div style="left: 358px; top: 0px; position: absolute; background-image: url(SS02.jpg);">
</div>
<div style="left: 508px; top: 0px; position: absolute; background-image: url(SS03.jpg);">
</div>
<div style="left: 508px; top: 390px; position: absolute; background-image: url(SS010.gif);">
</div>
<div style="left: 508px; top: 94px; position: absolute; background-image: url(SS06.gif);">
</div>
<div style="left: 508px; top: 57px; position: absolute; background-image: url(SS05.jpg);">
</div>
<div style="left: 849px; top: 95px; position: absolute; background-image: url(SS08.gif);">
</div>
 
 
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Sweet Surrender</title>
  5. <link rel="stylesheet" type="text/css" href="style.css">
  6. </head>
  7.  
  8.  
  9. <body>
  10.  
  11.  
  12. <div style="left: 0px; top: 0px; width: 200px; position: absolute; background-image: url(SS01.jpg);">
  13.  </div>
  14. <div style="left: 0px; top: 347px; position: absolute; background-image: url(SS09.gif);">
  15. </div>
  16. <div style="left: 358px; top: 0px; position: absolute; background-image: url(SS02.jpg);">
  17. </div>
  18. <div style="left: 508px; top: 0px; position: absolute; background-image: url(SS03.jpg);">
  19. </div>
  20. <div style="left: 508px; top: 390px; position: absolute; background-image: url(SS010.gif);">
  21. </div>
  22. <div style="left: 508px; top: 94px; position: absolute; background-image: url(SS06.gif);">
  23. </div>
  24. <div style="left: 508px; top: 57px; position: absolute; background-image: url(SS05.jpg);">
  25. </div>
  26. <div style="left: 849px; top: 95px; position: absolute; background-image: url(SS08.gif);">
  27. </div>
  28.  
  29.  
  30. </body>
  31. </html>

What I get out of that is this:
http://www.sweet-okashi.net/ss/singh.html
What my page is supposed to look like is this: http://sweet-okashi.net/ss/SS.jpg

I honestly don't know what I'm doing wrong here. Ever since I tried that background-image attribute, my layout has disappeared in its entirety.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Do any of them have a height defined in style.css ?

I don't see any childnodes which would automaticly imply a height, so a height would need to be defined in the CSS for each of the <div> elements.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6254
  • Loc: Seattle, WA

Post 3+ Months Ago

It's also good practice to put your image filenames in single quotes:

Code: [ Select ]
background-image: url('SS03.jpg');
  • Okashiko
  • Born
  • Born
  • User avatar
  • Posts: 2
  • Loc: Rhode Island

Post 3+ Months Ago

Thanks, Joebert! That solved the problem quite nicely.
This is the first time I've tried doing my layout like this with div layers, instead of the tables that Photoshop automatically generates.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

Okashiko wrote:
Thanks, Joebert! That solved the problem quite nicely.
This is the first time I've tried doing my layout like this with div layers, instead of the tables that Photoshop automatically generates.

Yeah, that's a very big step ... in the right direction ... good on you ...

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 24 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
 
 

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