If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Link Box Line Problem

Hello everyone, i have tried to searc this problem through and through and don't seem to find it. I don't know how to describe it in other words so:
I have a <div> inside a parent link <a> element. Inside the <div> i put text. I styled the <div> element to look like a box the size of the text (here) but if you have noticed, when hovering the mouse at the same height that the button is (i have put that zone in yellow, remove it if you want, the link stays.
Can you help me? How do I make this link zone as small as the button? I'm going to need to because i want to put more buttons, and space between them. I tried several things but nothing changes.
Thank you in advance.

Despite HTML 5's claims to the contrary, putting block level tags (like DIV) inside inline-level ones (like Anchor) is broken and buggy cross browser; there is a reason that up until HTML 5 came along it was invalid markup, and it's just another example of why I think HTML 5's "loosened structural rules" is a bunch of grade A farm fresh prairie pies.

Cannot go inside ANY of the inline-level tags. Simple HTML structural rules that nobody bothered learning, and now HTML 5 just wants to piss all over.

Mind you that's HTML level, NOT CSS "display" -- two separate things even if the display by default in most cases starts out the same.

Which is why I'd lose the DIV and make the anchor display:block; Or as I often say, just as George Carlin said "not every ejaculation deserves a name" not every semantic tag needs a div around it or a class on it. Far too often people add DIV around (or worse inside) things where they aren't doing ANYTHING that couldn't be applied to the other tags already on the page. See the constant wrapping of DIV (or the new idiotic NAV tag) around menu lists -- only time you need to do that is full-width background with a semi-fluid inside; in most cases that means people are adding that extra wrapping element for nothing they couldn't just apply to the UL.

Which is kind-of what it sounds like is your problem, adding a DIV where you don't need one.

Then if i move the anchor tags inside the div, they will be around the text and only the text will be clickable, but i want something like a button, to make the whole box clickable. In that case is this possible?

Then if i move the anchor tags inside the div, they will be around the text and only the text will be clickable, but i want something like a button, to make the whole box clickable. In that case is this possible?

display:block; or display:inline-block; The former if you want it to act like a block-level element (while still not being block-level), the latter if you want it inline but want to be able to set height and vertical padding.

I really cant understand what the question is. i mean why you need to put div inside of a anchor tag ? you can style anchor as you want.

A lot of people just starting out -- and even a lot of so called "experts" cannot separate in their head that the default appearance of a tag has nothing to do with it's meaning, and still choose their tags based on that default appearance; the notion that you can make any tag look, do or behave like almost any other tag with CSS is lost on that crowd.

As I often say, if you choose your tags based on their default appearance, you are choosing the wrong tags for all the wrong reasons.

But that's why you'll constantly see people slapping DIV around things, inside of things, and all for no good reason; it's like how they can't grasp inheritance either and so slap the same class on a bunch of sibling level elements.

There are some basic fundamentals to HTML and CSS that just aren't in the tutorials and books out there, mostly because the authors of such still have their heads wedged up 1997's backside. Do a "view source" on the default template for turdpress to see great examples of such developer ineptitude.

For people just starting out -- they're just led astray. I can forgive ignorance; It just really yanks my chain when people who claim to be "experts" do the exact same type of asshattery; see the "WhatWG" and the train wreck of nonsense they came up with known as HTML 5.