 decentring table cells |
  |
| Peter Evans |
 Aug 25 2007, 07:43 AM
Post
#1
|
|
Advanced Member  Group: Members Posts: 109 Joined: 24-August 06 Member No.: 13  |
Argh, I hate working with others' markup.
I have inherited a site that uses a lot of little tables for layout. They're pretty innocuous, really; I think only a purist would object. Each has a single row with a left and a right-hand cell. The left one is <td width="6%" align="left" valign="top"><img [attributes] /></td> It doesn't matter if the little images aren't pushed to the left. It does look odd if they're not pushed to the top. If I were doing this afresh I'd use DIV and not tables. But I'm not doing it afresh. I don't see how the "position" property would help me here. Meanwhile, I sleepily see nothing wrong with td.button {width:6%; padding:0 auto auto 0;} img.button {height:20px; width:20px; margin 0 auto auto 0;} <td class="button><img class="button" [otherattributes] /></td> But this does nothing to dissuade centering (at least in Safari, the first browser I happened to try it in). I suppose the padding and margins are merely applied to the browser's silly old centering default rather than to tabula rasa (or tabula-cella sinistra et supra or whatever it'd be called). What stunningly simple mistake have I made or which remedy have I overlooked? If the only answer is to skip tables, then the hell with it, the site can stay muckily "transitional" (which won't hurt anyone in the slightest). |
  |
 
