Member Avatar for OmniX

I have a group of input type="submit" buttons inside a fieldset.

I am using javascript to alter the appearance of these input type="submit" buttons when I 'onMouseOver' and 'onMouseOut'.

When this happens this changes the size of the fieldset border and expands and shrinks depending on the mouse over/out event.

Any Ideas I can just keep the field set permentely expanded?

Thanks, Regards X

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

Dani AI

Generated

— good catch about the inset/outset swap; was right to ask for code, but the symptom you describe points to a purely CSS/layout issue rather than a mysterious JS bug.

Border is part of the CSS box model, so changing a button's border style or width can alter its computed size and cause the surrounding fieldset to reflow (box model). Some user agents render inset/outset with different visual thickness or shading, so toggling between them can look like the fieldset expands and shrinks (border-style).

Practical fixes you can apply right away:

/* keep border-width constant and use box-sizing so changes don't alter outer size */
input[type="submit"] {
  box-sizing: border-box;
  border: 2px solid #777;   /* explicit width prevents reflow when style changes */
  padding: 6px 10px;
}

input[type="submit"]:hover {
  /* change appearance without changing size: use box-shadow (does not affect layout) */
  box-shadow: 0 0 0 2px rgba(0,0,0,0.12) inset;
}

Or use outline for hover/focus visuals (outline does not affect layout): outline docs. Also prefer toggling CSS classes from JavaScript instead of repeatedly changing inline style properties — that avoids accidentally omitting explicit border-width when you set border-style.

Quick troubleshooting checklist:

  • Inspect computed styles in DevTools to see which property (border-width/style/padding) actually changes.
  • Ensure your JS isn’t setting different border-widths via shorthand.
  • If you need a stable fieldset size, set an explicit min-width/min-height or fixed padding on the fieldset.

Keep accessibility in mind: if you replace focus outlines, provide an obvious keyboard focus style so tab users remain visible. For non-layout visual effects prefer outline or box-shadow (box-shadow).

Recommended Answers

All 2 Replies

Member Avatar for Member #114696

Post your code. What I can say by assuming, is that at you set different border size for different events.

Member Avatar for OmniX

Umm ok....

Ill explain, I have 100s lines of code where this happens (each form I have with fieldset).
But not only that but each one incorporates CSS, Javascript, HTML, PHP, etc.
So even if I did post the code of one thing it might be something else?

If it helps, with Javascript when i set the border to outset for both mouseOut/Over it was fine but when I changed the mouseOut border to inset it gave me the adjustable fieldset border expands/shrinks.

Hope that helps :(

Thanks. Regards, X

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.