Jump to content

Are background images unsupported in XHTML+CSS?


dalewb

Recommended Posts

After scouring this site and wasting many hours on this, I am turning here in hopes of some solutions. I just "switched" to XHTML from HTML - honestly, it doesn't seem that big of a switch, but ever since doing so, I cannot get background images to show up inside divs. I've tried doing it in the CSS code and the XHTML code to no avail. Since this site is just starting, the code isn't that lengthy:CSS:

/* =Structure----------------------------------------------- */body{	margin: 0;	padding: 0;	background-color: #0b0000;	background-image: url(images/bas11go256_dark_autumn.jpg);		color: #2e2d2a;	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 12px;	text-align:center;		}a img {	border: 0;	}p { /* Remove this margin from headers if you want paragraphs following them to be right underneath instead of separated from the heading with a line space */	margin: 0 0 1em;	}/* =StructureDivs----------------------------------------------- */#main {	width: 800px;	height: 720px;	margin: 10px auto 0 auto;	background-color: white;	overflow: auto;		}#banner {	float: left;	width: 800px;	height: 215px;	margin: 0 0 5px 0;	background-color: black;	overflow: hidden;	}#navigation {	float: left;	width: 800px;	height: 40px;	padding: 8px 0 0 0;	background: white url('images/gradient-clear_to_black.gif') top left repeat;	overflow: auto;	line-height: 12px;	vertical-align: top;	}#nextmeeting {	float: left;	width: 600px;	height: 130px;	padding: 20px;	overflow: auto;	background: #B5C384;	}#artist {	float: left;	width 270px;	height: 130px;	padding: 20px;	overflow: hidden;	background: #C0AD9F;	}	/* =Links----------------------------------------------- */#navlinks li {	display: inline;	list-style: none;	letter-spacing: .1em;		padding: 0 2em 0 2em;	border-right: 1px dashed gray;	}a:link {font-family: Georgia, "Times New Roman", Times, serif; text-decoration: none; color: #546810; font-weight: bold;}a:visited {font-family: Georgia, "Times New Roman", Times, serif; text-decoration: none; color: #546810; font-weight: bold;}a:hover {font-family: Georgia, "Times New Roman", Times, serif; text-decoration: underline; color: rgb(125, 74, 53); font-weight: bold;}

AND the HTML:

<?xml version="1.0" encoding ="iso-8859-1"?><!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"><head>  <title>IGDA: Raleigh, Durham, Research Triangle Park, North Carolina</title>    <link rel="stylesheet" type="text/css" href="css/main.css" /></head><body><div id="main">  <!-- <This div holds the entire body of the website> -->		<div id="banner">		<a href="index.html"><img src="images/banner04.gif" alt="Click here to return to the home page.  Image of the Raleigh skyline in the late afternoon with a rainbow in the sky overhead.  Logo in upper left corner reads I G D A, International Game Developers Association.  Subtitle in upper right corner reads Triangle Chapter, North Carolina.  Raleigh, Cary Durham, Chapel Hill." title="Click to return to the home page"></a>	</div>	<div id="navigation">	  <ol id="navlinks">	    <li>Home</li>	    <li><a href="forums.html">Forums</a></li>	    <li><a href="info.html">Info</a></li>	    <li><a href="newsarchive.html">News Archive</a></li>	    <li><a href="artist.html">Featured Artist</a></li>	  </ol>	</div> <!-- <END navigation div> -->	<div id="nextmeeting">		<p>Our next meeting will be soon</p>	</div> <!-- <END nextmeeting div> -->	<div id="artist">		<p>Artist info here</p>		<img src="images/200pxspacer.jpg" alt="a" width=80px>	</div> <!-- <END artist div> --></div> <!-- <This ends the main div> --></body></html>

Told ya it's short - just getting started here! If someone could help me figure out why background images will not show up, I'd be most grateful. Please notice the attempt in the CSS code near the top under "body {".I'm using "Strict" in the DOCTYPE in the hopes that my box models (in the divs) will match up between IE and Firefox. So far, no dice: widths and paddings and all that kind of stuff are acting really wierd between browsers :). If this is not enough information, please let me know. Thanks!

Link to comment
Share on other sites

Try single quotes around the image filename:

body{margin: 0;padding: 0;background-color: #0b0000;background-image: url('images/bas11go256_dark_autumn.jpg');color: #2e2d2a;font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px;text-align:center;}

Also, to get the Browsers rendering the same, try removing the blank line at the start of the file and you might also try removing the xml prologue. I think it has the effect of forcing IE into Quirks mode, or something like that. Try it and see if it makes a difference. :) Report the results back here, please and thanks.

Link to comment
Share on other sites

IE7 has no problems with the box model and the XML prolog. It uses the W3C box model (used before and now by Firefox), but if you want compatability with IE6, you should still not add the XML prolog.For the image, are you sure it's in it's proper place? If your XHTML file is located at:example.com/index.htmlthen the image must be atexample.com/images/bas11go256_dark_autumn.jpgThe quotes might be a fix, but when there's no link, I just have to ask.

Link to comment
Share on other sites

Man! I feel like such a clutz. I put the css file in a "css" subfolder for the first time (this is only my second website being made from scratch) and didn't take that into account when I created the image file URI.For that reason, the single quotes didn't work :). But for the record, now that I got the URI correct, I tried it with and without the single quotes without any noticeable effect. They don't seem to matter in XHTML (this is of course inside the css code).I deleted the XHTML prologue and it didn't seem to have an effect, but I haven't had time to do much mucking about this morning and I won't until later today. But I'll try some web design without the prologue and get back to you all. Just so you know, I have read the stickies on this forum and visited some suggested sites, including the one that details Quirks mode and the one that details how the box model stands up in different browers, both current and old - it's a deep article that requires a lot of study, so I am working to understand the whole issue; therefore, I appreciate any help that'll get me going a bit faster because learning all of this takes forEVer. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...