View Full Version : I gots divs inside anchors - need alternative ideas

05-30-2007, 07:19 AM
:wave: Hi all,

Nooby two shoes here again to boggle your minds with my utter css cluelessness. :D

I'm trying to create the effect of images contained in round cornered boxes that change colour when hovered over. I have got it looking right (nb: only tested in firefox atm).


the html (for just 1 box)

<!--IEC-C19 Power Cord -->
<div class="roundbox4">
<a href="products/K3744.htm">
<div class="roundtop4">
<img src="Borders/tlround.gif" alt=""
width="15" height="15" class="corner"
style="display: none">
<img src="newproducts/K3744.gif" alt="" class="floatRightGall"/>
<p>IEC-C19 Power Cord</p>
<div class="roundbottom1a">
<img src="Borders/bl2.gif" alt=""
width="15" height="15" class="corner"
style="display: none">

The css:

.roundbox4 {
margin: 0px 0px 7px 4px;
width: 142px;
background-color: #f0f0f0;
color: #53565d;
float: right;

.roundtop4 {
background: url(../Borders/trgall4.gif) no-repeat right top;

.roundbottom1a {
background: url(../Borders/br1a.gif) no-repeat right top;

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;

.roundbox4 p {
margin: 0 5px;
padding: 5px 2px 2px 5px;
min-height: 28px;
text-align: left;
font-size: 8pt;

img.floatRight {
float: right;
margin-left: 15px;
margin-right: 3px;
margin-top: -5px;
position: relative;

BUT (and it's a big butt, not unlike my own) because I have put divs inside anchors to make it work, it won't validate. :( This idea of the entire box changing colour on hover is an effect I really like, but unfortunately my lack of css proficiency means I can't figure out how to code it in a way that will validate.

Was hoping that someone else may have played with this idea or similar (or is interested enough to have a look now) and has better ideas on to acheive the same effect with code that will validate.

05-30-2007, 07:58 AM
Use spans instead of paragraphs and divs. Make them display:block so they act like a div.

05-30-2007, 08:09 AM
Thanks Aerospace Eng. :)

Exactly the info I needed. :D
I'm on it. (Well I'm on to google to look up spans and learn how to use 'em first, then I'm on it).

I'll let you know how she goes.

05-30-2007, 08:26 AM
Spans by default are inline elements so they can be inside of links. Divs and paragraphs are block level elements and can't be inside of links as you have already discovered. You can style a span however you like.

05-30-2007, 08:40 AM
:tup: Muchas Gracias Aerospace,

I've spent a few weeks reading up on css, but I'd missed spans entirely, beginning with css is like drinking from the proverbial fire hydrant, there's a hell of a lot of new info to assimilate, I didn't know where to begin to look to solve this one - reckon you probably saved me a week of fruitless googling. :D

Just changed from divs to span, I still need to play around a bit more to get it right, but looks like the spans method'll work out nicely.

Thanks again, very much appreciated. :)

05-30-2007, 08:49 AM
Aerospace you're a legend! Its perfect now.
And came with some extra added unexpected bonuses - omg it even works in ie7!