Member Avatar for OmniX

I am trying to set the the attributes (border, width, etc) of a href tag.

But it is being very annoying!

Padding is working and color and thats just about it.

Width, height, borders (only see 2/3 out of the 4 sidded box), etc.

Is not working, any ideas?

Thanks, Regards X

PS: Only thing I can think of is hidden clashes? but this was working for me last time I used it

  • 2 Contributors
  • 3 Replies
  • 113 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by OmniX

Dani AI

Generated

wanted a link to look like a box and asked what exactly — the key point missing from the thread is that anchors are inline by default, so width/height are ignored even though padding and color still work. The reliable fix is to give the link a block-level formatting context (either display:block for a full-line box or display:inline-block to keep it in-line while accepting width/height).

A minimal example to create a boxed link:

a.box {
  display: inline-block;
  padding: 6px 10px;
  width: 140px;
  height: 34px;
  line-height: 34px;        /* vertically center text */
  border: 1px solid #333;
  text-decoration: none;
  box-sizing: border-box;   /* include border/padding in width */
  vertical-align: middle;
}

/* keep styles consistent across states */
a.box, a.box:visited, a.box:hover, a.box:active { border-color: #333; }

Troubleshooting checklist if borders still look wrong:

  • Inspect computed styles in DevTools to see which rule sets display, border, width, height (specificity may be overriding your rule).
  • If parts of the border are clipped, check parent elements for overflow: hidden or overlapping siblings — try position: relative and a higher z-index on the link to test.
  • If the link wraps an image, apply display:inline-block to the anchor or add padding to the image instead.
  • For legacy IE quirks (if you must support them), display:inline-block on an inline element generally works; older IE may require a layout trigger (e.g., zoom:1) — but avoid removing keyboard focus outlines without providing an accessible alternative.

These steps resolve the usual cases where width/height/border appear not to work on <a> tags.

Recommended Answers

All 3 Replies

Member Avatar for Alv45525

what r you trying to do exactly???

Member Avatar for OmniX

In short.

Change the appearance of a href tag so it looks more like a box.

Member Avatar for OmniX

Bad heading ill start a new thread. Sorry :(.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.