/    Sign up×
Community /Pin to ProfileBookmark

Images Hurt Tables

Copy linkTweet thisAlerts:
Nov 04.2005

All right, I have a very precise layout on a site. For navigation, I’m using images, and they are a part of the layout itself.

I set up the images to be exactly the size of the table cells. The table cell is, for example, height of 20 and width of 40, and the image has the exact same dimensions. Cellpadding and cellspacing are both 0, and there are no borders on the table, yet for some reason, the table feels like adding a few pixels below the image. The below links should illustrate my problem. The first link is of the section in IE, and the second is of the same section in Firefox (it works right in Firefox).

[url]http://ahartley.net/bad.jpg[/url]
[url]http://ahartley.net/good.jpg[/url]

What am I missing? Thanks in advance!

to post a comment
HTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesNov 04.2005 — What am I missing?[/QUOTE]From the HTML 4.01 Specification:Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.[/quote]
Copy linkTweet thisAlerts:
@Stephen_PhilbinNov 04.2005 — It's an old problem in most browsers. It's because the image is being displayed as an inline element instead of a block element. Google something like "image inline baseline" and you'll probably get an explanation of why it is happening, but a quick fix to stop it happening is <i>
</i>td img {
display:block;
}


If I remember right, that should fix it.
×

Success!

Help @Hartley 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.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

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