Member Avatar for minimogul

I am trying to style two different forms on one page. I want to do so with out using frames I am not fond of them. Most of the pages I have done only require form per page. Please help I thank you in advance and hope you guys can help me.

  • 2 Contributors
  • 2 Replies
  • 94 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by floatingDivs
floatingDivs commented: Good job doing the problem-solving on your own. +1

Dani AI

Generated

Good troubleshooting by — a broad form-level rule was leaking into the second form and producing the same layout for both. Broad selectors cascade, so scoping matters: give each form a distinct scope (class or container) or make selectors specific enough that rules only apply where intended.

Prefer classes for styling repeated or multiple components and reserve id values for unique elements; the HTML id value must be unique and id selectors carry higher specificity. See MDN for guidance on the id attribute (id attribute), class selectors (class selectors), and how specificity affects which rules win (specificity). A simple naming convention or scoping each form inside a named container makes maintenance easier and prevents accidental collisions with global rules or framework defaults.

Practical troubleshooting checklist:

  • Use the browser inspector to view computed styles and find the rule source.
  • Search CSS for global selectors (for example a generic form rule) and replace with form-specific classes or container-scoped selectors.
  • Verify there are no duplicate id values in the document.
  • Look for !important or third-party stylesheet rules that might override local styles.
  • If a UI framework is present (Bootstrap, etc.), check its base form styles and override with appropriately scoped selectors.
  • Consider using a consistent naming pattern (BEM or prefixes) to avoid future conflicts.

The core lesson from the thread is to scope styles deliberately and use the devtools to trace where an unwanted style originates. rightly acknowledged the fix — often the solution is the simplest change.

Recommended Answers

All 2 Replies

Member Avatar for minimogul

Well I found out what was wrong. I had attributes on a the form that made the second one behave like the first.

form
[
padding:200px;
blah;
blah;
blah;
]

So the solution was fairly simple give each form different ids and after that I was home free.

solution:

first#form
[stuff]

second#form
[stuff]

Its always the simple things lol.

Member Avatar for floatingDivs

Good job figuring it out on your own! +1 REP

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.