/    Sign up×
Community /Pin to ProfileBookmark

Table margin problem in Firefox on the Mac

Copy linkTweet thisAlerts:
Apr 02.2007

Greetings.

I need help understanding why the table margin is rendering wrong in Firefox (Mac) on
[url]http://www.toddwatts.com/toddwatts_exhibitions.html[/url]

but works fine with
[url]http://www.toddwatts.com/toddwatts_bibliography.html[/url]

They link to the same CSS doc, the main HTML difference being the captions. The HTML and CSS validate. The page looks fine in Safari and Opera, and I was told that it’s even okay in IE and FF in Windows.

This is the latest CSS for the tables–
table{
margin: 3em 0;
text-align: left;
border-collapse: collapse;
empty-cells: show;
caption-side: top;
}

caption{
text-align: left;
font-weight: bold;
font-size: 100%;
padding: 0 0 .2em 1.1em;
}

td{
vertical-align: text-top;
padding: .2em 0;
}

td.year{
width: 5em;
padding-left: 1em;
}

td.info{
width: auto;
padding-right: 1em;
}

Tables seemed appropriate on these pages. The rest of the site is HTML and CSS only. Any clue would be most appreciated.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienApr 02.2007 — Captions are a temperamental thing. The top margin of a TABLE seems to push the CAPTION up. I usually remedy this by removing the top margin on the table and putting it on the caption. In your case, you could probably put a -3em bottom margin on the CAPTION and shore up that gap.
Copy linkTweet thisAlerts:
@10digitauthorApr 02.2007 — Thanks for the suggestion. This is what I did (adding last line only)--

caption{

text-align: left;

font-weight: bold;

font-size: 100%;

padding: 0 0 .2em 1.1em;

margin-bottom: -3em; /*FF hack*/

}

It helped shore up the gap in FF. However, in Safari, both captions landed over the second rows of the tables. In Opera, it made everything below the first caption (essentially the entire page) disappear.

Did I misunderstand your instructions? If not, I think I may abandon CAPTIONs and use H3s instead.
Copy linkTweet thisAlerts:
@toicontienApr 04.2007 — Hm. Looks like you'll have to remove the top margin on the TABLE and also remove the bottom margin on the CAPTION.
Copy linkTweet thisAlerts:
@10digitauthorApr 04.2007 — I had to get on with the job, so I replaced all uses of <caption> with <h3>, as I was also working on a page with 4 <table>s, which required headings as well. The results are okay in all browsers. I never had the problem before, but perhaps it was because <table> and <caption> were below an <h1>. I was very surprised that it was FF quirk, not IE.

I will keep your suggestions in mind for the next time, or if I get a chance to experiment with the page. I'll post my results if it's successful.

Thanks again.
×

Success!

Help @10digit 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 5.6,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...