By dabellator on
Hello everyone, I've always received such great support in the forums, so I'm back again with what I hope to be a simple issue. I'm trying to put a rectangle on page with html that has four linked quadrants. I did this with html with the following code:
<p><a href="node/16"><div class="tile1">weddings</div></a><a href="node/16"><div class="tile2">artistic</div></a></p>
<a href="node/16"><div class="tile3">commercial</div></a><a href="node/16"><div class="tile4">more</div></a>
Trouble is, the first two sections end up being broken by a paragraph, so everything ends up looking a little staggered. I tried to put them both in the same paragraph, but it still breaks them up. When I check my firebug, it actually seems to place a break between the two.
Any ideas on how I can line everything up? Thanks as always!
-JB
Comments
Replace the tags with tags.
Replace the "p" tags with "div' tags.
Thanks for the quick reply!
Thanks for the quick reply! Unfortunately, that didn't equal them out. I should probably point out that in css I'm floating my left section "left" and my right, "right." That's why I made each one its own div class, so I could have control over it's placement and what happens on mouseover.
Any other thoughts?
-JB
VALIDATE
http://validator.w3.org/
Firebug will 'correct' your broken code when it tries to interpret the DOM it finds, so it can sometimes hide the actual problem.
The actual problem - from the code you pasted - is that it's illegal to place a DIV inside an A
If you think you know better than the W3C and the browsers about why that is a bad idea ... then you can change your header to be HTML-transitional and not XHTML-strict and maybe the rendering engine will let you get away with it.
Otherwise, follow the strict rules and your problems will dissolve.
You can set the 'A' to display:block and give it dimensions instead of the wrapper div you have there.
.dan. is the New Zealand Drupal Developer working on Government Web Standards