Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old February 17th, 2012, 06:09 AM
Authorized User
Points: 173, Level: 3
Points: 173, Level: 3 Points: 173, Level: 3 Points: 173, Level: 3
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2004
Location: , , .
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..
Reply With Quote
  #2 (permalink)  
Old February 17th, 2012, 09:16 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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!
Reply With Quote
  #3 (permalink)  
Old February 17th, 2012, 09:34 AM
Authorized User
Points: 173, Level: 3
Points: 173, Level: 3 Points: 173, Level: 3 Points: 173, Level: 3
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2004
Location: , , .
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
Reply With Quote
  #4 (permalink)  
Old February 17th, 2012, 09:38 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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!
Reply With Quote
  #5 (permalink)  
Old February 17th, 2012, 11:18 AM
Authorized User
Points: 173, Level: 3
Points: 173, Level: 3 Points: 173, Level: 3 Points: 173, Level: 3
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2004
Location: , , .
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
Reply With Quote
  #6 (permalink)  
Old February 17th, 2012, 11:24 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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!
Reply With Quote
  #7 (permalink)  
Old February 17th, 2012, 01:07 PM
Authorized User
Points: 173, Level: 3
Points: 173, Level: 3 Points: 173, Level: 3 Points: 173, Level: 3
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2004
Location: , , .
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
Reply With Quote
  #8 (permalink)  
Old February 17th, 2012, 01:37 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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!
Reply With Quote
  #9 (permalink)  
Old February 17th, 2012, 01:53 PM
Authorized User
Points: 173, Level: 3
Points: 173, Level: 3 Points: 173, Level: 3 Points: 173, Level: 3
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2004
Location: , , .
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..
Reply With Quote
  #10 (permalink)  
Old February 17th, 2012, 02:21 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 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!
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 03:20 AM.


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