[RESOLVED] table border problem

**gibby** · 02-16-2012 02:21 PM

Hello,

I have the following HTML:

Code:

<html>

<head>
</head>

<body>

<table style="height: 100%;" cellspacing=0 cellpadding=0 border=1>

<tr><td colspan=2 style="height: 100px; text-align: center;">
<span style="font-size: 24px;">
<img src="H&R banner.jpg" border=0></span></td></tr>

<tr>

<td style="width: 200px; padding-top: 10px; text-align: center;">
<iframe style="width=100%; height: 100%;" src="news.html" scrollable=yes frameborder=no></iframe>
</td>

<td style="width: 530px;">
<table style="width: 100%; height: 100%" cellspacing=0 cellpadding=0 border=0>

<tr>
<td style="height: 50px; background: url('menu_bg.jpg'); text-align: center;">

<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td><img src="home.jpg" border=0></td>
<td><img src="properties.jpg" border=0></td>
<td><img src="about.jpg" border=0></td>
<td><img src="contact.jpg" border=0></td>
</tr>
</table>

</td></tr>

<tr>
<td style="text-align: center;">
<iframe style="width: 100%; height: 100%;" src="content.html" srollable=yes frameborder=0></iframe>
</td>
</tr>

</table>
</td>

</tr>
</table>

</body>
</html>

The line in bold is causing me trouble.

If I change border=1 to border=0, suddenly my table goes all out of wack. The banner at the top (H&R banner.jpg) all of a sudden shift about 20 pixels to the right becoming misaligned with everything else in the table.

Does anyone know why this is?

**gibby** · 02-16-2012 03:42 PM

I uploaded the page to these two sites so that you can see what I mean:

http://www.shahspace.com/border1/ <-- border=1
http://www.shahspace.com/border0/ <-- border=0

**SivoxII** · 02-16-2012 03:55 PM

Hmm, that is strange!

It's almost as if your parameters are so tight, that the 1 pixel border is kicking things out (but would expect it to happen in reverse, not by removing the frame border ... interesting.

Just one suggestion, try aligning your whole document 'centered' and see if the same result occurs with 0,1 pixel borders?

Hope this is some help, but I'm no expert by any means, sorry.

All the best,
Siv

**SivoxII** · 02-16-2012 03:57 PM

.. also worth experimenting with:

<body leftmargin=0 topmargin=0>

see what is produces with "border=0"

All the best,
Siv

**spufi** · 02-16-2012 07:00 PM

This seems to work fine in FF and Chrome and is only an issue in IE.

Other things of note...
- You honestly shouldn't be using tables for a layout anyway.
- You need to make sure your page validates(http://validator.w3.org/) Your zero border example came up with 12 errors and 5 warnings.
- Your CSS should be linked externally. Content should be separated from presentation.
- Make sure to be consistent with double quoting values.
- Using iframes was a pet peeve of mine even 8-10 years ago. I can't imagine using them these days. Display "x" amount of content like news, and if you want people to look at more, simply give them a link to go look at more of the specified content.

**yuranga** · 02-16-2012 11:52 PM

I agree with spufi, you go for FF or Chrome rather than IE.

**jadhav.soma** · 02-17-2012 05:53 AM

Hi,
we need to remove "text-align: center;" on following class

td.banner {
height: 100px;
text-align: center;
}

it works in all browsers.............hope it will be helpfull

Thanks,
Som.

**spufi** · 02-17-2012 07:40 AM

Originally Posted by yuranga

I agree with spufi, you go for FF or Chrome rather than IE.

You code for all browsers.

**Major Payne** · 02-17-2012 10:16 AM

Best to do a table layout using a separate CSS file or at least embedded CSS. Might try:

Code:

<table style="table-layout: fixed; width: XXXpx; margin: 0 auto; padding: 0; border-collapse: collapse; border: 1px solid #c0c0c0;" summary="">

Always tell browsers what you want them to do.

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Why tables for layout is stupid: http://www.hotdesign.com/seybold/
How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/ho...tml-tables-css
Basic Tables [Bad Examples!]: http://www.yourhtmlsource.com/tables/basictables.html
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps

**gibby** · 02-17-2012 12:29 PM

The problem turned out the be the table size after all - without borders, the table is too small to contain the banner. I just wasn't expecting such a big shift (it shifts it to where ever it wants if it doesn't fit).

Thread: [RESOLVED] table border problem

Thread Tools

Display

[RESOLVED] table border problem

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions