[RESOLVED] table border problem
I have the following HTML:
The line in bold is causing me trouble.
<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>
<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 style="width: 530px;">
<table style="width: 100%; height: 100%" cellspacing=0 cellpadding=0 border=0>
<td style="height: 50px; background: url('menu_bg.jpg'); text-align: center;">
<table cellspacing=0 cellpadding=0 border=0>
<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>
<td style="text-align: center;">
<iframe style="width: 100%; height: 100%;" src="content.html" srollable=yes frameborder=0></iframe>
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?
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
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,
.. also worth experimenting with:
<body leftmargin=0 topmargin=0>
see what is produces with "border=0"
All the best,
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.
I agree with spufi, you go for FF or Chrome rather than IE.
we need to remove "text-align: center;" on following class
it works in all browsers.............hope it will be helpfull
You code for all browsers.
Originally Posted by yuranga
Best to do a table layout using a separate CSS file or at least embedded CSS. Might try:
Always tell browsers what you want them to do.
<table style="table-layout: fixed; width: XXXpx; margin: 0 auto; padding: 0; border-collapse: collapse; border: 1px solid #c0c0c0;" summary="">
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
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).
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)