I am cuurrently building a web site, to state the obvious. There is no content yet, as I am still working on the layout. Anyway, I am having an issue where one of my divs' background images does not display, and a span inside the div has the same issue. All other background and foreground images display normally. I have validated my CSS and XHTML, and both are valid. The images exist and are not corrupted and I have typed in the URL for each correctly. My page is here (<!-- m --><a class="postlink" href="http://www.w00tism.net/prototype2.shtml">http://www.w00tism.net/prototype2.shtml</a><!-- m -->), my stylesheet is here (<!-- m --><a class="postlink" href="http://www.w00tism.net/basicstyles.css">http://www.w00tism.net/basicstyles.css</a><!-- m -->), and the problematic images are here (<!-- m --><a class="postlink" href="http://www.w00tism.net/images/navbar.jpg">http://www.w00tism.net/images/navbar.jpg</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://www.w00tism.net/images/navbarend.gif">http://www.w00tism.net/images/navbarend.gif</a><!-- m -->). Any help would be greatly appreciated. Also, here are the style properties for the problematic pieces:
#navbar {position: absolute; top: 400px; left: 0px; height: 150px; background-image: url(<!-- m --><a class="postlink" href="http://www.w00tism.net/images/navbar.jpg">http://www.w00tism.net/images/navbar.jpg</a><!-- m -->)}
#navbarend {width: 150px; height: 150px; background-image: url(<!-- m --><a class="postlink" href="http://www.w00tism.net/images/navbarend.gif">http://www.w00tism.net/images/navbarend.gif</a><!-- m -->); position: relative; top: 0px; right: -150px}
The strangest bit is that they worked a while ago, and then stopped working suuddenly, even though I had not changed anything relating to them.All the images load fine for me.
I see nothing in your CSS/XHTML that would cause a problem.Hey - I've played around a little.
I think it was an issue with the width setting of your navbar - either that or the fact that you were using spans rather than divs (I'm not sure to be honest).
Anyway, please have a look here (<!-- m --><a class="postlink" href="http://cheers-sendai.com/prototype2.shtml">http://cheers-sendai.com/prototype2.shtml</a><!-- m -->) .
I hope this helps.
Cheers.hmmmm....strange.
just curious i haven't looked too much into it, but what are the heights of the images? will they fit in the 150px? not sure. also, any reason you are using absolute urls? not that it will help fix your problem.Anyway, please have a look here .
Interesting. Seems to work fine there. Anyway, would there be any alternative to using spans? Divs add line breaks, which is bad. I think I saw Google use a "nobr" tag, but I might have been hallucinating. And why would my width settings be an issue? I have no width settings. Would the lack of width settings be the issue?
any reason you are using absolute urls?
Well, I want to access files relative to my root directory, but Firefox doesn't seem to like me appending a lone slash to the front of my URIs. So, absolute URIs.Yes - your lack of widths is the issue.
The line break caused by divs (because they are block-level elements) is irrelevant if you're using absolute positioning (as you are here).
As for the absolute URLs - you don't need a single slash. Just put "images/navbarend.gif".
Good luck.Thank you!
#navbar {position: absolute; top: 400px; left: 0px; height: 150px; background-image: url(<!-- m --><a class="postlink" href="http://www.w00tism.net/images/navbar.jpg">http://www.w00tism.net/images/navbar.jpg</a><!-- m -->)}
#navbarend {width: 150px; height: 150px; background-image: url(<!-- m --><a class="postlink" href="http://www.w00tism.net/images/navbarend.gif">http://www.w00tism.net/images/navbarend.gif</a><!-- m -->); position: relative; top: 0px; right: -150px}
The strangest bit is that they worked a while ago, and then stopped working suuddenly, even though I had not changed anything relating to them.All the images load fine for me.
I see nothing in your CSS/XHTML that would cause a problem.Hey - I've played around a little.I think it was an issue with the width setting of your navbar - either that or the fact that you were using spans rather than divs (I'm not sure to be honest).
Anyway, please have a look here (<!-- m --><a class="postlink" href="http://cheers-sendai.com/prototype2.shtml">http://cheers-sendai.com/prototype2.shtml</a><!-- m -->) .
I hope this helps.
Cheers.hmmmm....strange.
just curious i haven't looked too much into it, but what are the heights of the images? will they fit in the 150px? not sure. also, any reason you are using absolute urls? not that it will help fix your problem.Anyway, please have a look here .
Interesting. Seems to work fine there. Anyway, would there be any alternative to using spans? Divs add line breaks, which is bad. I think I saw Google use a "nobr" tag, but I might have been hallucinating. And why would my width settings be an issue? I have no width settings. Would the lack of width settings be the issue?
any reason you are using absolute urls?
Well, I want to access files relative to my root directory, but Firefox doesn't seem to like me appending a lone slash to the front of my URIs. So, absolute URIs.Yes - your lack of widths is the issue.
The line break caused by divs (because they are block-level elements) is irrelevant if you're using absolute positioning (as you are here).
As for the absolute URLs - you don't need a single slash. Just put "images/navbarend.gif".
Good luck.Thank you!