|
| pandy |
Aug 25 2007, 08:36 AM
Post
#2
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Is the image horizontally centered and you want it to be left aligned and you don't want to touch the HTML? Well, 'text-align: left' for the TD should to it.
If you after all can change the HTML, look for a CENTER tag or something. AFIK browsers default to left aligned table content, so the author must have centered the image somehow. |
|
|
|
| Christian J |
Aug 25 2007, 03:32 PM
Post
#3
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
CODE td.button {width:6%; padding:0 auto auto 0;} img.button {height:20px; width:20px; margin 0 auto auto 0;} <td class="button><img class="button" [otherattributes] /></td> The "auto" margin-left and margin-right values will center the image: http://bluerobot.com/web/css/center1.html Why do you use "auto" values for padding? I'm not even sure if they're allowed. |
|
|
|
| pandy |
Aug 25 2007, 03:40 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE The "auto" margin-left and margin-right values will center the image Only if it's also made 'display. block'. Or if the browser is IE. |
|
|
|
| Christian J |
Aug 25 2007, 04:23 PM
Post
#5
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Aug 25 2007, 10:40 PM)  Or if the browser is IE. Not even then, it appears. Now I also notice that Peter Evans used CODE margin: 0 auto auto 0; and not CODE margin: 0 auto 0 auto; which might have been used for centering. BTW there are several typos/syntax errors in Peter Evans code example.  |
|
|
|
| Peter Evans |
Aug 26 2007, 01:37 AM
Post
#6
|
|
Advanced Member Group: Members Posts: 109 Joined: 24-August 06 Member No.: 13 |
QUOTE(Christian J @ Aug 26 2007, 06:23 AM) BTW there are several typos/syntax errors in Peter Evans code example. There are? Well son of a female dog. Here it is again: CODE td.button {width:6%; padding:0 auto auto 0;} img.button {height:20px; width:20px; margin 0 auto auto 0;} <td class="button><img class="button" [otherattributes] /></td> Well, clearly the CSS bits are in a stylesheet and the HTML bit within a row within a table within the actual web page. And of course I don't mean "[attributes]"; I instead mean that there'd be various extra attributes (src, alt). But did I really mess up something else? As I look at this page again, I decide I wouldn't even use DIVs if I did it afresh. I'd instead use plain old paragraphs. Or rather, since they're headings, I'd use H3. (Getting ho-hum pages to validate against a strict DTD is a bit of a laugh. Lots of "<BR />" between, rather than in, block-level elements? No worry -- just change <body> to <body><div> and </body> to </div></body>. Same old sloppiness, but you can tell yourself you've been "strict".) |
|
|
|
| Frederiek |
Aug 26 2007, 03:59 AM
Post
#7
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
W3C's CSS spec on padding doesn't specify "auto" as a value for padding, only for margin (see higher up on the same page).
Other than that, I don't see anything wrong in Peter's CSS. Note though, that if you specify four value properties, the order of them is top, right, bottom and left. Using only two, it's top/bottom left/right. selector {top right bottom left;} selector {top/bottom right/left;} BTW, are you becoming a webmaster now, Peter? |
|
|
|
| Christian J |
Aug 26 2007, 04:07 PM
Post
#8
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
CODE margin 0 auto auto 0; Missing colon after "margin". CODE <td class="button> Missing quote after "button".  |
|
|
|
| pandy |
Aug 26 2007, 04:26 PM
Post
#9
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(Christian J @ Aug 25 2007, 11:23 PM) QUOTE(pandy @ Aug 25 2007, 10:40 PM) Or if the browser is IE. Not even then, it appears. Now I also notice that Peter Evans used CODE margin: 0 auto auto 0; and not CODE margin: 0 auto 0 auto; You tricked me so I misread it.  QUOTE which might have been used for centering. No, it might not. Unless the browser is IE. Peter, this thread is getting very confusing. It seems we all interpret your question differently. I thought you wanted to override some centering in the old HTML, but now I don't know what the issue is.  |
|
|
|
| Christian J |
Aug 26 2007, 05:37 PM
Post
#10
|
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Aug 26 2007, 11:26 PM) You tricked me so I misread it. I wish.  QUOTE QUOTE which might have been used for centering. No, it might not. Unless the browser is IE. No, not even in IE/quirksmode (if I remember yesterday's test correctly), only with "display: block". QUOTE Peter, this thread is getting very confusing. It seems we all interpret your question differently. I thought you wanted to override some centering in the old HTML, but now I don't know what the issue is. I thought he wanted to replace presentational cell attributes with CSS, but mixed up the usual default styles, who(sp?) include: CODE <th align="center" valign="middle"> <td align="left" valign="middle"> |
|
|
|
| Peter Evans |
Aug 26 2007, 06:28 PM
Post
#11
|
|
Advanced Member Group: Members Posts: 109 Joined: 24-August 06 Member No.: 13 |
QUOTE(Christian J @ Aug 27 2007, 06:07 AM) Missing colon after "margin". ... Missing quote after "button". Whoops, yes. But of course that stuff was just typed in for this message; it wasn't from the actual page. Hm, I'll reconsider the page later today. |
|
|
|
| pandy |
Aug 26 2007, 07:37 PM
Post
#12
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(Christian J @ Aug 27 2007, 12:37 AM) No, not even in IE/quirksmode (if I remember yesterday's test correctly), only with "display: block". Yes, you are right. I was mistaken, but that was only because you tricked me.  |
|
|
|
| Peter Evans |
Aug 26 2007, 11:08 PM
Post
#13
|
|
Advanced Member Group: Members Posts: 109 Joined: 24-August 06 Member No.: 13 |
The longer I look at this site, the more inclined I am to leave it. The markup validates against a transitional DTD. The use of GIF spacers and the like isn't excessive by commercial standards. All the meaningless images have null values for ALT. Without Javascript, navigation still works (it's just less pretty); the site's even navigable with images turned off. I can convert it to my idea of what it should be, but probably the only person who'd thrill to this is me, and the thrill would dissipate fast if told that some change I'd made had rendered the site less pretty in MSIE. Worse, I'd be tempted to cut corners, making meaningless changes not in order to improve the site but merely in order to wangle validation against a strict DTD.
Moreover, I'm depressed by my failure to notice my own missing quotation marks, etc! |
|
|
|
| pandy |
Aug 27 2007, 07:06 AM
Post
#14
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
So didn't 'text-align: left' work?
 |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 23rd April 2024 - 05:20 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC