/    Sign up×
Community /Pin to ProfileBookmark

I am tired! FieldSet bugging me in FireFox

Copy linkTweet thisAlerts:
Jan 22.2008

HTML layout is like this:

[CODE]

<div>
<fieldset>
<table>
<tr>
<th>text1</th>
<th>text2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
</fieldset>
</div>
[/CODE]

This works great in IE6, IE7. In firefox, “data2” is overlapped on “data1”. If I remove fieldset, works ok.

What is wrong here? Thanks.

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAJan 22.2008 — Normally, <fieldset> is used in a form to group form elements; it is not designed to be a decorative container. ?

As to the overlap, it's hard to tell without seeing it in your page.
Copy linkTweet thisAlerts:
@drhowarddrfineJan 22.2008 — As KDLA says, you are not using <fieldset> correctly so what a browser will do with that is unknown, but never use IE as any reference to how things should work.
Copy linkTweet thisAlerts:
@apeaceJan 22.2008 — Codingisfun,

If you want help, just give us a link to your page. It can probably be fixed with CSS.

Like they said, you are not using fieldset properly.

But, maybe we can come up with a different solution for you.
Copy linkTweet thisAlerts:
@codingisfunauthorJan 22.2008 — Actually I used <legend> too!. Anyway, I changed fieldset,legend to "caption" and did not want to spend time on it. Thanks.
Copy linkTweet thisAlerts:
@TyeMJan 23.2008 — I've used tables in fieldsets for "decoration".

Just get the CSS to work right with the stylings on the table and fieldset.

My knowledge on CSS maybe behind but the only problem I encountered was that when my fieldset had an id/class attribute it didn't inherit default fieldset css options so I had to rewrite fieldset css into the specific class.
×

Success!

Help @codingisfun spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...