Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 17th, 2012, 06:09 AM
Authorized User
 
Join Date: Dec 2004
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Default Seamless integration of table cells

Hi everybody,

My Main webpage (which is supposed to be written in XHTML !!) header is a complex picture which I divided in 5 pieces.
I want to rebuild the image by defining a table with 5 cells, each having one of the pieces as background, something like:

Code:
<table class="main-header">
  <tr>
  <td><img src="http://p2p.wrox.com/images/A.bmp" width="75px" height="114"></td>
  <td><img src="http://p2p.wrox.com/images/B.bmp"  width="170px" height="114"></td>
  <td><img src="http://p2p.wrox.com/images/C.bmp" width="275px" height="114"></td>
  <td><img src="http://p2p.wrox.com/images/D.bmp" width="275px" height="114"></td>
  <td><img src="http://p2p.wrox.com/images/E.bmp" width="75px" height="114"></td>
  </tr>
</table>
Stylesheet is:

Code:
    
.main-header
    {border-collapse: collapse;
     border:0px;
     margin:0px;}
My problem is, there appear vertical stripes (i.e. borders) between the cells.

Now the question:
how do I obliterate the vertical border of a cell - and, for that matter, all its borders ?

I need cells with no borders, so the images stick seamless to each other.

Thanks,
Mike

Last edited by mike_abc; February 17th, 2012 at 07:11 AM..
 
Old February 17th, 2012, 09:16 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi Mike,

Have you tried setting cellspacing and cellpadding to 0 like this:

<table class="main-header" cellpadding="0" cellspacing="0">

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old February 17th, 2012, 09:34 AM
Authorized User
 
Join Date: Dec 2004
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi Imar,

I've tried NOW ! Doesn't work. Listen, for a reason that is not VERY clear to me, in my header I have this:

Code:
<header>
<!DOCTYPE html PUBLIC "-//W3C XHTML 1.0 Transitional//EN" "DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro" xml:lang="ro">
which is some sort of XHTML, isn't it ?

Shouldn't I change to Html 4.0, i.e. have just a <header> tag ? Maybe table formatting wouldn't be so complicated, then.


My problem is, I'm not current on HTML/XHTML (although I have prior experience) and have no good "XHTML-CSS" book, so I'm stumbling around. The books I have all refer to html/html 4.0 in regard to formatting.

Mike
 
Old February 17th, 2012, 09:38 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

The <header> tag shouldn't be there. The doc type should be the first thing in the page. Take a look here for some examples: http://imar.spaanjaars.com/283/docty...nd-xhtml-pages

You probably want to go for XHTML1 transitional.

Can you provide a link to your problematic page?

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old February 17th, 2012, 11:18 AM
Authorized User
 
Join Date: Dec 2004
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I Know ! I made a mistake in my last post.
The file works - except for the vertical stripes between the cells.
The code is what I have already posted.

What I mean to say is, why bother with XHTML and the corresponding CSS (2.0 or 2.1) - which is different from HTML 4.0 AND IT'S CORRESPONDING CSS ?!

I'll try plain Html 4.0 or whatever it's needed to generate BORDERLESS TABLES.

E.g. <table border="0"> is from which Html/CSS version ?

Mike
 
Old February 17th, 2012, 11:24 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

XHTML is basically a reformulation of HTML 4 in XML. In other words, the tags and so on are still the same, but XHTML forces the document to be valid XML.

By using an XHTML document type, you force a standards mode in the browser's rendering. Without it, the browser my default to another / older rendering engine which could cause problems. Using XHTML transitional (or the new HTML 5) is likely to create pages that look and behave the same in most modern browsers.

Quote:
The code is what I have already posted.
I know, but since the images are fake, I can't test this out and see how it looks. Also, there may be other stuff in your page that you haven't shown us that causes problems. In my test page, the white spaces disappears if I add cellspacing and cellpadding as shown earlier.

Quote:
E.g. <table border="0"> is from which Html/CSS version ?
Tables have been around for ages and are included in all major HTML versions.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old February 17th, 2012, 01:07 PM
Authorized User
 
Join Date: Dec 2004
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I would GLADLY provide a link. But I don't have an absolute IP address - I'm linked via ADSL to a Romanian ISP (Romtelecom). The best thing I can do is to send you a .zip file which contains the 2 "html" files ( index.php - which doesn't yet contain php, only html - and the css) and the 5 pictures I'm trying to glue together. It's that simple !

My environment is Apache2 on Ubuntu 10.04, and Mozilla Firefox 10.0.1.


Please advise.

Thank you,

Mike
 
Old February 17th, 2012, 01:37 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Sure. If you can make it a plain HTML page, so much the better.

You can contact me through my site at http://imar.spaanjaars.com/contact Then I'll reply so you know my address and then send me the files. Alternatively, you can use something like DropBox to upload the files.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old February 17th, 2012, 01:53 PM
Authorized User
 
Join Date: Dec 2004
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Well, I was convinced that

Code:
.main-header
    {cellpadding: 0px;
     cellspacing: 0px;}

in the CSS file, and

<table class="main_header" cellpadding="0" cellspacing="0">
<tr> etc....
should have the same effect. Well, they don't ! The second variant, the one Imar suggested, did the trick - up to a 1px vertical gray line (border), that is still visible. (Does that have something to
do with the images being larger or smaller than the cells themselves ?)

And still - why isn't it the same thing ? That's what css is for, isn't it ?

Mike

PS. The 3-rd cell also has a curious effect: it's left border and right border are 5-6 px gray-shaded, so there isn't only a 1 px vertical line, but a 5-6 px vertical gray shade. The next cells only have the 1px vertical border.

Last edited by mike_abc; February 17th, 2012 at 01:59 PM..
 
Old February 17th, 2012, 02:21 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Take a look here for more info on the spacing issue: http://stackoverflow.com/questions/3...spacing-in-css

Quote:
up to a 1px vertical gray line (border), that is still visible. (Does that have something to do with the images being larger or smaller than the cells themselves ?)
Again, impossible to say without seeing the actual page.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!





Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamic Table Cells Links seshav Javascript 4 July 27th, 2010 09:32 AM
Table cells as links gjeardle HTML Code Clinic 16 January 24th, 2007 12:08 PM
Contentpage stretching table cells rsearing ASP.NET 2.0 Basics 3 November 14th, 2006 10:39 PM
datagrid add table cells problem keyvanjan ASP.NET 1.0 and 1.1 Basics 2 August 9th, 2006 11:55 PM
How to know cells in table is merging?? DorisTan VB How-To 0 January 13th, 2005 09:50 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.