p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   HTML Code Clinic (http://p2p.wrox.com/forumdisplay.php?f=90)
-   -   Seamless integration of table cells (http://p2p.wrox.com/showthread.php?t=86707)

mike_abc February 17th, 2012 06:09 AM

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

Imar February 17th, 2012 09:16 AM

Hi Mike,

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

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

Cheers,

Imar

mike_abc February 17th, 2012 09:34 AM

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

Imar February 17th, 2012 09:38 AM

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

mike_abc February 17th, 2012 11:18 AM

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

Imar February 17th, 2012 11:24 AM

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

mike_abc February 17th, 2012 01:07 PM

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

Imar February 17th, 2012 01:37 PM

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

mike_abc February 17th, 2012 01:53 PM

Well, I was convinced [:D] 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 ? [:confused:]

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.

Imar February 17th, 2012 02:21 PM

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


All times are GMT -4. The time now is 11:55 AM.

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