Image in div - issue

[Shado]

Good day all

Once again I'm banging my head with a css problem - I can't figure out why the problem has come up as I have used this technique on a previous site and it worked fine.

I have a div and in the div I have 3 classes - the top and bottom class holds an image and the middle class my content. Now all 3 classes and the div have height and width but the image in the top class is not showing in IE, FF and DW.

#container {
width: 780px;
height: 570px;
text-align: justify;
margin: 20px auto;
}
#container .rb-box {
width: 740px;
height: 540px;
background-color: #FFFFFF;
padding: 0px 20px;
margin-top: 24px;
}
#container .rb-top {
width:780px;
height:24px;
background-image: url(images/rb_top.gif);
background-repeat: no-repeat;
float: left;
}
#container .rb-bottom {
width:780px;
height: 24px;
background-image: url(images/rb-bottom.gif);
background-repeat: no-repeat;
}

HTML code (content removed)

<div id="container">
<div class="rb-top"></div>
<div class="rb-box">
[content removed]
</div>
<div class="rb-bottom"></div>
</div>

I have tried clear:both to no avail and would appreciate if someone can steer me in the right direction and my research is getting me nowhere.

Thanks in advance

[SevenCubed]

This should help resolve the problem

#container .rb-top {
width:780px;
height:24px;
background: url(images/rb_top.gif) no-repeat;
float: left;
}

#container .rb-bottom {
width:780px;
height: 24px;
background: url(images/rb-bottom.gif) no-repeat;
}

[Shado]

I'm afraid not - by combining background image and repeat you only duplicates what is already there and I get smacked on the hand by my validator for not using the correct format.

I have my reasons why

background-image: url(images/rb-bottom.gif);
background-repeat: no-repeat;

is better for me than

background: url(images/rb-bottom.gif) no-repeat;

The advantage is less code and faster download time but the chances of making a mistake is so much more and I hate spending hours trying to find a stupid mistake hence I try not to use it.

But thank you for trying ;)

[SevenCubed]

What are you using as a validator? The above CSS works in all browsers and validates. I tried it, have you?

[Shado]

W3 - it does not say it's wrong just that I should consider rethinking it but it also depends on doc type.

[SevenCubed]

Shado please help me understand what you mean by:

by combining background image and repeat you only duplicates what is already there and I get smacked on the hand by my validator for not using the correct format

How can it be the correct format if it doesn't work?

I used the same W3C validator and it didn't generate any errors plus the images display properly in all browsers.

You say you have reasons why you prefer your version (which doesn't work) to what I posted because:

the chances of making a mistake is so much more

What am I potentially overlooking that may cause me to regret using it the way I have always been? If you aware of a potential conflict in that line please point it out to me.

Also please post what you decide to go with as a solution because I would like to see how it differs from what I offered. I'm always interested in how others write markup because I know there are many ways of accomplishing the same result and sometimes we can learn to write more efficient code by learning from others.

[Shado]

Hi Seven

Firstly I tried your suggestion but it did not work to resolve my problem.

With regard to my comment - I use a strict doc type and when I validate it always suggests I split my background shorthand however it never brings it up as an error just a suggestion. So I prefer not to code with shorthand, I have also found that it helps me to find mistakes by doing it that way.

So what I am saying is that it is not wrong but its my preference.

As for the solutions to the problem - I'm still looking but the image is still not showing even though the same code and image works fine on the bottom of the div.

[Matthew1980]

Hi all,

personally I would knock off the Id reference from the css references - *I think* that the values get inherited from the parent in this scenario, so just referring to the class name on its own should do the trick.

And you need the '' quotes when referencing a value in the url(); path too, that, and make sure that the path is actually correct - that's caught us all out at some point in time :)

Also, background: url('images/rb-bottom.gif') no-repeat; is a better way of expressing something too, less code :) I'm all for less coding!

Cheers,
MRb

[Shado]

Thanks guys - I've found the problem.

Seems .rb-top was inheriting a background color (same color as the image from .rb-box and as the corners of the image are transparent I gave rb-top the same color as the background - problem solved.

#container {}
#container .rb-box {background-color: #FFFFFF;}
#container .rb-top {}
#container .rb-bottom {}

So in fact my image was there all the time I just could not see it as both the image and div were white.

Thanks again for the suggestions - it made me think of my coding style in a whole.

[SevenCubed]

Thanks for the feedback Shado and I'm glad you got it resolved.