back-to-back background images not appearing consistently

Good afternoon,

I have published a sort of play on a web page in which the play characters are identified by small photographs, as well as their name in text. Thus, the left side of the screen has a column of images running down the side that identify the speakers of the text that is tabbed to the right.

This seems to be working only "sometimes" -- it's unpredictable. I have one page in particular that has just two characters talking back and forth and hence two images that should be alternating down the left side of the page. Only one image will show up however no matter what I change in the css. I have succeeded in the last 12 hours to get BOTH images to show separately (so it's not an image problem) but the two will never both show, one after the other as needed, on the same page.

Below please find the image classes as defined in my css style sheet as well as the html markup on the page showing where the images are meant to be inserted.

Again, the problem is that when I load the page, only one of these images will show up. There will just be a space where the other one should have appeared.

HTML MARKUP:

<div class='Santa'></div><div class='TextRidge'>Santa</div>

<div class='Frankie'></div><div class='TextRidge'>Frankie</div>

CSS STYLESHEET:

.Santa
{ background-color:transparent;
background-image:url('
../characters/santa.jpg');
background-repeat:no-repeat;
font-family:verdana;
font-size:125%;
color:rgb(11,113,65);
border-width:5px;
border-style:ridge;
border-color:rgb(11,113,65);
margin-bottom:70px;
margin-top:0px;
margin-left:-110px;
margin-right:0px;
float:right;
width:75px;
height:100px;
padding-top:100px;
padding-bottom:100px;
padding-left:100px;
padding-right:100px; }

.TextRidge {
float:left;width:200px;height:25px;font-family:verdana;color:rgb(11,113,65); }


.Frankie { background-color:transparent;
background-image:url('../characters/frankie.jpg');
background-repeat:no-repeat;
font-family:verdana;
font-size:125%;
color:rgb(11,113,65);
border-width:5px;
border-style:solid;
border-color:rgb(11,113,65);
margin-bottom:70px;
margin-top:0px;
margin-left:-110px;
margin-right:0px;
float:left;
width:75px;
height:100px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px; }



Thanks for any help. I've been tweaking the above code and trying every possible combination, and still only one image will show! Maybe I'm missing something obvious, but I'll be glad to know what it is.

Brian

 

You have a negative left margin on .Frankie. Could this be sending him off the left edge of the browser window out of view or hiding behind some other element on the page?

Also, you should really condense your css. for example, intead of:

padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;

Code (markup):

you could just use one line of code:

padding: 0;

Code (markup):

Why do you have all those font specific styles on empty divs that only contain background images?

 

Thanks for the response. That is, in fact, one possibility I have not yet investigated, so I will look into it. I just assumed that the problem had to be elsewhere since the negative number was identical in both divs -- but that may not be true.

I'm sure there's a much better way to do what I'm trying to do -- but right now I'm just struggling to find anything that works for my purposes and given my limited knowledge of CSS and the way my database and site is set up, this is the one way that I am able to do things at the moment -- though I'm sure I'll be changing to a more sensible way during the course of the coming year.

Regarding the reason for the empty div...(that calls the backup image).

It's hard to explain -- first, I want to call up the many repetitive images externally because including them on the source page is messy and seems to load more slowly, especially because I'm running my site with databases. I had been using the str_replace command in php to insert these character images of mine, but that seems to overwhelm browsers because of the many repetitive images that are called for.

Thanks again for the suggestion!

 

It is identical in both divs, but one is floated right and the other is floated left. If you have a negative left margin on a left floated div, then that div could easily disappear off the edge of the page or containing div.

Also, I was not questioning the empty div but rather the fact that you had font specific styling on a div that contains no fonts. While it probably won't hurt anything, unless you're planning on populating those divs with text, it's just not necessary and may be adding to your confusion.