Image link question

[Stormraven]

Im creating my own style and we coded it but for some reason vbulletin is playing up and I cant understand why, here is the css code for the main image.

#logo {
background: transparent url(images/misc/banner.png)top left no-repeat;
position: relative;
float: left;
height: 110;
}


and here is the other bit, the html div:


<div id="logo">
<a href="/"></a>
</div>

for some reason that wouldnt work,, to get it to work we had to put the image code there again for some reason, like this:

<div id="logo">
<a href="/"><img src="images/prowebforums/misc/banner.png" border="0" /></a>
</div>

I don't understand why we have to declare the main logo twice, its nothing big but I just want to understand why it's doing this.

[tipoboy]

http://jigsaw.w3.org/css-validator/

when you copy your css into the validator you get this error:

In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected

also using this:
<div id="logo">
<a href="/"><img src="images/prowebforums/misc/banner.png" border="0" /></a>
</div>

you are placing the image as a clickable hyperlink image and not a background attribute like you were using this CSS:

#logo {
background: transparent url(images/misc/banner.png)top left no-repeat;
position: relative;
float: left;
height: 110;
}

Try using this code:

CSS:


#logo {
background-image: url(images/misc/banner.png) top left no-repeat;
float: left;
position: relative;
height: 110px;
width: whatever size you wishpx;
}


also sometimes when adding additional CSS the background attribute needs a leading slash there for try this:


#logo {
background-image: url(/images/misc/banner.png) top left no-repeat;
float: left;
position: relative;
height: 110px;
width: whatever width you wantpx;
}


let us know how you get on...