W3C home > Mailing lists > Public > www-html@w3.org > June 2003

RE: border and xhtml 1.1

From: Matthew Fletcher <fletcherm@business1st.uk.com>
Date: Tue, 10 Jun 2003 09:01:36 +0100
Message-ID: <ACD217E6A92DA84FABE46143198468B62281EB@srv3.Office.B-1St.Com>
To: <www-html@w3.org>

I seem to remember a "quirk" where if the </td> isn't completely next to the <img /> then there are gaps.

Compare

<table>
   <tr>
     <td>
       <img class="menu" src="menu01.gif" />
     </td>
   </tr>
   <tr>
     <td>
       <img class="menu" src="menu02.gif" />
     </td>
   </tr>
</tabke>

to

<table>
   <tr>
     <td><img class="menu" src="menu01.gif" /></td>
   </tr>
   <tr>
     <td><img class="menu" src="menu02.gif" /></td>
   </tr>
</table><!-- Fixed spelling mistake -->

Matt Fletcher

-----Original Message-----
From: Jens Meiert [mailto:jens.meiert@erde3.com]
Sent: 10 June 2003 07:27
To: linux-yoann@ifrance.com
Cc: www-html@w3.org; Toby A Inkster
Subject: Re: border and xhtml 1.1



> <img class="menu" src="menu01.gif" />

I strongly recommend to use as well width and height attributes (to avoid
rendering delays) as the alt attribute to go partially WAI conform.

By the way, if you used (image related) width assignments for your <td />
elements, you would not have noticed any problem.


 Jens Meiert.



> On Mon, Jun 09, 2003 at 06:57:17PM +0200, Yoann wrote:
> | part of my page :
> | 
> | <table>
> |   <tr>
> |     <td>
> |       <img class="menu" src="menu01.gif" />
> |     </td>
> |   </tr>
> |   <tr>
> |     <td>
> |       <img class="menu" src="menu02.gif" />
> |     </td>
> |   </tr>
> | </tabke>
> | 
> | part of my style.css :
> | 
> | table.menu{
> | text-align: left;
> | vertical-align: top;
> | margin:0px;
> | border:hidden;
> | padding:0px;
> | }
> 
> Well, this will have no effect, as the table is not of class menu. I 
> think what you meant was:
> 
> table{
> text-align: left;
> vertical-align: top;
> margin:0px;
> border:hidden;
> padding:0px;
> }
> 
> Either way, the correct way of doing this would be:
> 
> <div id="menu">
> <img src="menu01.gif" alt="Something" />
> <img src="menu02.gif" alt="Something Else" />
> </div>
> 
> div#menu img{
> 	padding-top: 0;
> 	margin-top: 0;
> 	border-top: 0;
> 	padding-bottom: 0;
> 	margin-bottom: 0;
> 	border-bottom: 0;
> }
> 
> Although why you are using images for a menu is beyond me. You should be 
> using a list element of some kind. e.g. <ul /> or <ol />.
> 
> 
> -- 
> Toby A Inkster BSc (Hons) ARCS | mailto:tobyink@goddamn.co.uk |
> pgp:0x6A2A7
> D39
>     aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:tai@jabber.linux.it
>             http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
>                              playing://(nothing)
> 


-- 
Jens Meiert

Steubenstr. 28
D-26123 Oldenburg

Mobil +49 (0)175 78 4146 5
Telefon +49 (0)441 99 86 147
Telefax +49 (0)89 1488 2325 91

Mail <jens@meiert.com>
Internet <http://meiert.com>
Received on Tuesday, 10 June 2003 04:03:05 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 27 March 2012 18:15:55 GMT