/    Sign up×
Community /Pin to ProfileBookmark

styling table – spacing problem

Copy linkTweet thisAlerts:
Jul 22.2006

Hi All,

I have a table I am trying to recreate based off a jpg mockup. I have two problems which I cannot seem to solve:

1) I have the question mark icon in the top right corner, positioned relative to the caption. I do not understand why there is all that room underneath there to make the caption very tall. I had removed the code that has the linked image and looks normal, so something is wrong on how I placed that image.

2) Is there any way to recreate the border shown on the mockup while retaining a auto-sizing table?

Currently I have a div set at 95% with a border and the table at 100% since I do not know how to make DIV fit the content.
I have tried using a table border, but the caption seems to override this, so it looks funny.
Am I missing something?

The HTML (with embedded CSS) can be found here: [url]http://www.jiwani.net/test/[/url]
The table on the bottom is the mockup.

Any help is appreciated!

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@VladdyJul 22.2006 — 1:caption {
margin: 0;
padding: 2px;
font-weight: bold;
font-size: .75em;
color: #FFFFFF;
background-color: #575757;
line-height: 1em;
}
.questionicon {
right: 2px;
float: right;
position: relative;
margin: 0 0 -12px 0;
padding: 0;
top: -12px;
}

2: not sure what you mean, the borders look identical to me...
Copy linkTweet thisAlerts:
@alijiwaniauthorJul 22.2006 — thank you for the answer to the first problem. Most appreciated!

For the second.

I have uploaded a second version of the file here:

http://www.jiwani.net/test/border.html

This table has no width set - so it auto sets based on content and screen size. It also has a table border on. However, border does not surround the caption so it gives a different effect than the mockup image below it.

thanks for your help!
Copy linkTweet thisAlerts:
@VladdyJul 23.2006 — Try this:
.tableholder {
border: #000000 solid 1px;
padding: 1px;
margin: 0px auto;
}

#caselist {
font-size: 11px;
padding: 1px;
}
caption {
margin: 1px 1px 0 1px;
padding: 2px;
font-weight: bold;
color: #FFFFFF;
background-color: #575757;
line-height: 1.2em;
}
×

Success!

Help @alijiwani 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.18,
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,
)...