Background image sometimes wont show?

Hi all,

I have a site that has just gone live…

We are getting a funny bug,
on a background image on one link, yet it doesnt seem to happen on the other links…

on the “Mozambique” link here:
http://www.itheetravel.co.za/destinations.php

Sometimes its white background block doesnt show…
And i cant figure out why!?

It looks like the attachment…

any suggestions would help,
thankyou!

It may have something to do with the fact that you include a div (a block element) inside an A (inline) element. Inline elements are not supposed to content block elements for a start.

hi there!..

so are you saying i should code the css like so:

destinationsubs a:{
}

destinationsubs a:hover{
}

?

the background images have transparency…
im not 100% ok with using opacity in css as some browsers arent happy with it

I’m saying that your html should be

<div class="destinationsub"><a href="#">Madagascar</a></div>

instead of

<a href="#"><div class="destinationsub">Madagascar</div></a>

But then, I do wonder why you use divs even for the titles.

yeah thanks, understood that…
but then obviously the css would need to change too, my example correct?

Yes as long as you change the html from this:


<br/>
                    <a href="http://www.itheetravel.co.za/destinationsdetail.php?continent=AFRICA AND SURROUNDS&country=Madagascar">
                    <div class="destinationsub">Madagascar</div>
                    </a> <br/>

To this instead:


<div class="destinationsub">
<a href="http://www.itheetravel.co.za/destinationsdetail.php?continent=AFRICA AND SURROUNDS&country=Madagascar">Madagascar</a>
</div>

As the anchor is floated you can give it dimensions anyway (If it were nt floated you would need to make it display:bock).

Don’t use breaks to make space just use a margin-bottom instead.

However, I didn’t actually see the problem occurring with your link so there may be another issue but you need the valid code first anyway.